:root {
  --Scale: 1;
}

@font-face{
  font-family: 'HurmitNF';
  src: url('../../res/ui/HurmitNerdFontMono-Regular.ttf') format('truetype');
}

body{
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  font-family: 'HurmitNF';
}

#greeter{
  background-color: var(--Purr);
  display: block;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: url("/res/ui/paws.svg");
}

.tv{
  background-color: var(--Purr);
  display: block;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vancedTV{
  background-color: var(--backdark);
  display: block;
  height: 100vh;
  width: 100vw;
}

@keyframes showVanced {
  0% {opactiy: 0%;}
  100% {opacity: 100%;}
}

@keyframes becomePurr{
  0% {background-color: var(--backdark); opacity: 1;}
  100% {background-color: var(--PurrDurr); opacity: 1;}
}

.stayTuned{
  color: var(--Purr);
  font-size: 60px;
  position: absolute;
  width: fit-content;
  top: 50%;
  left:50%;
  opacity: 0%;
  transform: translate(-50%, -50%);
}

.phone-only-tb{
  background-color: var(--backdarker);
  position: absolute;
  top: calc(80px + 14vw);
  left: 50%;
  transform: translate(-50%, 0%);
  width: 310px;
  max-height: 120px;
  overflow: hidden;
  border-radius: 20px;
  display: none;
  transition: 0.4s;
  border-bottom: 10px solid var(--PurrDurrX);
}

.phone-track{
  scale: 0.6;
  position: relative;
  bottom: 24px;
  left: -400px;
  animation: phoneTracking 1s linear infinite;
}

@keyframes phoneTracking {
  0%{transform: translate(0px, 0px);}
  100%{transform: translate(64px);}
}

@keyframes showUC {
  0% {opacity: 0%;}
  100% {opacity: 100%;}
}

.track{
  position: absolute;
  top: calc(100px * var(--Scale));
  left: -500px;
  rotate: -35deg;
  transform: scale(var(--Scale));
  scale: var(--Scale);
  transition: 0.4s;
}

.track-anim{
  animation: tracking 800ms linear infinite;
}

.notification{
  background-color: var(--background);
  color: var(--Purr);
  padding: 15px;
  position: absolute;
  right: 20px;
  bottom: 500px;
  border-radius: 8px;
  scale: 0;
  border: 2px solid var(--Purr);
  animation: bobberKurwa 200ms linear forwards;
}

.notification:nth-child(5){
  bottom: 20px;
}

.notification:nth-child(6){
  bottom: 80px;
}

.notification:nth-child(7){
  bottom: 140px;
}

.notification:nth-child(8){
  bottom: 200px;
}

.notification:nth-child(9){
  bottom: 260px;
}

.notification:nth-child(10){
  bottom: 320px;
}

.notification:nth-child(11){
  bottom: 380px;
}

.notification:nth-child(12){
  bottom: 440px;
}

@keyframes bobberKurwa {
  0% {scale: 0;}
  70% {scale: 1;}
  80% {scale: 1.1;}
  100% {scale: 1;}
}

@keyframes tracking {
  0%{transform: translate(0px, 0px);}
  100%{transform: translate(64px);}
}

.welcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: 0.4s;
}

.nm{
  font-size: 60px;
  font-weight: bold;
}

.desc{
  font-size: 20px;
}

.ls{
  background-color: var(--background);
  color: var(--Purr);
  margin-top: 30px;
  border-radius: 20px;
  font-size: 22px;
  display: block;
  height: 92px;
  width: 300px;
}

#lst {
  padding: 30px 20px;
}

.s{
  position: absolute;
  bottom: 0px;
  color: var(--Purr);
  background-color: var(--background);
  transform: translate(-50%);
  padding: 24px 40px;
  font-size: 30px;
  transition: 0.2s;
  cursor: pointer;
}

.s:hover{
  font-size: 40px;
  transition: 0.2s;
  padding: 17px 40px;
  font-weight: bold;
}

@keyframes perdoleBidle {
  0% {font-size: 80px; top: 0px; position: relative;}
  30% {top: -14px;}
  70% {top: 6px;}
  90% {top: 0px;}
  100% {font-size: 80px; top: 0px; position: relative;}
}

.dock{
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--background);
  color: var(--Purr);
  text-decoration: none;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
}

.links{
  width: 600px;
  font-size: 60px;
  text-align: center;
  color: var(--Purr);
  text-decoration: none;
  cursor: default;
}

.links a{

  color: var(--Purr);
  text-decoration: none;
  transition: 0.2s;
}

.links a:hover{
  font-size: 80px;
  transition: 0.2s;
}

.clock{
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 50px;
  background-color: var(--background);
  color: var(--Purr);
  border-radius: 40px;
  transition: 0.4s;
}

.time{
  padding: 30px 50px;
}

.paw{
  position: absolute;
  scale: 0.6;
  top: -100px;
  left: -40px;
  animation: bounce 0.8s linear infinite;
}

.sbox{
  position: absolute;
  scale: 0.6;
  height: 80px;
  width: 80px;
  top: -64px;
  right: 64px;
}

.shimmer{
  position: relative;
  top: 0px;
  left: 0px;
  animation: swirl 1.2s linear infinite;
}

.shine{
  position: relative;
  top: -70px;
  left: 80px;
  scale: 0.6;
  animation: swirl 1.4s linear infinite;
  animation-delay: 200ms;
}

.progress{
  height: 20px;
  display: block;
  background-color: var(--Purr);
  position: relative;
  bottom: 86px;
  left: 5px;
  width: 10px;
  transition: 0.2s;
  border-radius: 10px;
}

.pprobe{
  position: absolute;
  top: 60px;
  left: 50px;
  height: calc(300px * var(--Scale));
  width: calc(300px * var(--Scale));
  border-radius: 50%;
  filter: blur(20px);
  scale: 0;
  opacity: 0%;
  background-color: var(--shinePProbe);
  animation: pprobein 1000ms linear forwards;
  animation-delay: 500ms;
}

.pprobe_s{
  position: absolute;
  top: 60px;
  left: 50px;
  height: calc(150px * var(--Scale));
  width: calc(150px * var(--Scale));
  border-radius: 50%;
  filter: blur(20px);
  scale: 0;
  opacity: 0%;
  background-color: var(--shinePProbe);
  animation: pprobeins 1000ms linear forwards;
  animation-delay: 500ms;
}

.pprobe_f{
  position: absolute;
  top: 60px;
  left: 50px;
  height: calc(120px * var(--Scale));
  width: calc(120px * var(--Scale));
  border-radius: 50%;
  filter: blur(20px);
  scale: 0;
  opacity: 0%;
  background-color: var(--shinePProbe);
  animation: pprobeinf 1100ms linear forwards;
  animation-delay: 400ms;
}

.phone-only-sb{
  display: none;
}

.splasher{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  transform: translate(-50%, -50%);
  animation: splashing 4s linear forwards;
}

@keyframes splashing{
  0% {opacity: 0;}
  20% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes swirl {
  0% {rotate: 0deg;}
  10% {rotate: -10deg;}
  20% {rotate: -10deg;}
  50% {rotate: 90deg;}
  60% {rotate: 110deg;}
  70% {rotate: 90deg;}
  100% {rotate: 90deg;}
}

@keyframes bounce {
  0% {scale: 0.6;}
  5% {scale: 0.5;}
  22.5% {scale: 0.74;}
  40% {scale: 0.55;}
  45% {scale: 0.6;}
  100% {scale: 0.6;}
}

@keyframes phase0 {
  0% {opacity: 100%; height: 100vh; width: 100vw;}
  30% {height: 100vh; width: 100vw; opacity: 30%;}
  100% {opacity: 0%; height: 30vh; width: 30vw;}
}

@keyframes phase1 {
  0% {opacity: 100%;}
  100% {opacity: 0%;}
}

@keyframes phase2 {
  0% {height: 92px; width: 300px;}
  15% {height: 100px; width: 300px;}
  50% {height: 100px; width: 300px;}
  70% {height: 30px; width: 300px;}
  85% {height: 30px; width: 380px;}
  100% {height: 30px; width: 360px;}
}

@keyframes phase3 {
  0% {height: 100vh; background-color: var(--Purr);}
  80% {height: 40px; background-color: white;}
  100% {height: 0px; background-color: white;}
}

@media only screen and (max-width: 600px) {
  .track{
    display: none;
  }

  .welcome{
    scale: 0.8;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-62%, -40%);
    padding: 40px;
    padding-bottom: 50px;
    border-radius: 30px;
    background-color: var(--backdarker);
    color: var(--PurrDurr);
    border-bottom: 14px solid var(--PurrDurrX);
  }

  .nm{
    color: var(--Purr);
  }

  .ls{
    background-color: var(--Purr);
    color: var(--backdark);
  }

  .s{
    color: var(--backdark);
    background-color: var(--Purr);
    bottom: 50px;
  }

  .links{
    position: absolute;
    top: -9px;
    right: -145px;
  }

  .links a{
    font-size: 35px;
  }

  .links a:hover{
    position: relative;
    bottom: -6px;
    font-size: 60px;
  }

  .clock{
    position: absolute;
    width: 100%;
    height: 80px;
    top: 0px;
    left: 0px;
    border-radius: 0px;
    font-size: 26px;
    align-content: center;
    background-color: var(--backdarker);
  }

  .time{
    padding: 40px 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 20px;
  }

  .progress{
    background-color: var(--backdarker);
  }

  .phone-only-sb{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 35px 40px;
    display: block;
  }

  .paw{
    display: none;
  }

  .sbox{
    display: none;
  }

  .phone-only-tb{
    display: block;
  }

  .dock{
    position: absolute;
    top: calc(100vh - 130px);
    left: 50vw;
    border-radius: 40px;
    height: 80px;
    width: 310px;
    background-color: var(--backdarker);
    border-bottom: 10px solid var(--PurrDurrX);
  }
}

@media only screen and (max-height: 750px) {
  .track{
    display: none;
  }

  .welcome{
    scale: 0.8;
    position: absolute;
    top: 30vh;
    left: 50vw;
    transform: translate(-62%, -20%);
  }

  .links{
    position: absolute;
    top: 4px;
    right: -130px;
    font-size: 50px;
  }

  .links a:hover{
    font-size: 50px;
  }

  .links a:active{
    animation: none;
    font-size: 50px;
  }

  .clock{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 100vw;
    border-radius: 0px;
  }

  .time{
    position: relative;
    font-size: 16px;
    left: 50vw;
    top: -20px;
    transform: translate(-80px, 0%);
  }

  .time{
    padding: 30px 50px;
    position: relative;  }

  .dock{
    position: absolute;
    bottom: 20px;
    left: 50vw;
    height: 80px;
    width: 340px;
    border-radius: 30px;
    background-color: var(--backdark);
  }

  .paw{
    display: none;
  }

  .sbox{
    display: none;
  }

  .phone-only-tb{
    display: none;
  }
}