/* GOOGLE FONTS  */

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

     /* COMMON Utilities */


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

     main {
         display: flex;
         flex-direction: column;
         align-items: center
     }

     .container {
         background-color: #fff;
         width: 870px;
         padding: 30px;
         border-radius: 5px;
         margin-top: 21px;
     }

     hr {
         border: 1px solid #D1D1D1;
         margin-bottom: 27px;
     }

     /*---------------------*\
        Top Players
    *\-----------------------*/
    header, footer{
        height: 90px;
        background-color:#562EFF;
    }
    header{
        display: flex;
        justify-content: center;
    }
    .menu-container{
        display: flex;
        justify-content:space-between;
        width: 870px;
    }
    .menu-left{
        display: flex;
        align-items: center;
    }
    .menu-left img{
        margin-right: 15px;
        width: 41px;
        height: 51px;
    }
    .menu-left span{
        font-size: 24px;
        color: #fff;
    }
    .menu-right{
        display: flex;
        align-items: center;
    }
    .menu-right a{
        text-decoration: none;
        list-style: none;
        margin-right: 20px;
        color: #fff;
        font-size: 16px;
    }
    .menu-right img{
        width: 51px;
        height: 51px;
    }
    /*---------------------*\
            Top Players
    *\-----------------------*/

    .section-title {
        color: #562EFF;
        font-size: 24px;
        margin-top: 3px;
    }
    .top-players {
     margin-bottom: 30px;
     }

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

     .player {
         display: flex;
         /* justify-content: center; */
         align-items: center;
     }

     .player img {
         width: 56px;
         height: 56px;
     }

     .player-name {
         margin-left: 16px;
         font-size: 18px;
     }

     /*------------------------*\
           Top Blog Section  
      *\------------------------*/

     .blogs {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-row-gap: 16px;
     }

     .blog {
         display: flex;
     }

     .blog-title {
         font-size: 20px;
     }

     .blog .thumbnail img {
         width: 177px;
         height: 117px;
     }

     .blog-info {
         margin-left: 16px;
         width: 165px;
     }

     .blog-author {
         color: #9F9F9F;
         font-size: 16px;
         line-height: 0;
     }

     .blog-author a {
         text-decoration: none;
         color: #562EFF;
     }

     /*------------------------*\
           Courses Section  
      *\------------------------*/

     .courses {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-column-gap: 24px;
     }

     .course {
         width: 253px;
     }

     .course .course-banner img {
         width: 224px;
         height: 104px;
     }
     
     h3.course-title {
        margin-bottom: 5px;
    }

     .course-author {
         color: #ED6B4F;
     }

     p.course-author {
        margin-top: 0;
    }
     .course-info {
         display: flex;
         align-items: center;
     }

     .fa-star {
         font-size: 12px;
     }

     .fa-star.filled {
         color: #FFC014;
     }

     .fa-star.empty {
         color: #AEAEAE;
     }

     .course-info span {
         font-size: 12px;
         margin-left: 10px;
     }

     .course-clock {
         font-size: 12px;
         color: #FF4A60;
         background: #FFE4E8;
         border-radius: 20px;
         margin-left: 30px;
     }
     /* Footer Styles */
     footer{
         text-align: center;
         line-height: 90px;
         font-size: 24px;
         color: #fff;
         margin-top: 21px;
     }
     footer a{
         color:#FFC014;
         text-decoration: none;
         cursor: pointer;
     }
     /* ----------------------------*\
                Media Query Starts
     -------------------------------*/

      /* Mobile Devices */
      @media only screen and (max-width:688px) {
          .container{
              width: 100%;
          }
          .players, .blogs, .courses{
            grid-template-columns: 1fr;
            justify-content: center;
          }
          .player, .blog{
            flex-direction: column;
            align-items: center;
          }
          .course{
              justify-content: center;
          }
      }
      /* Tablet Devices */
      @media only screen and (min-width: 688px) and (max-width: 992px){
          .container{
              width: 100%;
          }
          .players, .courses{
              grid-template-columns: repeat( 2, 1fr);
              justify-content: center;
          }
          .blogs{
              grid-template-columns: 1fr;
          }
      }