body {
    font-size: 14pt;
    background-color: black;
    color: white;
} 
body p {
  color: white;
}
h3{
  text-shadow:2px 2px 5px white;
}
  #messi img:hover, #ronaldo img:hover,.player-bio img:hover,.img img:hover{
    transform: scale(1.5);
    transition: all 500ms;

  }
  

.player-info{
  border: 1px solid black;
 border-width: 3px;
  background-color: #7c877f;
  resize: 50px;
  padding: 15px;
  height: 200px;
  overflow: scroll;
  border-radius: 0 0 10px 10px;
}
.player-info:hover{
 
}
#messi,#ronaldo {
  color: black;
  text-align: center;
  margin-top: 30px;
}
#table,#voting-form{
  margin-top: 40px;
}
a:link{
  color: #0974ad;
};
a:visited{
  color: #b52222; 
}
a:hover{
  color: #0d0707;
}
#nav{
  background-color: red;
}
.player-bio p {
  border: 1px solid black;
  border-width: 2px;
  text-align: center;
  text-overflow: scroll;
  padding: 15px;
  height: 200px;
  overflow: scroll;
}
#ronaldo{
  background-color: #804747;
}
#messi{
  background-color: skyblue;
}
#table{
  background-color: #b54612;
}
#voting-form{
  background-color: coral;
  opacity:.9;
}
.Highlight {
  background: red;
  color: deeppink;
}
#Hawa {
  background-color: yellowgreen;
}
.img{
  
  background-size: center;
}
.IMG{
  border-image-width: 24px;
}
.row1{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.row1 .column1{
  flex: 33.3%;
  width: auto;
  overflow: hidden;
  padding: 0 4px;
  height: 100%;
}
.row1 .column1 img{
  width: 100%;
  height: 100%;
  margin-top: 2%;
  cursor: pointer;
  border-radius: 5px;
  filter: grayscale(1) brightness(0.5);
  transition: 0.3s linear;
  }

.row1 .column1 img:hover {
   filter: grayscale(0) brightness(1);
   transition: all 500ms;
}


@media only screen and (max-width: 800;){
 .row1.column1{
  flex: 50%;
}
}
@media only screen and (max-width: 680; ){
  .row1.column1 px{
    flex: 100%;
  }
}