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

body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}
span{
    color: rgb(203, 216, 14);
    
}
span:hover{
   color: blueviolet;
}


header{
    background-color: #0082e6;
    height: 720px;
    width: 100%;
}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}
.container{
    width: 75%;
    background-color: #FFFFFF;
    padding: 30px;
    margin-top: 21px;
    border-radius: 5px;
    padding: 0;
}

/* Intro-style */
.Intro-container{
    display: flex;
    
}

.half-width{
   
    width: 50%;
    margin-left: 50px;
    padding-left: 1%;
}
.half-width img{
    width: 556.01px;
    height: 438px;
    position: relative;
    top: 157px;
    transition: transform 1s ease-out 0.2s;
}
.half-width img:hover{
    transform: rotate(360deg);
}

.half-width h1{
    
    font-size: 64px;
    font-weight: bold;
   
    position: relative;
    top: 160px;
    left: 156px;
    color: white;
  
}
.half-width p{
    margin-bottom: 50px;
    color: rgb(97, 90, 90);
}
.half-width a{
    position: relative;
    top: 130px;
    left: 156px;
    
    box-shadow: 2px  gray;
    padding: 10px 15px;
    background-color: #E02C6D;
    font-size: 16px;
    text-decoration: none;
    color: white;

}
.half-width a:hover{
    box-sizing: border-box;
    box-shadow: 0 0 40px rebeccapurple;
}
.half-width a i{
    padding-left: 8px;
    
}
/* end intro style */
/* player style */
.title{
    text-align: center;
    background-color: skyblue;
}
 .title::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: green;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.title:hover::after{
    width:100% ;
} 
.players{
    display: grid;
    grid-template-columns: repeat(3,3fr);
    grid-column-gap: 30px; 
    grid-row-gap: 30px;
   
}
.players:hover{
    box-shadow: 0 0 40px gray;
}
.player{
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 40px rgba(0, 0,0, 0.2);
    border-radius: 10px;
}
.player .thumnil img{
    width: 100%;
    border-radius: 10px;

}
.player .thumnil img:hover{
    border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 0px 0px 10px;
}


.player-info p{
  
    text-align: left;
    
}
.player-info p:hover{
    border: 1px solid gray;
    
    
}
.player-info a{
    box-shadow: 2px  gray;
    
    background-color: rgba(224, 44, 110, 0.514);
    font-size: 16px;
    text-decoration: none;
    color: white;
    
    position: relative;
    bottom: 5px;
    
}
.player-info a:hover{
    border: 1px solid gray;
}
/* end player style */

/* winner style  */
.winner-container h2{
    text-align: center;
    margin-bottom: 50px;
    background-color: skyblue;
}
.winner-container h2::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: yellow;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.winner-container h2:hover::after{
    width:90% ;
    
}
.winners{
    
     display: grid;
    grid-template-columns: repeat(4,4fr);
     grid-column-gap: 30px; 
     
}

.winner img{
    width: 300px;
    height: 250px;
   
}
.winner img:hover{
    box-shadow: 0 0 40px gray;
    
}
.winner h3{
    text-align: center;
    
}
.winner h3::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.winner h3:hover::after{
    width:90% ;
}


/* end winner style */

/* list in video style */
.video-container h2{
    text-align: center;
    background-color: skyblue;
}
.video-container h2::after{
    content: '';
    width: 0%;
    height: 2px;
    background-color: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;

}
.video-container h2:hover::after{
    width:90% ;
}
.video-container iframe:hover{
    box-shadow: 0 0 40px gray;
    
}

/* footer style */
.footer{
    text-align: center;
    margin-bottom: 63px;
    margin-top: 90px;
}
.logo-footer img{
    width: 20%;
}
.icon-footer{
    font-size: 2.2em;
    color: red;
    


}
.icon-footer i{
    margin: 10px;
    border-radius: 50%;
}
.icon-footer i:hover{
    box-shadow: 0 0 40px tomato;
}
/* end footer style */


/* Media queries */
/* mobile device */
@media only screen and (max-width: 700px){
    .container{
        width: 100%;
    }
    nav{
        display: none;
    }
    header{
        height: 850px;
    }
/* Media queries for top-banner */
   .top-banner{
       justify-content: center;
       flex-direction: column;
   }
    .half-width h1{
       position: relative;
       left: 0px;
       top:112px;
        font-size: 45px;
    }
    .half-width a{
        position: relative; 
        left: 0px;

    }
    .half-width img{
        width: 329px;
        height: 259.17px;
        margin-top: 30px;
    }
    /* Media queries for player */
    .players,.winners{
        grid-template-columns: repeat(1,1fr);
    }
    .player{
        justify-content: center;
        flex-direction: column;
    }
    /* Media queries for highlights*/
    .flexible-container{
        justify-content: center;
        flex-direction: column;
    }
    .half-width1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
     }
     .half-width1 h1{
        position: relative;
        left: 0px;
        top:0px;
        font-size: 30px;
         
         
     }
  
     .half-width1 p{
         float: left;
         text-align: justify;
         width: 100%;
         position: relative;
         left: 0;
         overflow: hidden;
         
     }
     .half-width1 img{
         width: 329px;
         height: 259.17px;
         margin-top: 30px;
         position: relative;
         left: 30px;
     }
     .half-width1 a{
         display: flex;
         width: 80%;
     }
     /* Media queries for winner list*/
     .winner{
         position: relative;
        left: 30px;
     }
     /* Media queries for winner list video*/
     .video-container iframe{
         width: 300px;
         height: 300px;
     }
     .logo-footer img{width: 70%;
    }

}