/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body{
    font-family: 'Poppins', sans-serif;
    background-color: #F3F1FF;
    padding: 0;
    margin: 0;

}
.flexible-container{
   
    
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 100px;
    background-color: #7395AE;
    font-size: 20px;
    color: white;
    
}
.Extra{
     
    display: flex;
    justify-content: space-evenly;
    padding-left: 50px;
    

}
.container{
    margin: 60px;
     
}

.highlight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 100px;
    font-size: 20px;
    color: black;
    margin-top: 165px;
    margin-bottom: 217px;

    

    
}
.width img{
    margin-top: 165px;
    margin-right: 165px;
    height: 200px;
    height: 200px;

}


.half-width img  {

    height: 400px;
    width: 600px;
}
/* 
button:hover{
    height: 44px;
    width: 168px;
    background-color: white;
    color: red;
    border: 5px solid yellowgreen;
} */
.link-button{
    text-decoration: none;
    background-image: linear-gradient(red, tomato);
    border-radius: 5px;
    font-weight: 400;
    padding: 10px 10px;
    margin-top: 200px;
}
h1{
    color: white;
    font-size: 2em;
}
.foot{
    color: white;
    font-size: 2em;
    text-align: center;

}
/* player */

.player img{
    height: 50%;
    width: 100%;
    
    

}
.players {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 50px;

    
   
}
.colour:hover{
    background-color: black;
    text-align: center;
}
.player{
    height: 100%;
    box-shadow: 0 8px 50px 0 ;
    margin: 5%;
    padding: 5px 5px;
    
}

   /* TABLE */

.table {
    
    padding-bottom: 100px;
    border-collapse: collapse;
}
  
.th, td {
    color:gold;
    background-color: green;
    text-align: left;
    padding: 10px 8px;
 }
 .from{

     background-color: yellowgreen;
     box-shadow: 0 8px 100px 0 ;
     height: 100%;
     width: 70%;
     padding: 10px 10px;
     margin-top: 20px;

     
 }

 /* footer */

 footer{
     background-color: #501b1d;
 }

  
/* media quarry */
@media only screen and (max-width:688px) {
   
    .players {
        grid-template-columns: repeat(1, 1fr);
       
    }
    .flexible-container{
        
        flex-direction: column;

    }
    .highlight{
        flex-direction: column;

    }
    footer{
        flex-direction: column;

    }
    footer img{
        width: 250px;
        
    }


}