@font-face {
  font-family: "cygnito-mono";
  src: url("assets/fonts/Cygnito\ Mono.otf") format("opentype");
}

:root {
  --white: #FFFFFF;
  --bg: #010104;
  --orange: #ff8000;
  --green: #74bd2c;
}

* {
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "cygnito-mono";
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  /* color: #C0C0C0; */
  color: var(--green);
}

body {
  width: 100%;
  height: 140vh;
  background-image: url("assets/dithered.png");
  background-color: white;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;

  main {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 15px;
    width: 80%;

    @media screen and (device-width<=610px) {
      width: 95%;
    }

    height: 90%;
    padding: 20px;

    .glass {
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(6.4px);
      border-radius: 20px;
      border: 3px solid var(--orange);
    }

    .title {
      padding-left: 10px;
      border-bottom: 3px solid var(--orange);
      font-size: 25px;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    header {
      display: flex;
      font-size: 100px;
      grid-column: span 4;
      height: 100%;
      width: 100%;

      justify-content: center;
      align-items: center;

      background-image: url("assets/makima-removebg-preview.png");
      background-size: 150px 150px;
      background-repeat: no-repeat;
      background-position: bottom right;
    }

    aside {
      display: flex;
      flex-direction: column;
      grid-row: span 5;
      margin-bottom: 10px;

      h3 {
        font-size: 25px;
        padding: 0;
        margin: 0;
      }

      h4 {
        padding: 0;
        margin: 0 0 0 20px;
      }

      a {
        text-decoration: underline wavy var(--orange);
      }

      #contas {
        align-self: center;
        display: grid;
        grid-template-rows: repeat(5, 1fr);
        width: 90%;
        min-height: 25%;
        margin-bottom: 20px;
        justify-content: left;
        background-image: url("assets/miaukima.png");
        background-repeat: no-repeat;
        background-size: 40% 40%;
        background-position: bottom right;
        background-origin: bottom right;

        .conta {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          font-size: 30px;
          border-left: 4px solid var(--orange);
          padding-left: 10px;
        }
      }

      #musica {
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 90%;
        margin-bottom: 20px;
      }

      #jogo {
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 90%;
        height: 40%;

        #img {
          width: 100%;
          height: 100%;
          background-image: url("assets/pikmin-cover.jpg");
          background-size: auto 100%;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    &>div {
      grid-row: span 4;
      grid-column: span 3;

      #conteudo {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 90%;
        margin: 0 10px;

        .prateleira {
          display: grid;
          height: 50%;
          width: 100%;
          grid-template-columns: repeat(3, 1fr);


          p {
            background-color: white;
            border: 3px groove var(--orange);
            border-radius: 20px;
            grid-column: span 2;
            padding: 4px;
            align-self: center;
            justify-self: center;
          }

          img {
            width: 90%;
            height: auto;
            justify-self: center;
            align-self: center;
          }

          #atualizacoes {
            grid-column: span 3;
            width: 70%;
            height: 60%;
            justify-self: center;
            align-self: center;
            background-color: white;
            border: 3px groove var(--orange);
            border-radius: 20px;
          }
        }
      }
    }
  }
}

@supports (-webkit-touch-callout: none) {
  body { background: none; height: auto; min-height: 100dvh; }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("assets/dithered.png") center / cover no-repeat, white;
  }
}

@media (max-width: 900px) {
  body main {
    display: flex;
    flex-direction: column;
    position: static;
    transform: none;
    width: 95%;
    height: auto;
    margin: 0 auto;
    padding: 10px;
  }
  html body main aside #contas {
    background-size: auto 120px;
    padding-bottom: 100px; /* keeps links from overlapping the image */
  }
  body main header { font-size: clamp(2rem, 11vw, 60px); min-height: 120px; background-size: 80px 80px; text-align: center; }
  body main aside #contas { grid-template-rows: auto; }
  body main aside #jogo { height: auto; }
  body main aside #jogo #img { min-height: 220px; }
  body main .conta { font-size: 20px; }
  body main #conteudo { height: auto; }
  body main #conteudo .prateleira {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  body main #conteudo .prateleira p { width: 100%; }
  body main #conteudo .prateleira img { width: 70%; max-width: 320px; }
  body main #conteudo .prateleira #atualizacoes {
    width: 95%;
    height: auto;
    min-height: 120px;
    padding-bottom: 10px;
  }
}

@media (max-width: 600px) {
  html body main > div #conteudo .prateleira { display: grid; grid-template-columns: repeat(3, 1fr); }
  html body main > div #conteudo .prateleira img { display: none; }
  html body main > div #conteudo .prateleira p { grid-column: span 3; width: 100%; }
}

@media (max-width: 1100px) {
  html body main header {
    font-size: clamp(1.8rem, 6vw, 70px);
    padding-right: 160px; /* image is 150px wide on desktop */
    text-align: center;
  }
}