body{
  background-color: #161616;
}

body{
  color: #F4F4F4;
  font-family: "Chakra Petch";
}

.Title {
  font-size: 300%;
  margin-top: 5%;

}

.yo{
  margin-top: 12.5%;
  font-size: 450%;
  color: #04aa6d;
}
.Title1 {
  font-size: 200%;

}
.hr1{
  height: 10%;
}

.button {
  border: none;
  color: white;
  padding: 2% 6%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 150%;
  margin: 4% 2%;
  cursor: pointer;
  font-family: "Chakra Petch";
  transition-duration: 0.1s;
}

.button:hover{
  padding: 2% 8%;
  transition-duration: 0.3s;
  text-align: right;
}

.Zoom {
  transition-duration: 0.3s;
}
.Zoom:hover {
  transition-duration: 0.3s;
}

.one{
  color: rgb(255, 255, 255);
}
.two{
  color: rgb(255, 255, 255);
}
.three{
  color: rgb(255, 255, 255);
}

.one:hover{
  color: rgb(255, 172, 172);
}
.two:hover{
  color: rgb(240, 255, 172);
}
.three:hover{
  color: rgb(178, 172, 255);
}

.butts {
  display: flex;
  justify-content: space-around;
}

.yt {background-color: #04aa6d;} /* Green */
.yt:hover {background-color: #c74747;} /* Green */

.dc {background-color: #04AA6D;} /* Green */
.dc:hover {background-color: #003644;} /* Green */

.mp {background-color: #04AA6D;} /* Green */
.mp:hover {background-color: #004411;} /* Green */


.sp {
  background-color: #04AA6D;
  padding: 1% 8%;
  margin: 2% 0%;

} /* Green */
.sp:hover {
  background-color: #4ba83e;
  padding: 1% 10%;
} /* Green */


.brp {
  background-color: #220505;
  position: absolute;
  left: 0%;
  bottom: 0%;
  padding: 1%;
  margin: 0%;
} /* Green */

.brp:hover {
  background-color: #220505;
  position: absolute;
  left: 1%;
  bottom: 0%;
  padding: 1% 2%;
  margin: 0%;
} /* Green */