@font-face {
  src: url(fonts/Montserrat.ttf);
  font-family: montserrat;
}

@font-face {
  src: url(fonts/Questrial.ttf);
  font-family: questrial;
}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: space-around;
  align-items: flex-start;
}

.flex-container > div {
  width: 600px;
  position: sticky;
  top: 35%;
}

img {
    width: 500px;
    position: sticky;
    top: 80px;
    padding-bottom: 180px;
    
}

body {
cursor: default;
font-family: "questrial";
font-weight: 300;
height: 100%;
font-size: 50px;
text-transform: uppercase;
text-align: center;
}


.header {
font-family: "montserrat", sans-serif;
font-size: 180px;
font-weight: 800;
text-align: center;
padding-bottom: 400px;
padding-top: 40px; 
background-image: -webkit-linear-gradient(92deg, #833ab4, #fd1d1d, #fcb045);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 5s infinite linear; 
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
 
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}


marquee {
font-size: 30px;
font-family: "questrial";
font-weight: normal;
background: linear-gradient(to left,#ff4400, #0011ff, #ff0066, #d900ff, #ffaa00);
position: relative;
}

.headerend {

font-family: "montserrat", sans-serif;
font-size: 180px;
font-weight: 800;
margin: auto;
padding-bottom: 0px;
padding-top: 50px; 
background-image: -webkit-linear-gradient(92deg, #833ab4, #fd1d1d, #fcb045);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 5s infinite linear; 
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;

}

.headermiddle {

font-family: "montserrat", sans-serif;
font-size: 180px;
font-weight: 800;
margin: auto;
padding-bottom: 100px;
padding-top: 100px; 
background-image: -webkit-linear-gradient(92deg, #833ab4, #fd1d1d, #fcb045);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 5s infinite linear; 
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;

}


.container {
border-bottom: 2px solid black;
background-color: #f1f1f1;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: black;

}

.container_tutorial {
position: sticky;
top: 10px;


}

p {
font-size: 20px;
font-family: "questrial";
font-style: normal;
font-weight: 40;
position: sticky;
top: 10px;
overflow: hidden;
}


.clap {
  animation: clap 3s ease-in-out infinite;
  font-size: 100px;
  transform-origin: center center;
}

@keyframes clap{2%{transform:translate(0px, -7px) rotate(2.5deg)}4%{transform:translate(6px, 3px) rotate(-.5deg)}6%{transform:translate(6px, -5px) rotate(.5deg)}8%{transform:translate(3px, 3px) rotate(-1.5deg)}10%{transform:translate(-4px, 5px) rotate(1.5deg)}12%{transform:translate(2px, 7px) rotate(2.5deg)}14%{transform:translate(0px, 6px) rotate(-1.5deg)}16%{transform:translate(-9px, 5px) rotate(-2.5deg)}18%{transform:translate(4px, -8px) rotate(-.5deg)}20%{transform:translate(2px, 9px) rotate(3.5deg)}22%{transform:translate(-5px, 1px) rotate(-2.5deg)}24%{transform:translate(-2px, -8px) rotate(.5deg)}26%{transform:translate(4px, -2px) rotate(-.5deg)}28%{transform:translate(-4px, 9px) rotate(1.5deg)}30%{transform:translate(-4px, -3px) rotate(3.5deg)}32%{transform:translate(-2px, 6px) rotate(-2.5deg)}34%{transform:translate(4px, -4px) rotate(-.5deg)}36%{transform:translate(-1px, 6px) rotate(.5deg)}38%{transform:translate(8px, 8px) rotate(1.5deg)}40%{transform:translate(9px, -2px) rotate(3.5deg)}42%{transform:translate(-2px, -9px) rotate(.5deg)}44%{transform:translate(-1px, 10px) rotate(-1.5deg)}46%{transform:translate(-1px, 1px) rotate(-.5deg)}48%{transform:translate(6px, -8px) rotate(2.5deg)}50%{transform:translate(-1px, -7px) rotate(-1.5deg)}52%{transform:translate(0px, 1px) rotate(-1.5deg)}54%{transform:translate(1px, -8px) rotate(-2.5deg)}56%{transform:translate(-4px, 2px) rotate(1.5deg)}58%{transform:translate(10px, -7px) rotate(-2.5deg)}60%{transform:translate(-2px, -4px) rotate(-1.5deg)}62%{transform:translate(-3px, 3px) rotate(1.5deg)}64%{transform:translate(8px, 2px) rotate(-1.5deg)}66%{transform:translate(-4px, -1px) rotate(1.5deg)}68%{transform:translate(-1px, -2px) rotate(-1.5deg)}70%{transform:translate(8px, 8px) rotate(.5deg)}72%{transform:translate(-8px, -3px) rotate(-2.5deg)}74%{transform:translate(6px, 5px) rotate(.5deg)}76%{transform:translate(4px, -9px) rotate(1.5deg)}78%{transform:translate(-2px, -6px) rotate(3.5deg)}80%{transform:translate(1px, 0px) rotate(1.5deg)}82%{transform:translate(-4px, 6px) rotate(-2.5deg)}84%{transform:translate(-4px, -3px) rotate(1.5deg)}86%{transform:translate(7px, 10px) rotate(2.5deg)}88%{transform:translate(-3px, -2px) rotate(1.5deg)}90%{transform:translate(8px, -3px) rotate(3.5deg)}92%{transform:translate(0px, 3px) rotate(1.5deg)}94%{transform:translate(5px, -5px) rotate(-2.5deg)}96%{transform:translate(7px, -2px) rotate(-.5deg)}98%{transform:translate(-6px, 0px) rotate(3.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}