/* ----- Reset (Meyer) ----- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ----- Custom Properties ----- */

:root {
  --color-bg: #dad1ca;
  --color-text: #1f1e1e;
  --color-primary: #2e4e54;
  --color-primary-dark: #172d30;
  --color-secondary: #4e3d31;
  --color-header-bg: rgb(42, 52, 60);
  --color-glow: #e8f3ee;
  --font-heading: "Cinzel", serif;
  --font-body: "Quicksand", sans-serif;
  --max-width: 800px;
}


/* ----- Base ----- */

body {
  background-color: var(--color-bg);
  font-size: 18px;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;

  @media (min-width: 769px) {
    background-image: url("/assets/background-33248a61.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  }
}

strong { font-weight: bold; }

small {
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.75;
}

a {
  color: var(--color-primary);

  &:hover { color: var(--color-primary-dark); }
}

p, li, h1, h2, h3 {
  text-shadow: 0 0 2px var(--color-glow), 0 0 1em var(--color-glow);
}


/* ----- Button ----- */

.button {
  font-family: var(--font-body);
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: bold;
  border: none;
  padding: 0.5em 2em;
  border-radius: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  font-size: 1em;
  text-decoration: none;
  display: inline-block;

  &:hover {
    background: var(--color-primary-dark);
    color: var(--color-bg);
  }

  & strong {
    font-size: 1.5em;
  }
}


/* ----- Header (default: app style, sticky) ----- */

#header {
  margin-bottom: 2.5em;
  background: var(--color-header-bg);
  top: 0;
  position: sticky;
  z-index: 10;
  opacity: 0.85;
  box-shadow: 0 1em 2em -1em var(--color-header-bg);
  transition: opacity 0.25s;

  &:hover { opacity: 1; }

  & .header_bar {
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 0.5em;
    margin: 0 auto;
    max-width: var(--max-width);
  }

  & .logo {
    width: 3em;
    height: 3em;

    & a {
      display: inline-block;
      width: 3em;
      height: 3em;
      border-radius: 50%;
      filter: invert(1);
      cursor: pointer;
      box-sizing: border-box;
      padding: 0.25em;
      transition: background 0.25s;

      &:hover { background: rgba(255, 255, 255, 0.25); }
    }

    & img { width: 100%; }
  }

  & .tagline {
    font-size: 1em;
    margin: 0.5em;
    color: white;
    text-shadow: none;
    display: flex;
    align-items: center;

    & strong { padding-left: 0.25em; }
  }

  @media (max-width: 768px) {
    margin-bottom: 1em;
  }
}


/* ----- Landing page overrides ----- */

.pages.home {
  & #header {
    margin-bottom: 5em;
    background: transparent;
    position: static;
    opacity: 1;
    box-shadow: none;

    & .header_bar {
      flex-direction: column;
    }

    & .logo {
      margin: 1em auto 0 auto;
      width: 14em;
      height: 14em;

      & a {
        width: 14em;
        height: 14em;
        filter: none;
        border-radius: 0;
        padding: 0;

        &:hover { background: transparent; }
      }
    }

    & .tagline {
      text-align: center;
      font-size: 1.25em;
      margin: 1em auto;
      color: var(--color-primary);
      text-shadow: 0 0 2px var(--color-glow), 0 0 1em var(--color-glow);
      display: block;
    }

    @media (max-width: 768px) {
      margin-bottom: 1em;

      & .logo {
        width: 11em;
        height: 11em;

        & a {
          width: 11em;
          height: 11em;
        }
      }

      & .tagline { font-size: 1em; }
    }
  }
}


/* ----- Main ----- */

#main {
  & section {
    max-width: var(--max-width);
    margin: 0 auto 3em auto;

    @media (max-width: 768px) {
      margin: 0.5em;
    }

    & h2 {
      font-size: 1.5em;
      margin-bottom: 0.5em;
      font-family: var(--font-heading);
      color: var(--color-primary);

      @media (max-width: 768px) { text-align: center; }
    }

    & h3 {
      font-size: 1.25em;
      font-family: var(--font-heading);
      color: var(--color-secondary);

      @media (max-width: 768px) { text-align: center; }
    }

    & ul { margin-bottom: 2em; }
  }
}


/* ----- Projects cards ----- */

.projects {
  & .card {
    display: flex;
    margin-bottom: 3em;
    min-height: 15em;
    border-radius: 0.25em;
    padding: 1em;
    box-sizing: border-box;

    @media (max-width: 768px) {
      flex-direction: column;
      width: 100%;
    }

    & .image {
      width: 30%;
      text-align: center;

      & img { width: 100%; }

      @media (max-width: 768px) {
        width: 100%;

        & img { width: 80%; }
      }
    }

    & .description {
      width: 70%;
      box-sizing: border-box;
      padding: 0.5em 1em;
      text-align: justify;

      @media (max-width: 768px) { width: 100%; }
    }

    & .actions {
      margin-top: 1em;
      text-align: right;
      color: var(--color-secondary);

      @media (max-width: 768px) { text-align: center; }
    }
  }
}


/* ----- Game page ----- */

.game_page {
  & h2 {
    text-align: center;

    & img {
      width: 100%;
      max-width: 15em;
    }
  }

  & .screenshot {
    margin: 3em auto;
    text-align: center;

    @media (max-width: 768px) { margin: 1em auto; }

    & img {
      width: 100%;
      box-sizing: border-box;
      border: 0.1em solid #2d231b;
      border-radius: 0.5em;
    }
  }

  & .visual {
    margin: 3em auto;
    text-align: center;

    @media (max-width: 768px) { margin: 1em auto; }

    & img {
      width: 100%;
      box-sizing: border-box;
    }
  }

  & h3 {
    margin-top: 3em;
    margin-bottom: 1em;
    font-size: 1.5em;
    text-align: center;

    @media (max-width: 768px) {
      margin-top: 2em;
      font-size: 1.25em;
    }
  }

  & p {
    line-height: 1.6;
    margin-bottom: 1em;
    padding: 0 2.5em;

    @media (max-width: 768px) { padding: 0 0.5em; }
  }

  & ul {
    margin-bottom: 1em;
    padding: 0 2.5em;

    @media (max-width: 768px) { padding: 0 0.5em; }

    & li {
      margin-bottom: 1em;
      line-height: 1.6;
    }
  }

  & .join_the_alpha {
    text-align: center;
    margin: 3em;

    @media (max-width: 768px) { margin: 3em 1em; }
  }
}


/* ----- Legal notice ----- */

#legal_notice {
  & h2, & h3 {
    text-align: left;

    & small {
      display: block;
      margin-bottom: 1em;
    }
  }

  & h2 { margin-bottom: 1.5em; }
}


/* ----- Error pages ----- */

.error {
  text-align: center;

  & p { margin-bottom: 1em; }

  & .illustration {
    text-align: center;

    & img { max-width: 60%; }
  }

  @media (max-width: 768px) {
    & .end { display: none; }

    & .illustration img { max-width: 80%; }
  }
}


/* ----- Footer ----- */

#footer {
  text-align: center;
  margin: 8em auto 4em auto;
  max-width: 600px;
  font-size: 0.8em;
  color: var(--color-secondary);

  @media (max-width: 768px) {
    margin: 4em 0.5em 2em 0.5em;
  }

  & .social {
    margin-bottom: 1em;

    & a {
      opacity: 0.5;
      display: inline-block;
      margin: 0 0.5em;
      transition: opacity 0.2s ease-in-out;

      & img { width: 3em; }

      &:hover { opacity: 1; }
    }
  }

  & p { margin-bottom: 1em; }
}


/* ----- Flash messages ----- */

.flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  z-index: 1000;
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.flash_alert {
  background-color: #c4b2a5;
  color: #563d3d;
}

.flash_notice {
  background-color: #b2c4a5;
  color: #44563d;
}

.flash .close {
  cursor: pointer;
  font-size: 1.2em;
}