*
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}  

.qu
{
    font-weight:200;
    display:inline;
    margin:0;
    padding:0;
    width:fit-content;
    height:fit-content;
    color:#000;
}

html
{
    font-size:6vw;
    width:100vw;
    height:100vh;
    overflow: hidden;
    zoom: reset;
}
.stripes
{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:33vh;
  display:none;
  margin:0;
  padding:0;
  overflow:hidden;
  mix-blend-mode: overlay;
  pointer-events:none;
  background-image: 
  repeating-linear-gradient(
    45deg, 
    transparent, 
    transparent 0.5rem,
    #000 0.5rem,
    #000 1rem
  ), url(data:image/png;base64,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);
  opacity:6%;
  background-size: 200% 200%;
  animation: barberpole 30s linear infinite;
  z-index:2000;
}
.stripes2
{
  position:absolute;
  bottom:0;
  left:0;
  width:100vw;
  height:33vh;
  display:none;
  margin:0;
  padding:0;
  overflow:hidden;
  mix-blend-mode: overlay;
  pointer-events:none;
  background-image:
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 0.5rem,
    #000 0.5rem,
    #000 1rem
  );
  opacity:6%;
  background-size: 200% 200%;
  animation: barberpole 30s linear infinite;
  z-index:2000;
}

.content:hover
{
  animation: pinch3 0.6s linear, fadeout 0.3s linear;
}
  
body
{
    margin:0;
    padding:0;
    width:100vw;
    height:100vw;
    overflow: hidden;
    background-color: #ffffff;
    zoom: reset;
    font-family: 'Rubik', sans-serif;
    font-weight:400;
    letter-spacing: -0.1vw;
    line-height:85%;
    color:#000;
    background:#fff;
}

.bgclouds
{
  opacity: 0.1;
  background-image:  url("img/dark_clouds.jpg");
  zoom: reset;
  position:absolute;
  top: 0;
  left: 0;
  z-index:993;
  width:8192px;
  height:8192px;
  mix-blend-mode: overlay;
  pointer-events:none;
  background-position-y: 0%;
  filter:invert(0) blur(0.1vw) contrast(0.65);
  -webkit-animation: updown 60s infinite;
  -moz-animation: updown 60s infinite;
  -o-animation: updown 60s infinite;
  animation: updown 60s infinite;
}

.bgclouds2
{
  opacity: 0.2;
  background-image:  url("img/dark_clouds.jpg");
  zoom: reset;
  position:absolute;
  top: 0;
  left: 0;
  z-index:993;
  width:8192px;
  height:8192px;
  mix-blend-mode: overlay;
  pointer-events:none;
  background-position-y: 0%;
  filter:invert(0) brightness(1.5) contrast(1) blur(0.1vw);
  -webkit-animation: updown 90s infinite;
  -moz-animation: updown 90s infinite;
  -o-animation: updown 90s infinite;
  animation: updown 90s infinite;
  transform:scaleX(-2) scaleY(-2);
}
 
.bars
{
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:-50vw;
	width:200vw;
	height:100vh;
	background:#fff;
	box-shadow: inset 0vw 0vw 0vw 0vw #fff;
	transition:0.45s;
  z-index:992;
}
b
{
    color:#000;
    font-weight:500;
    letter-spacing:-0.05vw;
}

.page
{
    margin:0;
    padding:0;
    align-items:center;
    justify-content: center;
    display:flex;
    height:100vh;
    width:100vw;;
}

.content
{
    transform:skewX(-5deg);
    z-index:995;
    margin-top:5vw;
    padding-bottom:0;
    text-align:center;
    opacity:100%;
	cursor:default;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
	transition:0.3s;;
}

.coolbg
{
    display:none;
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity:100%;
    left: 0px;
    top: 0px;
    z-index: 999;
    width:100%;
    height:100%;
    background: -moz-linear-gradient(180deg, #6200ff 0%, #e43333 50%, #6200ff 100%);
    background: -webkit-linear-gradient(180deg, #6200ff 0%, #e43333 50%, #6200ff 100%);
    background: -o-linear-gradient(180deg, #6200ff 0%, #e43333 50%, #6200ff 100%);
    background: -ms-linear-gradient(180deg, #6200ff 0%, #e43333 50%, #6200ff 100%);
    background: linear-gradient(180deg, #6200ff 0%, #e43333 50%, #6200ff 100%);
    background-size: 600% 600%;
    -webkit-animation: colorfade 1.83s ease infinite;
    -moz-animation: colorfade 1.83s ease infinite;
    -o-animation: colorfade 1.83s ease infinite;
    animation: colorfade 1.83s ease infinite;
    margin:0px;
    padding:0px;
}

.answer
{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    margin-top:2vw;
    padding:0;
    align-items:center;
    justify-content: center;
    display:flex;
    height:100vh;
    width:100vw;
    z-index:996;
    pointer-events: none;
    -webkit-animation: mover 1s infinite  alternate, pinch 2.5s linear infinite;
    animation: mover 1s infinite  alternate, pinch 2.5s linear infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.an
{
    transform:translateY(0vw) skewX(-5deg);
    font-size:6vw;
    letter-spacing:-0.7vw;
    display:none;
    -webkit-animation: pinch2 3s linear infinite;
    animation: pinch2 3s linear infinite;
	font-weight:500;
}

.wave span {
  display: inline-block;
  -webkit-animation: wave-text 1s ease-in-out infinite;
          animation: wave-text 1s ease-in-out infinite;
}

.wave span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.wave span:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.wave span:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wave span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.wave span:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.wave span:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.wave span:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.wave span:nth-of-type(8) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.wave span:nth-of-type(9) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.wave span:nth-of-type(10) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.wave span:nth-of-type(11) {
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
}
.wave span:nth-of-type(12) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.wave span:nth-of-type(13) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.wave span:nth-of-type(14) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.wave span:nth-of-type(15) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.wave span:nth-of-type(16) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.wave span:nth-of-type(17) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

@-webkit-keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.1em);
  }
  100% {
    transform: translateY(0em);
  }
}

@keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.1em);
  }
  100% {
    transform: translateY(0em);
  }
}

@keyframes fade {
  0%   {opacity: 0%;}
  100% {opacity: 100%;}
}

@keyframes fadeout {
  0%   {opacity: 100%;}
  100% {opacity: 0%;}
}

@-webkit-keyframes colorfade {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes colorfade {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-o-keyframes colorfade {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes colorfade {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(1vh); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(1vh); }
}

@keyframes zoomin {
  0% { transform: scale(0) skewX(-5deg);filter:blur(0.5vw); }
  100% { transform: scale(1) skewX(-5deg);filter:blur(0vw); }
}

@keyframes zoomout {
  0% { transform: scale(1) skewX(-5deg);filter:blur(0vw); }
  100% { transform: scale(0) skewX(-5deg);filter:blur(0.5vw); }
}

@keyframes zoomin2 {
  0% { transform: scale(0);filter:blur(0.5vw); }
  100% { transform: scale(1);filter:blur(0vw); }
}

@keyframes zoomout2 {
  0% { transform: scale(1);filter:blur(0vw); }
  100% { transform: scale(0);filter:blur(0.5vw); }
}

@keyframes pinch {
    0%   {transform:scaleX(1);}
    50%  {transform:scaleX(0.95);}
    100% {transform:scaleX(1);}
  }

  @keyframes updown {
    0%   {top: 0%;}
    50%  {top: -100%;}
    100% {top: 0%;}
  }

  @keyframes pinch2 {
    0%   {}
    50%  {}
    100% {}
  }

  @keyframes pinch3 {
    0%   {transform:scale(1) skewX(-5deg);}
    50%  {transform:scale(0.98) skewX(-5deg);}
    100% {transform:scale(1) skewX(-5deg);}
  }
  @keyframes rock {
    0%   {transform:skewX(-5deg);}
    25%  {transform:skewX(-5deg);}
    50%  {transform:skewX(-5deg);}
    75%  {transform:skewX(5deg);}
    100% {transform:skewX(-5deg);}
  }
  @keyframes textglow {
    0%   {text-shadow:0vw 0vw 0vw #fff;}
    25%  {text-shadow:0vw 0vw 1vw #000;}
    50%  {text-shadow:0vw 0vw 0vw #fff;}
    100% {text-shadow:0vw 0vw 0vw #fff;}
  }

  @keyframes barberpole {
    100% {
      background-position: 100% 100%;
    }
  }
  @keyframes barberpole2 {
    100% {
      background-position: 100% 100%;
    }
  }

@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.1vw, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(0.2vw, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-0.4vw, 0, 0);
  }

  40%, 60% {
    transform: translate3d(0.4vw, 0, 0);
  }
}