/* GENERAL STYLES */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 40px;
}

.sony_logo {
    height: 11px;
}

/* SONY LOGO FIXED NAV */
.fixed-top-sony {
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: black;
    margin: 0;
    padding-right: 0;
}

.navbar-brand.sony {
    margin: 0;
    padding-right: 0;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
}

/* PS5 SITE NAV */
.fixed-top-nav {
    position: fixed;
    top: 36px;
    right: 0;
    left: 0;
    z-index: 1030;
    font-family: Helvetica, Arial, sans-serif;
}

/* UTILITIES */
.cursor_pointer {
    cursor: pointer;
}

.round_site_btn {
    border-radius: 30px;
    border: 3px solid transparent;
}

.round_site_btn:hover {
    box-shadow: inset 0 0 10px #ffffff;
}

.round_site_btn.light:hover {
    box-shadow: inset 0 0 10px #000000;
}

.padding_top_112 {
    padding-top: 112px;
}

.orange_btn {
    background-color: #CD3D0F;
    color: white;
}

.grey_btn {
    background-color: #363636;
}

.darkgrey_background {
    background-color: #1F1F1F;
}

.lightgray_background {
    background-color: #BEBCBB;
}

.darkblue_background {
    background-color: #161C3B;
}

.bluebackground {
    background-color: #00439C;
}

.blue {
    color: #0876CF;
}

.lightgrey_text {
    color: #787878;
}

.font_size_20 {
    font-size: 20px;
}

.border_bottom_transparent {
    border-bottom: 3px solid transparent;
}

.border_bottom_transparent:hover {
    border-bottom: 3px solid #0876CF;
    transition: border 0.4s linear;
}

/* MAIN CONTENT */
.jumbo_container {
    height: 783px;
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.returnal_background {
    background-image: url(../img/jumbo-bg.png);
    background-position-y: 111px;
}

.it_takes_two_background {
    background-image: url(../img/it-takes-two-hero-banner-desktop.jpg);
    background-position-y: 0px;
    height: 662px;
}

.returnal_logo {
    width: 56%;
}

.absolute_container_returnal {
    top: 294px;
}

.it_takes_two_logo {
    width: 63%;
}

.absolute_container_it_takes_two {
    top: 54px;
}

/* Since there were many img groups who needed 100% width I grouped them all together here */
.container_thumb img,
.product_image img,
.new_games img,
.playstation_4 img,
.ps_plus img,
.ps_plus_banner img,
.ps_store img,
.ps_now img,
.social_media img {
    width: 100%;
}

.container_thumb img {
    border-radius: 20px;
    padding: 2px;
    border: 3px solid transparent;
}

.container_thumb img:hover {
    cursor: pointer;
    border: 3px solid #0876CF;
    transition: border 0.4s linear;
}

.playstation_5 h2,
.playstation_4 h2,
.ps_store h2 {
    font-size: 34px;
}

.product_gallery {
    cursor: pointer;
    border-bottom: 3px solid transparent;
    text-align: center;
}

.product_gallery img {
    opacity: 0.5;
    width: 75%;
}

.product_gallery:hover img {
    opacity: 1;
    transition: opacity 0.4s linear;
}

.new_games img {
    border-radius: 15px;
}

.ps_now .logo {
    width: 60%;
}

/* SOCIAL */
.container_social {
    max-width: 540px;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* FOOTER */
footer .footer_logo {
    width: 100px;
}

footer .sie_logo {
    width: 170px;
}

footer ul {
    list-style: none;
    line-height: 35px;
}

footer a {
    text-decoration: none;
    color: white;
}

footer span a {
    text-decoration: underline;
}

footer a:hover {
    color: blue;
}