html {
    height: 100%;
margin: 0%;
overflow: auto;
  }

.chess,.how{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}
.desc{
    margin:0 20px 20px 20px;
}
  #messages {
    width: 64px;
    height: 64px;
    float: right;
    margin: 4px;
    color: red;
  }
 a{
    padding-bottom: 10px;
    color: black;
  }
  .figurines{
    font-size: 50px;
  }
  
section{
  background-position: center;
  height: fit-content;
}
.image-1-footer{
  background-image: url("../pictures/chess-desktop-footer1.jpg");
}
.more-info a{
  color:white;
}

header ul{
  margin: 0%;
  padding: 1px;
}

header ul>li{
 display: block;

}
header a,footer a{
  font-weight: 700;
  padding-left: 25px;
  text-shadow: 2px 2px #2f0f03;
  color:white;
  font-size: 18px;
}
header a:hover{
  text-decoration: underline;
}
.how-chess,.figurines{
  color:#A0522D;
}
p{
  margin:20px;
}
iframe{
  width:800px;
  height: 400px;
  padding-bottom: 30px;
  cursor: pointer;
}
/*ART SECTION*/
.para-how{
  text-align: center;
}
.parent-art{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

/*ACCORDION*/

.accordion {
    background-color: #d2b48c;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 25px;
    transition: 0.4s;
    
}

   .accordion:hover{
      background-color: #c0863a;
      color:white;
      animation-name: colorChange;
      animation-iteration-count: 1;
      animation-duration: 1s;
    
    }

@keyframes colorChange {
  0%{background-color: #d2b48c;color:#000000;}
  50%{background-color: #ca9856;color:#444;}
  100%{background-color: #c0863a;color:white;}

}

.panel {
    padding: 0 18px;
    display: block;
    background-color: white;
    overflow: hidden;
    clear:left
}

.icons-media{
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(100deg) brightness(100%) contrast(100%);
}
hr {
  background-color: white; 
}
@media screen and (max-width:800px) {
  iframe{
    width:380px;
  }
  
}
@media screen and (max-width:550px) {

  iframe{
      width:300px;
    
    }  
  .footer{
    flex-direction: row;
    justify-content: center;
  }
  .parent-art{
    flex-direction: column-reverse;
  }
}
@media screen and (max-width:300px) {
 
}
@media screen and (max-width:300px) {

  video{
      width:270px;
    }
}