body {
  background-color: #000711;
}
@font-face {
  font-family: "Main";
  src: url("../fonts/Bounded-Variable.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Main2";
  src: url("../fonts/Bounded-Variable.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Main3";
  src: url("../fonts/Bounded-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "date";
  src: url("../fonts/HelloZone.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.logo
{
  position: absolute;
  display: inline-block;
}
.logoText
{
  font-family: "Main";
  white-space: nowrap;
}
.color1
{
  background: linear-gradient(to bottom, #0045AC 0%, #0063F8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.color2
{
  background: linear-gradient(to bottom left, #002761 0%, #0063F8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mini
{
  position: absolute;
  font-family: "Main2";
  background: linear-gradient(to bottom, #0045AC 0%, #0063F8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text2
{
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: "Main";
  white-space: nowrap;
  color: #BFD8FF;
}
.date
{
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: "date";
  white-space: nowrap;
  color: #BFD8FF;
}
.backtime
{
  position: relative;
  background: linear-gradient(to bottom, #BFD8FF 0%, #3E5C8B 100%);
  border-radius: 1000px;
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.timer
{
  color: #000711;
  font-family: "Main";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.vhod
{
  position: absolute;
  display: inline-block;
}
.glass
{
  background-color: #ffffff08;
  box-shadow: inset 0px 0px 4.8px -10px #ffffff0d, inset 0px 2px 0px #ffffff26;
  backdrop-filter: blur(5.8px) brightness(100%);
  -webkit-backdrop-filter: blur(5.8px) brightness(100%);
}
.tg
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.svet1
{
  background-color: #0098d8;
  filter: blur(55px);
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.visual
{
  position: absolute;
  z-index: -1;
  animation: levitate 7s ease-in-out infinite;
}
@keyframes levitate 
{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1.5vh); }
  100% { transform: translateY(0); }
}
.svet2
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #99c4ff;
  border-radius: 22px/36px;
  filter: blur(87.2px);
}
.visual2
{
  position: absolute;
  z-index: -1;
  animation: levitate 7s ease-in-out 2s infinite;
}
.svet3
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #99c4ff;
  border-radius: 22px/36px;
  filter: blur(87.2px);
}
.btn
{
  all: unset;
  background-color: #0098D8;
  border-radius: 1000px;
  color: white;
  font-family: "Main3";
  transition: 
      background-color .3s ease,
      color .3s ease,
      transform .25s ease;
}
.btn:hover 
{
  background-color: white; 
  color: black;
  transform: scale(1.07);         
}
.button
{
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
}
.btn:hover ~ .svet4 
{
  background-color: white;
}
.svet4
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0098D8;
  border-radius: 22px/36px;
  filter: blur(87.2px);
  transition: background-color .3s ease;
  z-index: -10;
}
@media (orientation: landscape) 
{
  .logo
  {
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .logoText 
  { 
    font-size: 3vw; 
  }
  .mini
  {
    font-size: 2vw;
    right: -1.5vw;
    top: clamp(2.3vw, 1.7vw, 1.7vw);
  }
  .text2
  {
    font-size: 2.5vw;
  }
  .date
  {
    font-size: 3vw;
    margin-top: 1vh;
  }
  .backtime
  {
    width: 12vw;
    height: clamp(1vw, 2.4vw, 5vw);
    margin-bottom: 0.5vw;
  }
  .timer
  {
    font-size: 1vw;
  }
  .vhod
  {
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .glass
  {
    width: 15vw;
    height: 15vw;
    border-radius: clamp(1vw, 2.4vw, 5vw);
  }
  .tg
  {
    width: 11vw;
    height: 11vw;
  }
  .svet1
  {
    width: 6vw;
    height: 6vw;
  }
  .visual
  {
    top: -3vw;
    right: -3vw;
  }
  .eth
  {
    width: 5vw;
    height: auto;
  }
  .svet2
  {
    width: 2.5vw;
    height: 2.5vw;
  }
  .visual2
  {
    top: 11vw;
    left: -3vw;
  }
  .btc
  {
    width: 5.5vw;
    height: auto;
  }
  .svet3
  {
    width: 2.5vw;
    height: 2.5vw;
  }
  .btn
  {
    width: 8vw;
    height: 2.5vw;
    margin-top: 1vw;
  }
  .button
  {
    font-size: 1.6vw;
  }
  .button span 
  {
    position: relative;
    top: -2px;
  }
  .svet4
  {
    width: 6vw;
    height: 2vw;
    top: 17.3vw;
    z-index: -1;
  }
}
@media (orientation: portrait) 
{
  .logo
  {
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
  }
  .logoText 
  { 
    font-size: 8vw; 
  }
  .mini
  {
    font-size: 5vw;
    right: -4vw;
    top: clamp(5.7vw, 5vw, 5vw);
  }
  .text2
  {
    font-size: 7vw;
  }
  .date
  {
    font-size: 8vw;
    margin-top: 1vh;
  }
  .backtime
  {
    width: 30vw;
    height: clamp(3vw, 6vw, 10vw);
    margin-bottom: 1vw;
  }
  .timer
  {
    font-size: 2.3vw;
  }
  .vhod
  {
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
  }
  .glass
  {
    width: 25vh;
    height: 25vh;
    border-radius: clamp(3vh, 4vh, 5vh);
  }
  .tg
  {
    width: 18vh;
    height: 18vh;
  }
  .svet1
  {
    width: 9vh;
    height: 9vh;
  }
  .visual
  {
    top: -5vh;
    right: -4vh;
  }
  .eth
  {
    width: 8vh;
    height: auto;
  }
  .svet2
  {
    width: 5vh;
    height: 5vh;
  }
  .visual2
  {
    top: 20vh;
    left: -4vh;
  }
  .btc
  {
    width: 8vh;
    height: auto;
  }
  .svet3
  {
    width: 5vh;
    height: 5vh;
  }
  .btn
  {
    margin-top: 2vh;
    width: 12vh;
    height: 4vh;
  }
  .button
  {
    font-size: 2vh;
  }
  .button span 
  {
    position: relative;
    top: -1px;
  }
  .svet4
  {
    width: 10vh;
    height: 3vh;
    top: 29vh;
    z-index: -1;
  }
}