@import url("https://fonts.googleapis.com/css2?family=Vibur&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vampiro+One&family=Vibur&display=swap");
* {
  /* border: 1px yellow dotted;
   margin: 3px;*/
}

html {
  background-color: rgb(6, 25, 52);
}

body {
  max-width: 1024px;
  margin: auto;
  font-family: "Vibur", cursive;
  font-family: "Great Vibes", cursive;
  font-size: 1.5rem;
  /*       background-image: url(./img/physics-background.jpg);*/
  background-size: 70vw;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  /* font-family: canada-type-gibson, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;*/
  overflow: hidden;
}
body h2 {
  margin-top: 10vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /*
    --color-primary: #f5f6a2;
    --color-secondary: #daf06a;
    --color-tertiary: #a9e31b;
    --color-quaternary: #d5f27d;
    --color-quinary: #d9dd08;

  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;

  --color-primary: #5192ED;
  --color-secondary: #69A1F0;
  --color-tertiary: #7EAEF2;
  --color-quaternary: #90BAF5;
  --color-quinary: #A2C4F5;
  */
}

.content {
  padding-top: 2vh;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.glow {
  font-size: 10rem;
  text-align: center;
  line-height: 1;
  color: #c6e2ff;
  -webkit-animation: neon 0.08s ease-in-out infinite alternate;
          animation: neon 0.08s ease-in-out infinite alternate;
  text-shadow: 0 0 2px rgba(202, 228, 225, 0.92), 0 0 10px rgba(202, 228, 225, 0.34), 0 0 4px rgba(30, 132, 242, 0.52), 0 0 7px rgba(30, 132, 242, 0.92), 0 0 11px rgba(30, 132, 242, 0.78), 0 0 16px rgba(30, 132, 242, 0.92);
}

/*-- Animation Keyframes --*/
/* animation*/
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px rgb(30, 132, 242);
  }
}
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px rgb(30, 132, 242);
  }
}
.bottom-sign {
  color: gray;
  position: fixed;
  bottom: -10px;
  left: 10px;
}

.image {
  border-radius: 50%;
  /*   position: RE;
  top: 40vh;
  left: 25vw;*/
  width: 70vw;
  height: 70vw;
  max-width: 800px;
  max-height: 800px;
  margin: 2vh 5vw;
  -webkit-animation: spin 64s linear infinite;
  animation: spin 64s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.bg {
  display: block;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  /*top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;*/
  height: 50vh;
  text-align: center;
}

.contentBoxes {
  font-family: Vampiro One;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.container2 {
  display: flex;
  justify-content: center;
}

.box {
  width: 50px;
  height: 50px;
  color: #00136c;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease-in-out;
}

.box:first-child {
  background-color: #3DDAD8;
  -webkit-animation: loader 2s infinite;
          animation: loader 2s infinite;
}

.box:nth-child(2) {
  background-color: #2A93D5;
  -webkit-animation: loader 3s infinite;
          animation: loader 3s infinite;
}

.box:nth-child(3) {
  background-color: #3DDAD8;
  -webkit-animation: loader 4s infinite;
          animation: loader 4s infinite;
}

.box:nth-child(4) {
  background-color: #2A93D5;
  -webkit-animation: loader 5s infinite;
          animation: loader 5s infinite;
}

.box:last-child {
  background-color: rgb(0, 208, 255);
  -webkit-animation: loader 6s infinite;
          animation: loader 6s infinite;
}

@-webkit-keyframes loader {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: y 90deg;
    scale: 0.5;
  }
  50% {
    rotate: 180deg;
  }
  75% {
    rotate: x 270deg;
    border-radius: 50%;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes loader {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: y 90deg;
    scale: 0.5;
  }
  50% {
    rotate: 180deg;
  }
  75% {
    rotate: x 270deg;
    border-radius: 50%;
  }
  100% {
    rotate: 360deg;
  }
}
@supports not (rotate: 0deg) {
  @-webkit-keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: scale(0.5) rotateY(90deg);
    }
    50% {
      transfrom: rotate(180deg);
    }
    75% {
      transform: rotateX(270deg);
      border-radius: 50%;
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: scale(0.5) rotateY(90deg);
    }
    50% {
      transfrom: rotate(180deg);
    }
    75% {
      transform: rotateX(270deg);
      border-radius: 50%;
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
@media only screen and (orientation: landscape) {
  body h2 {
    font-size: 10vh !important;
  }
  body .image {
    width: 40vh !important;
    height: 40vh !important;
  }
}
@media only screen and (orientation: portrait) {
  body h2 {
    font-size: 7vh !important;
  }
  body .image {
    width: 40vh !important;
    height: 40vh !important;
  }
}/*# sourceMappingURL=soon.css.map */