/*
  Reset CSS from https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::after,
*::before {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
canvas,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
#__next,
#root {
  isolation: isolate;
}

:root {
  --overflow-background: #a4adaa;
  --link-color: #bfe9ec;
  --link-muted-color: #bfe9ec3f;
  --half-black: rgba(0, 0, 0, 0.5);
  --main-background: #67777d;
  --header-color-1: #4c5b61;
  --header-color-2: #4a575e;
  --almost-white: rgb(235, 235, 235);
  --game-bg: #b6bfc0;
}

/* Custom CSS */
html {
  font-family: "Montserrat", sans-serif;
  background-color: var(--overflow-background);
}

p>a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--link-muted-color);
  &:hover {
    border-bottom: 2px dashed var(--link-color);
  }
}

span.emoji {
  font-family: 'Noto Color Emoji', serif;
  font-weight: 400;
  font-style: normal;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--main-background);
  box-shadow: 0 0 5em 3ex rgba(0, 0, 0, 0.75);
  overflow-x: hidden;
}

header.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1ex 2ex;
  background: linear-gradient(to bottom, var(--header-color-1), var(--header-color-2));
  color: rgba(255, 255, 255, 0.801);
  font-weight: bold;
  text-shadow: 1px 1px 3px var(--half-black);
  padding: 3ex;

  h1 a {
    display: grid;
    grid-template-areas: 
      "logo title" 
      "logo subtitle";
    grid-template-columns: 4ex auto;
    text-decoration: none;
    &:hover{
      filter: brightness(1.2);
    }


    >span {
      grid-area: logo;
      color: #d1c4bc;
      white-space: nowrap;
    }
    >span+span {
      color: #e9ebe2;
      display: flex;
      flex-direction: row;
      margin: 0;
      padding: 0;
      font-size: 40%;
      grid-area: title;
      margin-left: 1ex;
      text-align: center;
      align-items: end;
    }
    >span+span+span {
      grid-area: subtitle;
      margin-left: 1ex;
      align-items: start;
    }
  }

  nav {
    display: flex;
    gap: 1ex;

    ul {
      list-style-type: none;
      padding: 0;

      li a {
        color: rgb(185, 185, 185);
        text-decoration: none;

        &:hover {
          color: white;
        }
      }
    }
  }
  box-shadow: 0 1ex 3ex var(--half-black);
}

header.hero {
  background: 
    linear-gradient(to bottom, transparent 98%, #222 102%),
    url("gamey-bg.png");
  aspect-ratio: 1432 / 552;
  background-size: cover;
  container-type: size;
  box-shadow: 
    0 .5ex .5ex var(--half-black),
    0 1ex 3ex var(--half-black);
  text-shadow: 
    0 0 1ex #6bb6bd,
    1px 1px 3px var(--half-black);

  h2 {
    font-size: 5cqw;
    margin: 1em;
    width: 8em;
    color: white;
  }
  p {
    display: none;
  }
}

section.games-list {
  margin: 4ex;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  color: white;
  gap: 5%;

  >h3 {
    letter-spacing: .1ex;;
    grid-column: 1/-1;
    margin-bottom: 1ex;
    text-shadow: .5ex .5ex 1ex var(--half-black);
  }
  margin-bottom: 2em;
  padding-bottom: 2ex;

  article {
    display: flex;
    flex-direction: column;
    gap: 1ex;
    padding: 1ex;
    background-size: contain;
    background:
      linear-gradient(to bottom, #7ea8ae, #e2cabb, #f7cdb7 45%, #feefd6 50%, #24333e 51%, #0c1c23 )
    #294150;
    border-radius: 2ex;
    box-shadow: 
      0 0 .75ex rgba(0, 0, 0, 0.2),
      1ex 1ex 1ex var(--half-black);
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 2ex;

    &:hover {
      transform:  translateY(-1ex);
      box-shadow: 
      0 0 .75ex rgba(0, 0, 0, 0.2),1ex 2ex 2ex var(--half-black);
    }


    a.screenshot {
      overflow: hidden;
      position: relative;
      padding: 3ex;
      margin: -2ex;
      img {
        border: 2px solid rgba(0,0,0,0.3);
      }
    }

    &.in-beta, &.coming-soon{
      a.screenshot:before {
        content: "BETA";
        right: -5ex;
        top: 2ex;

        --ribbon-bg: #fff;
        --ribbon-border: #333;
        --ribbon-color: #333;
        
        letter-spacing: .2ex;;
        position: absolute;
        padding: .3ex 3em;
        border: 2px solid var(--ribbon-border);
        color: var(--ribbon-color);
        font-weight: bold;
        transform: rotate(45deg);
        text-align: center;

        background: 
          linear-gradient(135deg, var(--ribbon-border) 16%, transparent 30%), 
          linear-gradient(-135deg, var(--ribbon-border) 16%, transparent 29%), 
          var(--ribbon-bg);

        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
      }
    }
    &.coming-soon{
      a.screenshot:before{
        content: "COMING SOON";
        right: -6ex;
        top: 2ex;
        width: 12em;
        --ribbon-color: #555;
      }
      filter: grayscale(0.5);
    }

    h3 {
      font-size: 1.43em;
      font-weight: 600;
      margin: 0;
      margin-left: -1em;
      text-align: center;
    }
    p {
      margin-bottom: 1ex;
      font-size: 80%;
      text-align: center;
    }
    button, a[role="button"] {
      display: block;
      border-radius: 4ex;
      margin-top: auto;
      margin-right: auto;
      margin-bottom: 1ex;
      margin-left: auto;
      padding: 1ex 2ex;
      background-color: rgb(216, 217, 221);
      text-decoration: none;
      font-weight: bold;
      color: #333;
      box-shadow: 0 .5ex 1ex var(--half-black);

      &:hover {
        background-color: white;
      }
    }
  }
}

main>footer {
  background: linear-gradient(to bottom, transparent 20%, var(--header-color-1) 20%, var(--header-color-1) 25%, #3f4e55 25%);
  padding: 3ex;
  padding-top: 7ex;
  margin-top: auto;
  font-size: 90%;
  text-align: center;

  p+p{
    opacity: 0.75;
  }
}

@media screen and (max-width: 768px) {
  section.games-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  section.games-list {
    display: flex;
    flex-direction: column;
    gap: 4ex;
  }
}

.game {
  background-color: var(--game-bg);
  color: #333;
  padding: 2ex 0;
  h1 {
    padding-right: 2ex;
    font-size: 200%;
  }
  p, h1, li, h3, h4 {
    margin: 1ex 2ex;
    text-shadow: 0 0 2px rgba(0,0,0,0.05);
  }

  .game-header {
    text-align: center;
    margin-bottom: 4ex;
  }

  .game-footer {
    margin: 4em auto;
    width: min(max(80%, 500px), 100%);
    padding: 1ex;
    border-radius: 1ex;
    background-color: var(--almost-white);
    box-shadow: 0 0 1ex var(--half-black);
  }
}

div.nerd-notes {

  --yellow: rgb(224, 202, 0);

  color: var(--almost-white);
  font-family: 'Courier New', Courier, monospace;
  position: relative;
  border-radius: 1ex;
  box-shadow: 0 0 1ex var(--half-black);
  margin: 4em auto;
  width: min(max(80%, 500px), 100%);
  line-height: 1.5;
  border: 3px solid var(--yellow);
  padding: 1lh 1ex 1ex 1ex;
  background-color: #333;

  &:after {
    font-family: 'Noto Color Emoji', serif;
    font-weight: 400;
    font-style: normal;
    content: "🤓";
    position: absolute;
    left: -1ex;
    top: -1ex;
    font-size: 3em;
    display: block;
    text-align: center;
    rotate: -30deg;
    text-shadow: .1ex .1ex .2ex var(--half-black);
  }
  &:before {
    --border-size: 3px;
    --padh: 0.5ex;
    content: "nerd notes";
    position: absolute;
    border: var(--border-size) solid var(--yellow);
    color: #333;
    padding: var(--padh) 1ex;
    background-color: var(--almost-white);
    top: calc(-0.5lh - var(--padh) - var(--border-size));
    left: 2.5em;
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
    border-radius: 1ex;
  }
}