html {
    font-size: 16px;
}

/* UTILITIES */

    /* misc */
.pointer:hover {
    cursor: pointer;
}

    /* typo */
    nav {
        font-family: 'Helvetica', sans-serif ;
    }

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

    .text_underline {
        text-decoration: underline;
    }

    .fsz_1 {
        font-size: 2.5rem;
    }
    .fsz_2 {
        font-size: 2.2rem;
    }
    .fsz_3 {
        font-size: 1.6rem;
    }
    .fsz_3_2 {
        font-size: 1.4rem;
    }
    .fsz_4 {
        font-size: 1.3rem;
    }
    .fsz_4_2 {
        font-size: 1.1rem;
    }
    .fsz_5 {
        font-size: .75rem;
    }

    /* borders */
    .rounded_15 {
        border-radius: 20px;
    }
    /* colors */
        /* backgrounds */
        .bg_1 {
            background-color: black;
        }
        .bg_2 {
            background-color: #363636;
        }
        .bg_3 {
            background-color: #cd3d0f;
        }
        .bg_4 {
            background-color: #2d64e6;
        }
        .bg_5 {
            background-color: #1f1f1f;
        }
        .bg_6 {
            background-color: #bebcbb;
        }
        .bg_7 {
            background-color: #d9dadc;
        }
        .bg_8 {
            background-color: #161c3b;
        }
        .bg_9 {
            background-color: white;
        }
        .bg_10 {
            background-color: #00439c;
        }


    /* sizes */
        /* height */
        .h_icon_1 {
            height: 13px;
        }
        .h-400px {
            height: 400px;
        }
        .maxw_90 {
            max-width: 90%;
        }

        /* width */
        .w_fit {
            width: fit-content;
            width: -moz-fit-content;
        }

        .w_20 {
            width: 20%;
        }

    /* spacing */
        /* padding */
        .py_11px {
            padding-block: 11px;
        }
        .py_3px {
            padding-block: 3px;
        }

        /* margin */
        .mtop_100px {
            margin-top: 100px;
        }

    /* buttons */
    .boo_btn {
        padding: 10px 14px;
        font-weight: bold;
        cursor: pointer;
        transition: all .15s ease-in-out;
        
    }

    .boo_btn:hover {
        transform: scale(0.93);
    }

    .boo_btn.bg_2:hover {
        box-shadow: 0 0 0 2px white, 0 0 2px 3px #363636;
    }
    .boo_btn.bg_3:hover {
        box-shadow: 0 0 0 2px transparent, 0 0 2px 3px #cd3d0f;
    }
    .boo_btn.bg_4:hover {
        box-shadow: 0 0 0 2px white, 0 0 2px 3px #2d64e6;
    }
    .boo_btn.bg_7:hover {
        box-shadow: 0 0 0 2px #d9dadc, 0 0 0 4px currentColor;
    }

    /* flex */
        /* positioning */
        .justify_self_end {
            justify-self: flex-end;
        }
        .justify_self_start {
            justify-self: flex-start;
        }

/* LAYOUT */
    /* header */

    .w_nav_mps {
        width: 140px;
    }

    /* hero */
    .hero {
        background-image: url('../img/jumbo-bg.png');
    }
    .hero,
    .take_two {
        background-size: cover;
        background-position: top;
        height: 592px;
    }

    /* games-list */
    .games_list ul li {
        list-style-type: none;
    }

    .box_outline:hover {
        box-shadow: 0px 0px 2px 3px rgba(0, 0, 250, 0.5);
    }

    .no-border {
        border: none;
    }

    /* this_ps5 */

    .btm_brd {
        border-bottom: 2px solid transparent;
    }
    .btm_brd:hover {
        border-color: #2d64e6;
    }

    .opacity {
        opacity: 0.65;
    }

    .opacity:hover {
        opacity: 1;
    }

    /* take_two */
    .take_two {
        background-image: url('../img/it-takes-two-hero-banner-desktop.jpg');
        background-position: center bottom;
        background-size: cover;
    }

    /* explore_ps4 */
    .explore_ps4 h1 span.position-relative {
        top: -8px;
        left: -11px;
    }

    /* ps_plus */
    .ps_plus,
    .ps_plus .d-md-block img,
    .ps_now,
    .ps_now .d-md-block img
     {
        height: 380px;
    }

    /* socials */
    .container_540px {
        max-width: 540px;
        padding-inline: .75rem;
    }

    /* footer */
    footer ul li {
        display: block;
    }
    footer ul li a {
        color: white;
        text-decoration: none;
    }
    footer ul li a:hover {
        color: cyan;
    }

    /*************
    RESPONSIVENESS
    **************/
    @media screen and (min-width:768px) {
        .ps5_thumb {
            transform: translateY(-50px);
        }
    }