body {
  background-color: #FFF8E7;
  color: black;
  font-family: "Kuiper Belt", Verdana;
  font-size: 30px;
}

.games-title{
  display: flex;
  justify-content: center;
  max-width: 1325px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 30px;
  
  border-style: solid;
  border-width: 5px;
  border-color: #A8A8F3;
  border-radius: 30px;
  background: linear-gradient(#A8A8F3, white);
}

.games-box{
  display: flex;
  flex-direction: column;
  max-width: 1325px;
  justify-content: center;
  margin: auto;
  
  padding-left: 20px;
  padding-bottom: 30px;

  border-style: solid;
  border-width: 5px;
  border-color: #A8A8F3;
  border-radius: 30px;
  background: linear-gradient(#A8A8F3, white);
}

.logo-header{
  display: flex;
  flex-direction: column; 
  align-items: center;
  margin-top: 30px;
  background-color: linear-gradient(#FFF8E7, #96b2ff);
}

.logo{
  display: flex;
  justify-content: center;
  max-height: 320px;
}

.banner-buttons{
  display: flex;
  justify-content: center;
  padding-top: 70px;
  padding-bottom: 30px;
  margin-top: 20px;

  background-image: url("https://i.postimg.cc/0j3jJt9P/CloudBar.png");
  background-repeat: repeat-x;
  background-position-y: -20px;
  background-size: 90px;
}

.top-button{
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 15px;
  padding-bottom: 15px;
  
  font-family: "Kuiper Belt";
  font-weight: bold;

  margin-right: 5px;
  margin-left: 5px;
  
  font-size: 25px;
  border-width: 2.5px;
  border-radius: 25px;
  border-color: #96b2ff;
  border-style: solid;
  background: linear-gradient(white, #96b2ff);
  
  transition: border-color, border-width .25s, font-size .25s, border-radius .25s;
}
.top-button:hover{
  background: linear-gradient(white, #ffd0c2);
  border-color: #ffd0c2;
  border-width: 5px;
  cursor:pointer;
  font-size: 30px;
  border-radius: 30px;
}
.top-button:active{
  background: white;
  border-color: #ffd0c2;
}