html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0;
  -moz-osx-font-smoothing: grayscale;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  scroll-behavior: smooth;
 }




  body {
    font-size: 100%;
    font-family: Inter, sans-serif;
    background: #0b24fb;
    text-transform: lowercase;
  }
  .wrapper {
    transition: background .5s ease;
  }

  .rollover {
    display: block;
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    width: calc(100% + 0px);
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%; }
  .section {
    height: 100vh;
    display:flex;
    padding-left: 10%;
    padding-right: 10%;
    align-items: center;
  }

  .short {
    max-height: (300px);
  }

  .title {
    font-weight: 100;
    font-size: 4vw;

    a {
      color: inherit;
    }
  }

h1 {
      font-size: 165px;
      line-height: 144px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom:0px;
      margin-left:-8px;
      margin-top:-60px;
}


@media (min-width: 320px) and (max-width: 480px) {

  h1 {
        font-size: 13.25vw !important;
        line-height: 70px !important;
  }

  h2, #stat-content {
        font-size: 4vw !important;
  }

  p {
        font-size: 4vw !important;
  }

}

#toppest {
  margin-top:30px;
}

#toppest h1 {
  -webkit-animation: bounce-in-top 0.7s both;
  animation: bounce-in-top 0.7s both;
}

#toppest h2 {
  -webkit-animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

h2,  #stat-content {
   font-size: 30px;
  /* font-size: 2.25vw; */
  line-height: 1.25em;
  font-weight: 700;
}

p {
  font-size: 30px;
  /* font-size: 2.25vw; */
  line-height: 1.25em;
  font-weight: 400;
}


a {
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  display: inline-block;
  position: relative;
}

span.coverlink {
  /* text-decoration: underline;
  text-decoration-color: #0b24fb; */
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  display: inline-block;
  position: relative;
}

span.coverlink:hover {
  text-decoration: none;
  -webkit-animation: rumble .0625s infinite linear;
  animation: rumble .0625s infinite linear;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  -webkit-animation: rumble .0625s infinite linear;
  animation: rumble .0625s infinite linear;
}

.light a {
  color:#fff;
  text-decoration-color: #fc0;
}

.dark a {
  color:#000;
    text-decoration-color: #0b24fb;
}

.inner {
  width:100%;
}

.section.light .inner {
  flex-direction: column;
}

.drippy {
  align-self: flex-start;
  float:right;
  width: 45px;
  margin-top: -140px;
  -webkit-animation: open_eye 0.2s ease-in 0s forwards;
  animation: open_eye 0.2s ease-in 0s forwards;
}


.drippy:hover {
  cursor: url("../img/xd.svg") 25 25, pointer;
  cursor: url("../img/xd.png") 25 25, pointer;
  -webkit-animation: rumble .0625s infinite linear;
  animation: rumble .0625s infinite linear;


}

.drippy img:hover {
  -webkit-animation: close_eye 0.2s ease-out 0s forwards;
  animation: close_eye 0.2s ease-out 0s forwards;
}

#wat {
  transform: rotate(-90deg);
  margin: 5px 20px 0 5px; }


#foot img {
  margin-right: 30px;
  width: 30px;
}

#name {

}


.dot1 {
  		animation: wave 1.3s linear infinite;
    	display:inline-block;
}

.dot2 {
  		animation: wave 1.3s linear infinite;
    	display:inline-block;
      animation-delay: -1.1s;
}
.dot3 {
  		animation: wave 1.3s linear infinite;
    	display:inline-block;
      animation-delay: -0.9s;
}

.hellodot {
        display:inline-block;
        -webkit-animation: bounce-in-top 0.7s both;
        animation: bounce-in-top 0.7s both;
        animation-delay: 0.5s;
}


.clock {
display:inline-block;
}

.clockblink {
	-webkit-animation: blink-2 0.9s infinite both;
	        animation: blink-2 0.9s infinite both;
}


a.notalink {
  cursor: inherit;
}


/*********************
Y E E T
*********************/

@-webkit-keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}



@keyframes wave {
	0%, 60%, 100% {
		transform: initial;
	}

	30% {
		transform: translateY(-15px);
	}
}


@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



@-webkit-keyframes rumble {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg) scale(1); }

  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg) scale(1.05); }

  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg) scale(1.05); }

  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg) scale(1.05); }

  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg) scale(1.05); }

  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg) scale(1.05); }

  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg) scale(1.05); }

  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg) scale(1.05); }

  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg) scale(1.05); }

  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg) scale(1.05); }

  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg) scale(1.05); } }

@keyframes rumble {
  0% {
    transform: translate(2px, 1px) rotate(0deg) scale(1); }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg) scale(1.05); }

  20% {
    transform: translate(-3px, 0px) rotate(1deg) scale(1.05); }

  30% {
    transform: translate(0px, 2px) rotate(0deg) scale(1.05); }

  40% {
    transform: translate(1px, -1px) rotate(1deg) scale(1.05); }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg) scale(1.05); }

  60% {
    transform: translate(-3px, 1px) rotate(0deg) scale(1.05); }

  70% {
    transform: translate(2px, 1px) rotate(-1deg) scale(1.05); }

  80% {
    transform: translate(-1px, -1px) rotate(1deg) scale(1.05); }

  90% {
    transform: translate(2px, 2px) rotate(0deg) scale(1.05); }

  100% {
    transform: translate(1px, -2px) rotate(-1deg) scale(1.05); } }


    @keyframes open_eye {
      0% {
        transform: scaleY(0); }

      50% {
        transform: scaleY(1.3); }

      100% {
        transform: scaleY(1); } }

    @-webkit-keyframes open_eye {
      0% {
        transform: scaleY(0); }

      50% {
        transform: scaleY(1.3); }

      100% {
        transform: scaleY(1); } }

    @keyframes close_eye {
      0% {
        transform: scaleY(1); }

      50% {
        transform: scaleY(1.3); }

      100% {
        transform: scaleY(0); } }

    @-webkit-keyframes close_eye {
      0% {
        transform: scaleY(1); }

      50% {
        transform: scaleY(1.3); }

      100% {
        transform: scaleY(0); } }




        .overlay {
          height: 0%;
          width: 100%;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #fff;
          overflow-y: hidden;
          transition: 0.3s;
        }

        .overlay-content {
          position: relative;
          top: 25%;
          width: 100%;
          text-align: center;
          margin-top: 30px;
        }

        .overlay a {
          padding: 8px;
          text-decoration: none;
          font-size: 36px;
          color: #0b24fb;
          display: block;
          transition: 0.3s;
        }

        .overlay a:hover, .overlay a:focus {
          color: #0b24fb;
        }

        .overlay .closebtn {
          position: absolute;
          top: 20px;
          right: 45px;
          font-size: 60px;
        }

        @media screen and (max-height: 450px) {
          .overlay {overflow-y: auto;}
          .overlay a {font-size: 20px}
          .overlay .closebtn {
          font-size: 40px;
          top: 15px;
          right: 35px;
          }
        }