/* ---------------------------
        font import
    --------------------------*/


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


/* ---------------------------
        common styles
    --------------------------*/


* {
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
}

.heading {
    display: flex;
    margin: 0 auto;
    width: 1440px;
    height: 677px;
    background-color: #2D25A0;
}

.top-heading {
    margin: auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-left {
    width: 50%;
    margin-left: 156px;
}

.top-right {
    width: 50%;
}

.top-right img {
    width: 80%;
}

.top-heading-title {
    color: white;
    font-size: 64px;
    margin-bottom: 27px;
}

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

p {
    font-size: 16px;
    font-weight: 400;
}

a {
    text-decoration: none;
}


/* ---------------------------
        players section style
    --------------------------*/


.players {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 30px;
}

.player-card {
    width: 330px;
    height: 474px;
    border-radius: 4px;
    margin-bottom: 27px;
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
}

.player {
    padding: 15px 15px 33px 15px;
}

.player img {
    width: 100%;
}

.player-name {
    font-size: 28px;
    margin: 16px 0 10px 0;
}


/* ---------------------------
        highlight section style
    --------------------------*/


.highlight-area {
    margin-top: 165px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlight-info {
    width: 469px;
    margin-right: 66px;
}

.highlight-title {
    font-size: 48px;
}

.hightlight-detail {
    margin-bottom: 10px;
    padding: 8px 0 24px 0;
}


/* ---------------------------
        button style
    --------------------------*/


.link-button {
    font-size: 16px;
    color: #E02C6D;
    border: 1px solid #E02C6D;
    padding: 10px 24px;
    cursor: pointer;
    transition: color 0.5s linear;
    position: relative;
}

.btn-1 {
    color: white;
    background-color: #E02C6D;
}

.btn-1:hover {
    color: #E02C6D;
    background-color: white;
}

.btn-2:hover {
    color: white;
}

.btn-2 {
    background: none;
}

.btn-2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #E02C6D;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
}

.btn-2::before {
    transform: scaleX(0);
}

.btn-2:hover::before {
    transform: scaleX(1);
}


/* ---------------------------
        blog section style
    --------------------------*/


.top-blogs {
    width: 1050px;
    margin: 120px 0 30px 0;
}

.section-title {
    color: blueviolet;
    background-color: honeydew;
    font-size: 48px;
    margin: 0 0 40px 0;
    padding-left: 20px;
    border-left: 10px solid red;
}

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

.blog {
    display: flex;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
}

.blog-thumbnail img {
    border-radius: 4px;
    width: 192px;
    height: 108px;
}

.blog-info {
    margin: 0 20px;
}

.blog-info a {
    color: #562EFF;
}

.blog-info a:hover {
    text-decoration: underline;
}

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

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

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


/* ---------------------------
        video section style
    --------------------------*/


.trending-videos {
    width: 1050px;
    margin: 120px 0;
}

.section-title {
    color: blueviolet;
    background-color: honeydew;
    font-size: 48px;
    margin: 0 0 40px 0;
    padding-left: 20px;
    border-left: 10px solid red;
}

.videos {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.video {
    display: flex;
    padding: 16px;
    margin: 20px auto 40px auto;
}

.video .video-thumbnail img {
    border-radius: 4px;
    width: 177px;
    height: 117px;
}

.video-info {
    margin: 0 20px;
}

.video-title {
    font-size: 28px;
    margin-top: 20px;
    color: #333;
}


/* ---------------------------
        highlight section style
    --------------------------*/


.highlight-thumbnail {
    width: 567px;
    height: 427px;
}

.highlight-thumbnail img {
    width: 100%;
}


/* ---------------------------
        footer section style
    --------------------------*/


footer {
    margin: 158px 0 63px 0;
}

.footer-area {
    width: 484px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-logo img {
    width: 90%;
    height: 90%;
}

.footer-social-icon {
    margin: 20px 0;
}

.fa-arrow-right {
    margin-left: 8px;
}

.fab {
    padding: 12px;
    border-radius: 50%;
    color: gray;
    background-color: #969bab4d;
}

.fab:hover {
    color: #E02C6D;
    background-color: rgba(128, 128, 128, 0.4);
}


/* ---------------------------
        media query style
    --------------------------*/

/* media query for mobile device */

@media only screen and (max-width: 688px) {
    .heading {
        width: 100%;
    }
    
    .top-heading, .top-left, .top-right {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .top-heading {
        grid-row-gap: 50px;
    }

    .top-heading {
        width: 100%;
        margin: 0 16px;
    }
    
    .top-heading-title {
        font-size: 36px;
    }

    .top-left {
        margin: 0;
    }

    .top-right img {
        margin-left: 10px;
        width: 90%;
    }

    .players {
        grid-template-columns: repeat(1, 1fr);
    }

    .highlight-area {
        display: flex;
        flex-direction: column;
        grid-row-gap: 30px;
        width: 100%;
    }

    .highlight-info {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0;
    }

    .highlight-title {
        font-size: 30px;
    }

    .highlight-thumbnail {
        width: 90%;
    }

    .section-title {
        font-size: 30px;
    }

    .top-blogs, .trending-videos {
        width: 100%;
    }

    .blogs {
        grid-template-columns: repeat(1, 1fr);
    }

    .blog, .video {
        width: 90%;
        margin: 0 auto 20px auto;
    }

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

    video {
        width: 100%;
        height: 100%;
    }

    .video-title {
        margin: 20px 0 50px 0;
    }

    footer {
        margin: 43px auto;
    }

    .footer-area {
        width: 90%;
        display: flex;
    }
}