@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap");
/**
*
* Testing
*
**/
* {
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-family: "Reddit Sans", sans-serif;
}

body {
  height: 100vh;
}

.nav-section {
  display: flex;
  justify-content: space-between;
  height: 20vh;
}
@media (max-width: 449px) {
  .nav-section {
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

@media (max-width: 449px) {
  .logo {
    margin: 0 auto;
    margin-top: 20px;
    height: 100%;
  }
}
.logo-img {
  width: 10vw;
}
@media (min-width: 450px) and (max-width: 768px) {
  .logo-img {
    width: 10vw;
    margin: 4vw;
  }
}
@media (max-width: 449px) {
  .logo-img {
    width: 13vw;
  }
}

.counter {
  margin-top: 2vw;
}
@media (max-width: 449px) {
  .counter {
    margin: 0 auto;
    height: 100%;
  }
}

.times {
  display: flex;
  justify-content: flex-end;
}
.times .number {
  -webkit-text-stroke: 2px #628eb3;
  color: transparent;
  font-size: 3rem;
}
@media (max-width: 1024px) {
  .times .number {
    width: 3.2vw;
  }
}
@media (min-width: 450px) and (max-width: 768px) {
  .times .number {
    font-size: 3em;
    width: 6vw;
    text-align: center;
  }
}
@media (max-width: 449px) {
  .times .number {
    font-size: 2rem;
    width: 6vw;
    text-align: center;
  }
}
.times .margin-right {
  margin-right: 2vw;
}
@media (max-width: 449px) {
  .times .margin-right {
    margin-right: 4vw;
  }
}
.times .margin-left {
  margin-left: 2vw;
}
@media (max-width: 449px) {
  .times .margin-left {
    margin-left: 4vw;
  }
}

.timesTexts {
  font-size: 1rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: #5c2c8f;
  font-family: "Montserrat";
  font-weight: light;
}
@media (max-width: 449px) {
  .timesTexts {
    font-size: 15px;
  }
}
.timesTexts .text {
  width: 4.4vw;
  text-align: center;
}
@media (max-width: 1024px) {
  .timesTexts .text {
    width: 6.4vw;
  }
}
@media (min-width: 450px) and (max-width: 768px) {
  .timesTexts .text {
    width: 12vw;
  }
}
@media (max-width: 449px) {
  .timesTexts .text {
    width: 18vw;
  }
}
.timesTexts .margin {
  margin-right: 2vw;
  margin-left: 2vw;
}
@media (max-width: 449px) {
  .timesTexts .margin {
    margin-right: 1vw;
    margin-left: 1vw;
  }
}

body {
  background: #fefbf6;
}

.coming-soon {
  color: #5c2c8f;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
  width: 100vw;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(222, 222, 222, 0.2);
  box-shadow: 0px 0px 14px rgba(54, 52, 52, 0.2509803922);
  background: rgba(243, 255, 255, 0.2);
  padding: 1rem;
}
@media (max-width: 449px) {
  .coming-soon {
    margin-top: 10vh;
  }
}
.coming-soon .coming {
  margin: 0 auto;
  font-size: 8rem;
  font-family: "Montserrat";
  font-weight: bold;
}
@media (max-width: 449px) {
  .coming-soon .coming {
    font-size: 20vw;
  }
}
@media (min-width: 450px) and (max-width: 768px) {
  .coming-soon .coming {
    font-size: 7rem;
  }
}
.coming-soon .soon {
  margin: 0 auto;
  font-size: 100px;
  font-family: "Montserrat";
  color: #fefbf6;
  z-index: 5555;
  position: relative;
  top: -6vh;
  height: 23vh;
  width: 399px;
}
@media (min-width: 450px) and (max-width: 768px) {
  .coming-soon .soon {
    font-size: 6rem;
  }
}
@media (max-width: 449px) {
  .coming-soon .soon {
    font-size: 17vw;
    width: 100%;
    top: 2vh;
    height: 25vh;
  }
}

.oops {
  font-family: "Montserrat";
  font-weight: light;
  text-align: center;
  font-size: 1rem;
  color: rgb(31, 31, 31);
  margin: 0 auto;
  width: 60%;
  margin-top: -5vh;
  margin-bottom: 1vh;
}
@media (min-width: 450px) and (max-width: 768px) {
  .oops {
    font-size: 1rem;
  }
}
@media (max-width: 449px) {
  .oops {
    margin: 22px;
    font-size: 1rem;
    margin-top: -3.9vh;
  }
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
@media (min-width: 450px) and (max-width: 768px) {
  .icons {
    margin-top: 5vh;
  }
}
.icons .icon {
  margin: 1vw;
  width: 2.5vw;
  height: 2.5vw;
}
@media (max-width: 450px) {
  .icons .icon {
    width: 6.5vw;
    height: 6.5vw;
  }
}
@media (min-width: 450px) and (max-width: 768px) {
  .icons .icon {
    width: 4.5vw;
    height: 4.5vw;
  }
}

.move {
  animation: move ease-in-out 1s infinite;
}

#clock {
  height: 8vh;
  line-height: 7vh;
  overflow: hidden;
  position: relative;
}
@media (max-width: 449px) {
  #clock {
    line-height: 9vh;
  }
}

@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-25vh);
  }
}
.background {
  width: 100vw;
  position: relative;
}

.motion {
  z-index: -1;
  position: absolute;
  top: 0px;
  overflow: hidden;
}

@keyframes motion {
  from {
    top: 0vh;
  }
  to {
    top: -1000vh;
  }
}
.wordCon {
  position: relative;
}
.wordCon::before {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  background-color: #628eb3;
  border-radius: 50%;
  right: 47px;
  top: 52%;
  transition: 1s 0.2s;
  transform: translate(20%, -50%) scale(0);
}
@media (max-width: 768px) {
  .wordCon::before {
    animation: none;
    transition: none;
    display: none;
  }
}
.wordCon .word {
  text-align: center;
  -webkit-text-stroke: 2px #5c2c8f;
  color: transparent;
  background: radial-gradient(circle at center, transparent, transparent -5%, #04aec7 1.2%, #04aec7 66%, transparent 66.2%, transparent 98%);
  position: relative;
  z-index: 10;
  transition: 1s;
  background-position: 100% 100%;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  padding-top: 10px;
  font-weight: 900;
}
.wordCon:hover .word {
  background-position: 292.5% 100%;
  background-size: 84.4% 61%;
}
@media (max-width: 768px) {
  .wordCon:hover .word {
    background-position: inherit;
    background-size: 100%;
  }
}
.wordCon:hover::before {
  transform: translate(20%, -50%) scale(1);
}/*# sourceMappingURL=style.css.map */