@font-face{
  font-family:Rubik;
  src:url("assets/rubik.ttf");
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  min-height:100svh;
  background:url("assets/background.png") center/cover no-repeat fixed;
  font-family:Rubik,Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.15);
  z-index:0;
}

.content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1600px;
  padding:30px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo{
  width:clamp(130px,13vw,210px);
  height:auto;
  display:block;
  margin:0 auto clamp(14px,2vw,20px);
}

.coming{
  max-width:100%;
  color:#fff;
  font-size:clamp(38px,6.25vw,100px);
  font-weight:700;
  letter-spacing:clamp(.3px,.08vw,1px);
  line-height:1;
  white-space:nowrap;
  text-shadow:0 10px 0 #402654;
}

.countdown{
  margin:32px auto 0;
  padding:16px 24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  width:max-content;
  background:rgba(36,16,51,.397);
  border-radius:15px;
}

.countdown div{
  min-width:42px;
  text-align:center;
}

.countdown span{
  display:block;
  color:#fff;
  font-size:27px;
  font-weight:700;
  line-height:1;
  text-shadow:0 4px 0 #402654;
}

.countdown small{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.8);
  font-size:9px;
  font-weight:500;
  letter-spacing:.8px;
}

.socials{
  margin-top:24px;
  display:flex;
  justify-content:center;
  gap:14px;
  width:100%;
}

.social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:140px;
  height:45px;
  color:#fff;
  text-decoration:none;
  font-family:Rubik,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  border-radius:9px;
  transition:.15s ease;
}

.social span{
  text-shadow:0 4px 0 #402654;
}

.discord{
  background:linear-gradient(135deg,#5461E3,#4E5C89);
  box-shadow:0 5px 0 #34447C;
}

.discord span{
  text-shadow:0 3px 0 #34447C;
}

.x{
  background:linear-gradient(135deg,#05A8F3,#4D5D89);
  box-shadow:0 5px 0 #34447C;
}

.x span{
  text-shadow:0 3px 0 #34447C;
}

.social img{
  width:21px;
  height:21px;
  object-fit:contain;
  filter:drop-shadow(0 3px 0 #34447C);
}

.social:hover{
  transform:translateY(-2px);
}

.social:active{
  transform:translateY(4px);
}

.discord:active,
.x:active{
  box-shadow:0 1px 0 #34447C;
}


/* TABLET */
@media(max-width:800px){
  .content{
    padding:25px 16px;
  }

  .coming{
    font-size:clamp(34px,8vw,64px);
  }

  .countdown{
    gap:18px;
  }

  .social{
    width:150px;
  }
}


/* HANDY */
@media(max-width:600px){
  body{
    background-attachment:scroll;
  }

  .content{
    padding:20px 12px;
  }

  .logo{
    width:150px;
    margin-bottom:16px;
  }

  .coming{
    font-size:clamp(28px,8.5vw,48px);
    letter-spacing:.3px;
    text-shadow:0 6px 0 #402654;
  }

  .countdown{
    margin-top:25px;
    padding:10px 12px;
    gap:10px;
    border-radius:12px;
  }

  .countdown div{
    min-width:40px;
  }

  .countdown span{
    font-size:23px;
    text-shadow:0 3px 0 #402654;
  }

  .countdown small{
    margin-top:6px;
    font-size:8px;
    letter-spacing:.7px;
  }

  .socials{
    margin-top:20px;
    gap:10px;
  }

  .social{
    width:calc(50% - 5px);
    max-width:160px;
    height:48px;
    gap:9px;
    font-size:14px;
    border-radius:11px;
  }

  .social img{
    width:19px;
    height:19px;
  }
}


/* VERY SMALL PHONES */
@media(max-width:380px){
  .content{
    padding:16px 8px;
  }

  .logo{
    width:125px;
  }

  .coming{
    font-size:27px;
  }

  .countdown{
    gap:7px;
    padding:9px 8px;
  }

  .countdown div{
    min-width:37px;
  }

  .countdown span{
    font-size:20px;
  }

  .countdown small{
    font-size:7px;
  }

  .social{
    height:45px;
    font-size:13px;
  }

  .social img{
    width:18px;
    height:18px;
  }
}