@font-face {
  font-family: 'regular';
  src: url("../fonts/Nanami.eot");
  src: url("../fonts/Nanami.svg");
  src: url("f../onts/Nanami.ttf");
  src: url("../fonts/Nanami.woff");
  src: url("../fonts/Nanami.woff2");
}

@font-face {
  font-family: 'book';
  src: url("../fonts/Nanami-Book.eot");
  src: url("../fonts/Nanami-Book.svg");
  src: url("../fonts/Nanami-Book.ttf");
  src: url("../fonts/Nanami-Book.woff");
  src: url("../fonts/Nanami-Book.woff2");
}

@font-face {
  font-family: 'light';
  src: url("../fonts/Nanami-Light.eot");
  src: url("../fonts/Nanami-Light.svg");
  src: url("../fonts/Nanami-Light.ttf");
  src: url("../fonts/Nanami-Light.woff");
  src: url("../fonts/Nanami-Light.woff2");
}

@font-face {
  font-family: 'thin';
  src: url("../fonts/Nanami-Thin.eot");
  src: url("../fonts/Nanami-Thin.svg");
  src: url("../fonts/Nanami-Thin.ttf");
  src: url("../fonts/Nanami-Thin.woff");
  src: url("../fonts/Nanami-Thin.woff2");
}

@font-face {
  font-family: 'outline';
  src: url("../fonts/NanamiOutline.eot");
  src: url("../fonts/NanamiOutline.svg");
  src: url("../fonts/NanamiOutline.ttf");
  src: url("../fonts/NanamiOutline.woff");
  src: url("../fonts/NanamiOutline.woff2");
}

/**
*
* Testing
*
**/
:root {
  --size: 10px;
}

* {
  overflow: hidden;
}

.cursor {
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
  position: absolute;
  z-index: 1000;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  mix-blend-mode: difference;
}

@media (max-width: 768px) {
  .cursor {
    display: none;
  }
}

.cursor.cursor-follower {
  background: #322BFF;
  -webkit-transition: top .25s, left .25s,
 width .5s, height .5s;
  transition: top .25s, left .25s,
 width .5s, height .5s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.cursor-follower.focus {
  width: 100px;
  height: 100px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-family: 'regular';
}

.nav-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 20vh;
}

@media (max-width: 449px) {
  .nav-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
  }
}

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

.logo-img {
  width: 5vw;
  margin: 2vw;
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.times .number {
  -webkit-text-stroke: 2px #f2d129;
  color: transparent;
  font-size: 3rem;
  width: 2.2vw;
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: #134074;
  font-family: '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;
  }
}

.coming-soon {
  color: #134074;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: baseline;
      -ms-flex-pack: baseline;
          justify-content: baseline;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100vw;
}

@media (max-width: 449px) {
  .coming-soon {
    margin-top: 10vh;
  }
}

.coming-soon .coming {
  margin: 0 auto;
  font-size: 10rem;
  font-family: 'regular';
}

@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: 'outline';
  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: 'light';
  text-align: center;
  font-size: 1.5em;
  color: #134074;
  margin-top: -4vh;
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: 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 {
  -webkit-animation: move ease-in-out 1s infinite;
          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;
  }
}

@-webkit-keyframes move {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-25vh);
            transform: translateY(-25vh);
  }
}

@keyframes move {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-25vh);
            transform: translateY(-25vh);
  }
}

.background {
  width: 100vw;
  position: relative;
}

.motion {
  -webkit-animation: motion 100s infinite;
          animation: motion 100s infinite;
  z-index: -1;
  position: absolute;
  top: 100px;
  overflow: hidden;
}

@-webkit-keyframes motion {
  from {
    top: 100vh;
  }
  to {
    top: -1000vh;
  }
}

@keyframes motion {
  from {
    top: 100vh;
  }
  to {
    top: -1000vh;
  }
}

.wordCon {
  position: relative;
}

.wordCon::before {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  background-color: #f2d129;
  border-radius: 50%;
  right: 47px;
  top: 52%;
  -webkit-transition: 1s 0.2s;
  transition: 1s 0.2s;
  -webkit-transform: translate(20%, -50%) scale(0);
          transform: translate(20%, -50%) scale(0);
}

@media (max-width: 768px) {
  .wordCon::before {
    -webkit-animation: none;
            animation: none;
    -webkit-transition: none;
    transition: none;
    display: none;
  }
}

.wordCon .word {
  text-align: center;
  -webkit-text-stroke: 2px #134074;
  color: transparent;
  background: radial-gradient(circle at center, transparent, transparent -5%, #134074 1.2%, #134074 66%, transparent 66.2%, transparent 98%);
  position: relative;
  z-index: 10;
  -webkit-transition: 1s;
  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;
}

.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 {
  -webkit-transform: translate(20%, -50%) scale(1);
          transform: translate(20%, -50%) scale(1);
}
/*# sourceMappingURL=style.css.map */