/* Constant */

        body{
            margin: 0%;
            background: #F4F4F4;
            background: linear-gradient(to right, #F4F4F4 0%, #E2E0E0 50%, #F4F4F4 100%);
            font-family: 'Open Sans', sans-serif;
        }

        /* Navbar */

        .navbar{
            height: 120px;
            display: flex;
            width: 100%;
            background-color: #1F1E1E;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            position: fixed;
            top: 0%;
            padding-bottom: 10px;
            z-index: 50;
            opacity: 0.96;
        }
                        .navbarTop{
                            width: 95%;
                            height: 50%;
                            display: flex;
                            justify-content: space-between;
                            /* background-color: brown; */
                        }
                        .titleNav{
                            color: rgb(139, 139, 139);
                            font-size: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: flex-end;
                            text-decoration: none;
                        }
                        .titleNav:hover{
                            color: white;
                            cursor: pointer;
                        }
                        .navListContainer{
                            display: flex;
                            justify-content: flex-end;
                            width: 600px;
                            height: 60%;
                            align-items: flex-end;
                            box-sizing: border-box;
                            /* background-color: thistle; */
                        }
                        .searchbarContainer{
                            display: flex;
                            width: 96%;
                            text-decoration: none;
                            /* background-color: brown; */
                        }

                        /* .search{
                            height: 100%;
                            width: 10%;
                            font-size: 20px;
                        } */

                        .textbox{
                            height: 35px;
                            width: 100%;
                            border-radius: 25px;
                            padding-left: 20px;
                            background-color: rgb(22, 22, 22);
                            color: white;
                            outline: none;
                            
                        }
                        /* .navList{
                            text-decoration: none;
                            list-style: none;
                            font-size: 23px;
                            color: rgb(139, 139, 139);
                            align-items: flex-end;
                            display: flex;
                            justify-content: flex-end;
                        } */

        /* footer */

        .footerContainer{
            height: 250px;
            width: 100%;
            box-sizing: border-box;
            padding-left: 20px;
            background-color: rgb(22, 22, 22);
            color: white;
            outline: none;
        }

        .searchResultsContainer{
            background-color: black;
            width: 93.5%;
            position: relative;
        }
        .searchResults{
            width: 100%;
            height: auto;
            max-height: 500px;
            position: absolute;
            overflow-y: scroll;
        }
        .displayGameResults{
            display: flex;
            box-sizing: border-box;
            align-items: center;
            padding-left: 10px;
            height: 50px;
            width: 100%;
            background-color: rgb(60, 67, 80);
            color: rgb(255, 255, 255);
            border: 1px solid rgb(185, 196, 211);
            z-index: 60;
        }
        .displayGameResults:hover{
            background-color: rgb(185, 196, 211);
            color: rgb(60, 67, 80);
        }

        .navList{
            text-decoration: none;
            list-style: none;
            font-size: 23px;
            color: rgb(139, 139, 139);
            align-items: flex-end;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            margin-top: 50px;
            flex-direction: column;
        }
        .navList:hover{
            color: white;
            cursor: pointer;
        }

                        .footerInnerDivTop{
                            display: flex;
                            justify-content: space-around;
                            /* background-color: blue; */
                            width: 100%;
                            height: 80%;
                        }

                        .footerTop1{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            padding-top: 25px;
                        }

                        .footertitle{
                            padding-bottom: 10px;
                            text-decoration: underline;
                            text-underline-offset: 5px;
                        }

                        .footertexts{
                            text-decoration: none;
                            color: rgb(139, 139, 139);
                            font-size: 20px;
                        }
                        a.footertexts:hover{
                            color: white;
                        }
                        .footerInnerDivBottom{

                        }

                        .footerCopyRight{
                            font-size: 15px;
                            height: 20%;
                        }









        /* ### Home Page ### */

        /* Banner */

.bannerBackground{
    width: 100%;
    height: 520px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 145px;
    /* background-color: tomato; */
}
        .bannerColumns{
            width: auto;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
                .bannerContainer{
                    height: 100%;
                    width: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
                        .bannerItemContainer{
                            height: 400px;
                            width: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            overflow: hidden;
                            -webkit-box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.57); 
                            box-shadow: 2px 2px 7px 1px rgba(0, 0, 0, 0.57);
                        }
                        .bannerItemContainer:hover{
                            box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.70);
                            cursor: pointer;
                        }
                                .bannerItemBackground{
                                    height: auto;
                                    width: 100%;
                                    filter: blur(1rem);
                                    position: absolute;
                                    z-index: 3
                                }
                                .bannerItem{
                                    /* background-color: black; */
                                    width: auto;
                                    /* width: 50px; */
                                    height: 100%;
                                    z-index: 5;
                                    color: white;
                                    font-size: 40px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }

                        .bannerTextContainer{
                            display: flex;
                            flex-direction: column;
                            justify-content: left;
                        }
                                .bannerMainText{
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: flex-start;
                                    width: 100%;
                                    height: 20px;
                                    font-size: 25px;
                                    margin-top: 10px;
                                    text-decoration: none;
                                    color: black;
                                    /* background-color: blue; */
                                }
                                .bannerExploreText{
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: flex-start;
                                    width: 100%;
                                    height: 20px;
                                    font-size: 20px;
                                    margin-top: 10px;
                                    text-decoration: none;
                                    color: black;
                                    /* background-color: blue; */
                                }
        /* Top Sellers */

        .topSellersWordSpacing{
            display: flex;
            justify-content: flex-start;
            height: 70px;
            font-size: 35px;
            align-items: flex-end;
            /* background-color: green; */
            padding-left: 35px;
            margin-bottom: 10px;
        }
        
        .topSellerWords{
            text-decoration: none;
            color: black;
            /* background-color: thistle; */
        }
        .topSellerContainer{
            display: flex;
            flex-direction: row;
            color: white;
            font-size: 50px;
            justify-content: space-around;
            height: 300px;
            align-items: center;
            /* background-color: brown; */
            padding-left: 20px;
            padding-right: 20px;

        }
        .topSellerItem{
            width: 23%;
            height: 100%;
            justify-content: center;
            display: flex;
            align-items: flex-end;
            padding-left: 5px;
            padding-right: 5px;
            -webkit-box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.57); 
            box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.57);
            position: relative;
            z-index: 0;
            overflow: hidden;
        }
        .topSellerItem:hover{
            width: 28%;
            height: 105%;
            box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.70);
            cursor: pointer;
        }
        .imagetopSellerItem{
            height: 100%;
        }
        .opacityTopSellerItem{
            position: absolute;
            background-color: black;
            opacity: 70%;
            z-index: 5;
            bottom: 0%;
            height: 70px;
            width: 100%;
        }

        .titleTopSellerItem{
            position: absolute;
            z-index: 10;
            bottom: 0%;
            /* padding-left: 10px; */
            padding-bottom: 5px;
        }



                /* New Releases */

        .newReleasesContainer{
            width: 100%;
            height: 450px;
            margin-top: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

                    .newReleases{
                        width: 96%;
                        height: 450px;
                        display: flex;
                        background-color: #fff;
                        position: relative;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        -webkit-box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.57); 
                        box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.57);
                    }
                    .newReleasesItem{
                        display: flex;
                        width: 25%;
                        height: 450px;
                        color: white;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                    }
                    .imageNewReleasesItem{
                        height:100%;
                    }
                    .opacityNewReleaseItem{
                        position: absolute;
                        background-color: black;
                        opacity: 65%;
                        width: 100%;
                        height: 100%;
                        z-index: 10;
                    }
                    .opacityNewReleaseItem:hover{
                        /* filter:blur(5rem); */
                        background-color: black;
                        opacity: 45%;
                        cursor: pointer;
                    }
                    .newReleasesText{
                        position: absolute;
                        color: white;
                        z-index: 20;
                        font-size: 135px;
                    }
                    .newReleasesBottomSpace{
                        height: 75px;
                    }









                
                /* ### Item Page ### */

        .banner{
            height: 500px;
            width: 100%;
            /* background-color: black; */
            color: white;
            justify-content: center;
            align-items: center;
            display: flex;
            margin-top: 130px;
            position:relative;
        }
                .bannerImageContainer{
                    height: 500px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                }
                        .bannerBackgroundImage{
                            height: auto;
                            width: 100%;
                            filter: blur(1rem);
                            position: absolute;
                            z-index: 3
                        }
                        .bannerImage{
                            height: 100%;
                            width: auto;
                            z-index: 5
                        }
                .bannerOpacity{
                    background-color: black;
                    position: absolute;
                    opacity: 65%;
                    width: 100%;
                    height: 100%;
                    z-index: 10;
                }
                .bannerTitleLG{
                    font-size: 80px;
                    position: absolute;
                    z-index: 15;
                    width: 70%;
                }
                .bannerTitleMD{
                    font-size: 60px;
                    position: absolute;
                    z-index: 15;
                    width: 70%;
                }
                .bannerTitleSM{
                    font-size: 40px;
                    position: absolute;
                    z-index: 15;
                    width: 70%;
                }

        .screenshotContainer{
            background-color: black;
            display: flex;
            /* justify-content: space-around; */
            height: auto;
            max-height: 500px;
            overflow: hidden;
            overflow-x: scroll;
        }
                .bannerScreenshots{
                    height: 300px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    margin-right: 25px;
                }
                        .bannerScreenshotsBackground{
                            height: auto;
                            width: 100%;
                            filter: blur(1rem);
                            position: absolute;
                            z-index: 3
                        }
                        .bannerScreenshotsImage{
                            height: 100%;
                            width: auto;
                            z-index: 5;
                        }
        



                /* Info Display */

        /* .mainTitle{
            height: 150px;
            display: flex;
            align-items: center;
            font-size: 60px;
            padding-left: 70px;
            
        } */
.displayContainer{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
        .mainDisplay{
            display: flex;
            height: 500px;
            width: 100%;
            flex-direction: row;
            justify-content: center;
            height: auto;
            /* background-color: black; */
        }
        .description{
            /* background-color: pink; */
            width: 100%;
            max-height: 500px;
            justify-content: center;
            text-align: left;
            display: flex;
            margin-left: 20px;
            
        }
        .gameInfoContainer{
            /* background-color: red; */
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center;
            flex-direction: column;
            overflow-y: scroll;
            /* margin-right: 20px; */
        }
        .infoDescription{
            font-size: 20px;
            display: flex;
            margin-left: 50px;
            justify-content: left;
            overflow: scroll;
        }
        .ratingSection{
            display: flex;
            flex-direction: row;
        }
        .gameInfo{
            font-size: 45px;
        }
        .esrb{
            font-size: 30px;
            padding-bottom: 20px;
        }
        .ratings{
            font-size: 40px;
            padding-bottom: 20px;
        }
        .gameGenre{
            font-size: 30px;
        }
        .gamePlatformContainer{
            padding-top: 30px;
            width: auto;
            max-width: 300px;
            font-size: 30px;
        }
        .gamePlatform{
            font-size: 23px;
        }

        .similar{
            width: 100%;
            height: 400px;
            /* background-color: gray; */
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
                    .similarGame{
                        height: 350px;
                        width: 300px;
                        background-color: black;
                    }
                    .similarTitleContainer{
                        width: 100%;
                        height:50px;
                        /* background-color: gray; */
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                    }
                    .similarGameTitle{
                        font-size: 30px;
                        width: 300px;
                        /* color: white; */
                    }







                    /* ### MEDIA QUERIES ### */


        @media all and (max-width: 1200px){

            .navListContainer{
                width: 65%;
            }
            /* .navList{
                font-size: 20px;
            } */
            .bannerBackground{
                flex-direction: row;
                margin-top: 50px;
                height: 450px;
            }
            .bannerItemBackground{
                height: 100px;
            }
            .bannerItem{
                width: 90%;
                height: 200px;
                margin: 10px;
                
            }
            .bannerTextContainer{
                margin-left: 8px;
                width: 100%;
                /* background-color: brown; */
            }
            .bannerItemContainer{
                height: 200px;
                width: 100%;
            }
            .bannerMainText{
                font-size: 20px;
            }
            .topSellerItem:hover{
                width: 400px;
                height: 105%;
                box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.70);
                cursor: pointer;
            }
            .topSellersWordSpacing{
                justify-content: center;
            }
            .topSellers{
                margin-top: 0px;
            }
            .topSellerContainer{
                flex-direction: column;
                height: 800px;
                width: 100%;
            }
            .topSellerItem{
                height: 465px;
                width: 300px;
                margin: 1px;
                justify-content: flex-start;
                align-items: flex-end;
                /* padding-left: 20px; */
                /* padding-bottom: 20px; */
                background-color: black;
                margin-bottom: 30px;
            }
            .newReleasesContainer{
                width: 90%;
                padding-left: 7%;
            }
            .newReleasesItem{
                width: 92%;
            }
            .newReleasesText{
                font-size: 50px;
            }
            .footertexts{
                font-size: 18px;
            }
            .mainDisplay{
                flex-direction: column;
            }
            .description{
                margin-bottom: 100px;
                margin-left: 0px;
            }
        }