html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto Light', sans-serif;
  font-weight: 400;
  color: #444;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

@keyframes moveLogo {
  from {
    /* left: 20em; */
    width: 100%;
    margin-top: -8rem;
    /* opacity: 0; */
  }

  to {
    left: 2em;
    margin-top: 0rem;
    width: 10%;
    /* opacity: 1; */
  }
}

header {
  display: grid;
  aspect-ratio: 4 / 1;
  overflow: hidden;

  > nav {
    position: absolute;
    background: rgba(91, 143, 207, 0.826);
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
    z-index: 2;
    backdrop-filter: blur(2.5px);
    /* width: 100%; */
    > a {
      text-shadow: 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, 0.249);
      margin-right: 2rem;

      &:last-child {
        margin-right: 0;
      }

      &:is(:link, :visited) {
        color: white;
        text-decoration: none;
      }

      &:hover {
        color: rgb(232, 255, 174);
      }

      &:active {
        color: hotpink;
      }
    }
  }

  > .logo {
    display: grid;
    place-content: center;

    > svg {
      width: 80%;
    }

    &.follow {
      height: 2em;
      position: fixed;
      top: 2rem;
      left: 2rem;
      z-index: 1;
      width: 10%;
      animation: moveLogo 400ms ease forwards;

      > svg {
        width: 100%;
        cursor: pointer;

        > g {
          fill: black;
        }
      }
    }

    > svg {
      opacity: 0.8;
      justify-self: center;
      align-self: center;

      > g {
        fill: white;

        > path {
          transition: all 250ms linear;

          /* &:hover {
            fill: #0053cc;
        } */
        }
      }
    }
  }

  > canvas {
    opacity: 0;
    transition: all 200ms linear;
    backface-visibility: hidden;
    display: block;

    &.show {
      opacity: 1;
    }
  }
}

main {
  /* background-size: 100%; */
  background-repeat: repeat;
  background-attachment: fixed;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr;
  justify-items: center;

  > article {
    width: 40rem;
    font-size: 1.3rem;
    display: grid;
    justify-items: center;

    > h1 {
      color: rgb(37, 54, 78);
      font-size: 1.8rem;
    }

    > p {
      justify-self: start;
    }

    &:first-child {
      h1 {
        font-family: 'MillerBannerLightItalic', sans-serif;
        font-weight: 400;
        text-align: center;

        > span {
          white-space: nowrap;
        }
      }

      > a.gorillaz {
        width: 100%;
        display: block;

        > img {
          width: 100%;
          display: block;
        }
      }
    }

    &:nth-child(2) {
      display: grid;

      > figure {
        display: grid;
        width: 100%;
        padding: 0;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        margin-left: 0;
        gap: 1rem;

        > img {
          height: auto;
          display: block;
          width: 100%;
        }
      }

      > .coming-soon {
        text-align: center;
        width: 100%;
      }

      > canvas {
        width: 100%;
        transition: all 250ms linear;

        &:hover {
          filter: saturate(2) hue-rotate(210deg);
        }
      }
    }

    &:nth-child(3) {
      display: grid;

      > .rings {
        position: relative;
        border: 1px solid red;
        width: 100%;
        height: 14rem;

        > canvas {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    &:last-child {
      /* background-color: red; */
      display: grid;

      > .services {
        color: rgb(58, 58, 58);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
      }
    }

    /* &:nth-child(4) {
      width: 100%;
      height: 20rem;
    } */
  }
}

footer {
  margin: 0;
  padding: 0;
  display: grid;
  height: 100%;

  a {
    &:last-child {
      margin-right: 0;
    }

    &:is(:link, :visited) {
      color: rgb(55, 0, 255);
      text-decoration: none;
    }

    &:hover {
      color: crimson;
    }

    &:active {
      color: hotpink;
    }
  }

  > section {
    font-size: 0.8rem;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 1fr;
    width: 80%;
    /* position: absolute; */
    z-index: 10;
    background: white;
    justify-self: center;
    text-align: left;
    /* min-height: 15rem; */
    margin-top: 2rem;
    padding: 2rem;
    color: black;
    clip-path: polygon(0% 3rem, 3rem 0%, 100% 0%, 100% 100%, 0% 100%);

    > section {
      width: fit-content;
    }
  }

  > .upside-down {
    position: absolute;
    left: 0;
    width: 100%;

    > canvas {
      width: 100dvw;
      position: absolute;
      scale: 1 -1;
    }
  }
}