@import url(reset.css);

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}

body {
   background-color: white;
   font-family: "Inter", sans-serif;
   text-rendering: geometricPrecision;
}

.site__content {
   min-height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   padding: 1rem;
   gap: 1rem;
   text-align: center;
   position: relative;
   overflow: hidden;
   z-index: 1;

   &::before,
   &::after {
      content: "";
      background-image: url(assets/side.svg);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: right center;
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
   }

   &::before {
      left: 0;
      transform: rotateY(180deg);

      @media (max-width: 700px) {
         width: 100%;
         left: -50%;
      }
   }

   &::after {
      right: 0;
      background-position: right center;

      @media (max-width: 700px) {
         width: 100%;
         right: -50%;
      }
   }

   .logo {
      width: 6.25rem;
      height: 6.25rem;
      margin-bottom: 0.5rem;
   }

   .tag {
      color: rgba(68, 70, 75, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      border: 1px solid #EAE7E4;
      border-radius: 2rem;
      margin-bottom: 0.5rem;
   }

   h1 {
      font-size: clamp(1.5rem, 10vw, 4rem);
      line-height: 1.1;
      font-weight: 600;
      letter-spacing: -0.005em;
      max-width: 37rem;

      span {
         color: #FF6E00;
      }
   }

   p {
      color: rgba(0,0,0,0.7);
      font-size: 1.125rem;
      line-height: 1.4;
      letter-spacing: -0.002em;
      max-width: 22rem;
      margin-bottom: 1rem;
   }

   .social {
      display: flex;
      gap: 2rem;

      a {
         background-color: #FF6E00;
         background-image: linear-gradient(to bottom, #FF8B33, #FF6E00);
         border: 1px solid #F46F0B;
         box-shadow: inset 0 1px #FFA76A, 0 1px 3px -1px #A84D09;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 3rem;
         height: 3rem;
         border-radius: .375rem;

         img {
            width: 2rem;
            height: 2rem;
         }
      }
   }
}