@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/* Above is the Font Awesome CSS to display the Pause and Play buttons! */
body{
  background-image: url(https://howl-to-the-moon.github.io/host/h_realWebbys/imgs/plaza_test.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  background-attachment: fixed;
  background-color: orange;
  
}

h2, h3, h4, h5, h6{
  font-size: 2rem;
  padding: 0;
  margin: 0;
}

.header{
  margin-top: 10px;
  border-bottom: 2px solid rgb(255, 255, 255);
  border-top: 2px solid black;
  color: white;
  font-family: 'Press Start', serif;
}



.logo{
  margin-right: 50px;
}
.navbar{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 1.5rem;
  
  background-color: orange;
  padding: 20px;
}

.navbar > a {
  text-decoration: underline double;
  color: white;
  
  
}



.groups{
  margin: 0px 0px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(402px, 1fr));
  font-family: 'Pixel Operator', serif;
  font-size: 1.4rem;
  gap: 20px;

}

.groups > div{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* border: black 2px solid; */
}

.left{
  align-items: flex-end;
}

.middle{
  display: grid;
  height: 300px;
  align-items: center;
  justify-content: center;
}

.right{
  align-items: flex-start;
}

.groups > div > div {
  border: rgb(134, 134, 134) solid 2px;
  border-radius: 10px;
  color: navy;
  background-color: white;
  margin: 20px;
  padding: 5px 20px;
  max-width: 500px;
  display: block;
  justify-content: flex-start;
}

.groups > div > div > h2 {
  color: rgb(0, 38, 255);
}

.protags{
  display: flex;
}

#blank, #andrea{
  width: 300px;
}


.footer{
  display: grid;
  height: 300px;
  align-items: center;
  justify-content: center;
}

.buttons{
  width: 1000px;
}

/* ===== AUTOPLAY ===== */
.buttondiv {
  cursor: pointer;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;
  color: white;
  z-index: 1;
}

.autoplayer button {
  background: orange;
  cursor: pointer;
  color: white;
  border: none;
  padding: 1px 4px 0px 4px;
  font-size: 18px;
  position: fixed;
  height: 35px;
  bottom: 5px;
  width: 35px;
  left: 5px;
  border-radius: 50px;
}

.autoplayer a {
  background: orange;
  color: white;
  text-decoration: none;
  padding: 2px 10px;
  position: fixed;
  font-size: 14px;
  bottom: 5px;
  z-index: 1;
  left: 50px;
  border-radius: 50px;
}