.center-icon {
    padding-top: 40px !important;
    width: 30vw;
    height: 30vw;
}

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

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  

.brand{
    text-align: center;
    font-family: 'Major Mono Display', monospace;
    padding-top: 55px;
}

.brand > .main {
    font-size: 50px;
}

.brand > .sub{
    font-size: 30px;
}

.wait-for{
    animation-delay: 2s;
    animation: waitfor .5s forwards;
}

@keyframes waitfor {
    0%{
        opacity: 0;
    }
    1%{
        opacity: 1;
    }
}

.scale-in-hor-center {
	-webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-top-1 {
	-webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.puff-out-center {
	        animation: puff-out-center 1s;
}

.invis{
    display: none;
}

@media only screen and (min-width: 600px) {
    body {
      width: 400px !important;
      margin: 5px;
      position: fixed;
      top: 0;
      height: 97vh;
      outline: 2px solid black;
      border-radius: 5px;
    }
    .center-icon {
        width: 10vw !important;
        height: 10vw !important;
    }
    .text{
        width: 400px !important;
    }
  }

body{
    font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}

.hypnotic {
    width: 56px;
    height: 56px;
    border: 2.2px solid #000000;
    background: conic-gradient(from -90deg at calc(100% - 2.2px) calc(100% - 2.2px),#0000 0 90deg, #000000 0),
           conic-gradient(from -90deg at calc(100% - 2.2px) calc(100% - 2.2px),#0000 0 90deg, #000000 0);
    background-size: 17.9px 17.9px;
    background-position: 0 0;
    animation: hypnotic-p6wowimd 1s infinite;
 }
 
 @keyframes hypnotic-p6wowimd {
    100% {
       background-position: -17.9px -17.9px,17.9px 17.9px;
    }
 }

.text{
    width: 85vw;
    border: 1px black solid;
    border-radius: 5px;
    font-family: "Comic Sans MS";
    height: 20vh;
}

.bt{
    position: fixed;
    bottom: 0;
    margin-bottom: 24px;
}

@-webkit-keyframes puff-out-center {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes puff-out-center {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  


 @-webkit-keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }
  

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

.cta{
    position: fixed;
    bottom: 0;
    margin-bottom: 55px;
    padding: 25px;
    padding-left: 65px;
    padding-right: 65px;
    border-radius: 50px;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: black;
    color: white;
}