/* *-------------------------------------------------------------------
GENERAL STYLE */

/* * ROOT */
:root{
    /* ? COLORS */
    --main-text-color:black;
    --lighter-main-text-color: #767676;
    --secondary-text-color:white;
    --dark-bg-color:#363636;
    --jumbotron-btn-bg-color:#cd3d0f;
    --main-btn-bg-color:#2b8ad6;
    --ps-plus-section-bg-color:#bebcbb;
    --ps-plus-btn-bg-color:#d9dadc;
    --ps-now-bg-color:#161c3b;
    --footer-utilities-section-bg-color:#00439c;
}



/* * TAG HTML */
body{
    font-family: Arial;
    color: var(--main-text-color);
}



/* * CLASSES */

/* ? TEXT */
.my-title{
    font-size: 2.5rem;
}

/* ? OTHER */
.my-btn:focus{
    outline: none;
    box-shadow: none;
}

.my-d-none{
    display: none;
}





/* *-------------------------------------------------------------------
SPECIFIC STYLES */

/* * HEADER */
header{
    background-color: var(--secondary-text-color);
    opacity: 0.9;
}

/* ? ASIDE */
header aside{
    background-color: var(--main-text-color);
}

header aside .my-img-container img{
    height: 15px;
}


/* ? NAVBAR */
header nav{
    font-family: Helvetica;
}

header nav ul .my-nav-link{
    color: var(--main-text-color);
}

header nav ul .my-nav-link.my-btn{
    width: 5rem;
    color: var(--secondary-text-color);
    background-color: var(--dark-bg-color);
    border: none;
}

header nav ul .my-nav-link.my-icon{
    width: 2.5rem;
}

header nav ul .my-nav-link .my-icon.my-img-container{
    width: 0.7rem;
}

header nav ul .my-nav-link .my-icon.my-img-container:active img{
    transform: rotate(180deg);
}

header nav ul .my-nav-link .my-icon.my-img-container:hover img.my-d-inline-block{
    display: none;
}

header nav ul .my-nav-link .my-icon.my-img-container:hover img.my-d-none{
    display: inline-block;
}

header nav ul .my-search-bar .my-nav-link img:active + input{
    display: inline-block;
}



/* * MAIN */
main{
    margin-top: 116px;
}

main p:not(.jumbotron p,#ps-plus p,#ps-now p,#upcoming-games p){
    font-size: 1.1rem;
    color: var(--lighter-main-text-color);
    font-weight: bold;
}

main .jumbotron{
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    color: var(--secondary-text-color);
}

main .jumbotron>*{
    padding-top: 350px;
}

main .jumbotron .my-btn{
    background-color: var(--jumbotron-btn-bg-color);
}

/* ? CAROUSEL SECTION */

/* ? Jumbotron Section */
#carousel .jumbotron{
    background-image: url('../assets/img/jumbo-bg.png');
}


/* ? Carousel-Items Section */
#carousel-items .my-cols-container>*>img{
    border-radius: 1.3rem;
    padding: 0.2rem;
    cursor: pointer;
    border: 3px solid transparent;
}

#carousel-items .my-cols-container>*>img.active,
#carousel-items .my-cols-container>*>img:active{
    border-color: var(--main-btn-bg-color);
}


/* ? PS INTRODUCTION SECTION */
#ps-introduction .my-cols-container img{
    width: 100%;
}

#ps-introduction .my-subtitle{
    font-size: 0.8rem;
    color: var(--main-btn-bg-color);
}

#ps-introduction .my-cols-container .my-col{
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

#ps-introduction .my-cols-container .my-col:not(.my-col.active){
    filter: grayscale(70%) opacity(67%);
}

#ps-introduction .my-cols-container .my-col.active{
    border-bottom-color: var(--main-btn-bg-color);
}

#ps-introduction .my-cols-container .my-col:active{
    border-bottom-color: var(--main-btn-bg-color);
    filter: none !important;
}


/* ? JUMBOTRON SECTION */
main>section.jumbotron{
    background-image: url('../assets/img/it-takes-two-hero-banner-desktop.jpg');
}


/* ? UPCOMING GAMES SECTION*/
#upcoming-games{
    background-color: var(--dark-bg-color);
    color: var(--secondary-text-color);
}

#upcoming-games p{
    font-size: 1.5rem;
}

#upcoming-games .my-cols-container img{
    border-radius: 1rem;
    cursor: pointer;
}


/* ? PS PLUS SECTION */
#ps-plus{
    background-color: var(--ps-plus-section-bg-color);
}

#ps-plus .my-btn{
    background-color: var(--ps-plus-btn-bg-color);
    color: var(--main-btn-bg-color);
    border-color: var(--ps-plus-btn-bg-color)
}


/* ? DISCOUNT SECTION */
#discount img{
    cursor: pointer;
}

#discount img:hover{
    opacity: 0.8;
}


/* ? PS NOW SECTION */
#ps-now{
    background-color: var(--ps-now-bg-color);
    color: var(--secondary-text-color);
}

#ps-now .my-btn{
    background-color: var(--secondary-text-color);
    color: var(--main-text-color);
    border: var(--secondary-text-color);
}




/* * FOOTER */

/* ? SOCIAL MEDIA SECTION */
#social-media img{
    cursor: pointer;
}

#social-media img:hover{
    opacity: 0.8;
}

/* ? UTILITIES SECTION */
#utilities{
    background-color: var(--footer-utilities-section-bg-color);
    color: var(--secondary-text-color);
}

#utilities a{
    color: var(--secondary-text-color);
}

#utilities .my-logo{
    width: 20%;
}

#utilities .my-language .my-icon.my-img-container{
    width: 1.2rem;
}

#utilities img.my-logo{
    width: 100%;
}










/* *------------------------------------------------------------------------------------------------------
RESPONSIVENESS */

/* * SM */
@media screen and (min-width:576px){
    /* * SPECIFIC STYLES */

    /* ? MAIN */
    main .jumbotron>*{
        padding-top: 330px;
    }


    /* ? FOOTER */
    #utilities .my-logo{
        width: 15%;
    }
}





/* * MD */
@media screen and (min-width:768px){
    /* * SPECIFIC STYLES */

    /* ? MAIN */
    main .jumbotron>*{
        padding-top: 300px;
    }

    #ps-introduction .my-img-container{
        width: 50%;
    }
    
    #ps-introduction .my-text-content{
        padding-top: 5rem;
        width: 50%;
    }

    #ps-introduction .my-cols-container>*{
        width: calc(100%/5 - 1.6rem);
        margin: 0 1rem;
    }

    #ps-introduction .my-cols-container img{
        width: 50%;
    }

    #ps-introduction .my-cols-container>*:first-of-type{
        margin-left: 0;
    }

    #ps-introduction .my-cols-container>*:last-of-type{
        margin-right: 0;
    }

    main section.ps-offert .my-img-container{
        width: 40%;
    }
    
    main section.ps-offert .my-text-content{
        width: 60%;
    }


    /* ? FOOTER */
    #utilities .my-logo{
        width: 10%;
    }
}





/* * LG */
@media screen and (min-width:992px){
    /* * SPECIFIC STYLES */

    /* ? HEADER */
    header nav ul .my-search-bar .my-nav-link input{
        left:0;
        width: 100%;
    }

    /* ? MAIN */
    main .jumbotron>*{
        padding-top: 320px;
    }

    #ps-introduction .my-img-container{
        width: 60%;
    }
    
    #ps-introduction .my-text-content{
        width: 40%;
    }

    main section.ps-offert .my-img-container{
        width: 50%;
    }
    
    main section.ps-offert .my-text-content{
        width: 50%;
    }


    /* ? FOOTER */
    #utilities .my-flex-element{
        width: 50%;
    }

    #utilities .my-logo{
        width: 15%;
    }

    #utilities img.my-logo{
        width: 75%;
    }
}