style.css

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;800;900&display=swap');

body {
    margin: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Inconsolata', sans-serif;
}

section[aria-label="hero-home"] {
    width: 100%;
    height: 60rem;
    background-image: url(./Assets/Photos/futuristic-bg.png);
}

.hero-home {
    width: 90%;
    margin: 0rem auto;
    padding-top: 3rem;
}

.navbar {
    width: 100%;
    display: flex;
    position: relative;
}

.logo {
    position: absolute;
    top: 0.75rem;
}

.navbar-menu {
    width: 25%;
    min-width: 35rem;
    max-width: 40rem;
    margin: 0 auto;
}

.menu {
    display: flex;
    list-style: none;
    font-weight: 400;
    font-size: 1.5rem;
}

.menu-item {
    margin-right: 1.75rem;
}

.menu-item:nth-last-child(1) {
    margin: 0;
}

.menu-item:hover {
    color: #F4694C;
    /* font-size: 2rem; */
    cursor: pointer;
}

.sign-in {
    position: absolute;
    right: 0;
}

.btn {
    padding: 1.5rem 2.5rem;
    position: relative;
    top: -1.5rem;
    font-weight: 600;
    font-size: 1.5rem;
    background-color: #F4694C;
    color: #fff;
    border: none;
}

.hero-front {
    width: 100%;
    position: relative;
    display: flex;
    padding-top: 2rem;
}

.hero-front-text {
    width: 50%;
}

.hero-front-heading {
    font-weight: 900;
    font-size: 5.5rem;
}

.hero-front-description {
    font-weight: 500;
    font-size: 1.5rem;
    padding-bottom: 5rem;
}

.btn2 {
    margin-right: 3rem;
}

.btn3 {
    border: 2px solid #fff;
    background: none;
}

.hero-front-img {
    position: relative;
    width: 50%;
    background: no-repeat center url(./Assets/Icons/playButton.svg);
}

.hero-front-img-text {
    width: 70%;
    margin-left: auto;
    display: flex;
    position: absolute;
    bottom: 2.5%;
    right: 25%;
}

.hero-front-img-text>img {
    width: 100px;
}

.hero-front-img-description {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 1rem;
    width: 75%;
}

section[aria-label="hero-games"] {
    background-color: #fff;
    width: 100%;
    color: #000;
    padding-bottom: 10rem;
}

.hero-games {
    width: 80%;
    margin: 0 auto;
}

.hero-games-container1 {
    width: 70%;
    margin: 0 auto;
}

.hero-games-container1>h1 {
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 5rem;
    padding: 5rem 0;
}

.hero-games-container2 {
    display: flex;
}

.box {
    width: 23%;
    height: 28rem;
    margin: auto;
    position: relative;
    color: #fff;
}

.content {
    width: 50%;
    margin-left: 1rem;
}

.download {
    width: 50%;
}

.download-btn {
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1.25rem;
    background-color: #F4694C;
    color: #fff;
    border: none;
    position: relative;
    top: 2.25rem;
}

.game-box1 {
    background: no-repeat center url(./Assets/Photos/image\ 2.png);
    background-size: 100% 100%;
}

.game-content {
    width: 100%;
    height: 8rem;
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(10px);
    display: flex;
}

.game-box2 {
    background: no-repeat center url(./Assets/Photos/image\ 4.png);
    background-size: 100% 100%;
}

.game-box3 {
    background: no-repeat center url(./Assets/Photos/image\ 3.png);
    background-size: 100% 100%;
}

.game-box4 {
    background: no-repeat center url(./Assets/Photos/Rectangle\ 56.png);
    background-size: 100% 100%;
}

.hero-games-container3 {
    padding-top: 7rem;
    width: 100%;
    height: 40rem;
    display: flex;
}

.bg-game-img {
    width: 49%;
    background: no-repeat center url(./Assets/Photos/Rectangle\ 57.png);
    margin-right: auto;
}

.bg-game-text {
    width: 47%;
}

.hero-bg-heading {
    font-weight: 900;
    font-size: 4rem;
    margin: 0 auto;
    padding: 2.5rem 0;
}

.hero-bg-description {
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.btn4 {
    background-color: #fff;
    border: 2px solid #F4694C;
    color: #F4694C;
}

.bg-button {
    position: relative;
    top: 1rem;
}

.hero-games-container4 {
    width: 100%;
    padding-top: 7rem;
    position: relative;
}

.games-of-the-week {
    margin-top: 3rem;
}

.weekly-games {
    display: flex;
}

.weekly-games-heading {
    width: 60%;
    margin-right: auto;
    position: relative;
    margin-right: auto;
}

.weekly-games-heading>h1 {
    font-weight: 700;
    font-size: 4rem;
    text-align: left;
    margin: 0;
}

.next-container {
    width: 20%;
    position: relative;
}

.arrow-container {
    display: flex;
    position: absolute;
    top: 1.5rem;
    right: 0;
}

.left-arrow {
    height: 80px;
    width: 80px;
    background: no-repeat center/50% url(./Assets/Icons/leftArrow.svg);
    background-color: #e6c2bc;
    margin-right: 1rem;
}

.right-arrow {
    height: 80px;
    width: 80px;
    background: no-repeat center/50% url(./Assets/Icons/rightArrow.svg);
    background-color: #F4694C;
}

.conainer {
    display: flex;
    width: 100%;
}

.sub-div {
    width: 47%;
    min-height: 25rem;
    margin-right: auto;
    display: flex;
    margin-bottom: 4rem;
}

.sub-div:nth-child(even) {
    margin-right: 0;
}

h2 {
    font-weight: 700;
    font-size: 2.5rem;
}

.sub-img {
    width: 50%;
}

.img1 {
    background: no-repeat center url(./Assets/Photos/Rectangle\ 75.png);
    background-size: 100% 100%;
}

.img2 {
    background: no-repeat center url(./Assets/Photos/Rectangle\ 76.png);
    background-size: 100% 100%;
}

.img3 {
    background: no-repeat center url(./Assets/Photos/Rectangle\ 77.png);
    background-size: 100% 100%;
}

.img4 {
    background: no-repeat center url(./Assets/Photos/Rectangle\ 78.png);
    background-size: 100% 100%;
}

button {
    cursor: pointer;
}

.sub-text-div {
    width: 50%;
    margin-left: 2rem;
}

.game-genre {
    font-weight: 600;
    font-size: 1.5rem;
    color: #F4694C;
}

section[aria-label="most-played-games"] {
    width: 100%;
    min-height: 70rem;
    background: no-repeat center url(./Assets/Icons/GAMES\ OF\ THE\ WORLD.svg);
    background-position: top 45% right 0%;
    margin: 0;
}

.mp-game-heading {
    font-weight: 900;
    font-size: 4.5rem;
    text-align: center;
    width: 50%;
    margin: 0 auto;
    padding: 5rem 0;
}

.most-played-games {
    width: 80%;
    margin: 0 auto;
}

.mp-games-img {
    display: flex;
    width: 100%;
}

.mpg-sub {
    width: 40%;
    margin-right: auto;
    background: no-repeat center url(./Assets/Photos/Rectangle\ 17.png);
    background-size: 90% 80%;
}

.mpg-sub2 {
    width: 57%;
}

.mpg-description {
    font-weight: 500;
    font-size: 1.5rem;
    text-align: left;
    margin: 0;
    padding: 2rem 0;
}

img[alt="gm-img"] {
    width: 36rem;
}

.mpg-imgages {
    width: 100%;
    display: flex;
    position: relative;
    padding-top: 2rem;
}

.gm-img1 {
    width: 51%;
    background: no-repeat center url(./Assets/Photos/Rectangle\ 18.png);
    background-size: 100% 100%;
    margin-right: auto;
}

.gm-img2 {
    width: 47%;
    height: 500px;
    background: no-repeat center bottom url(./Assets/Photos/Rectangle\ 90.png);
    background-size: 100% 50%;
}

section[aria-label="hero-footer"] {
    width: 100%;
}

.hero-footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.hero-footer>article {
    width: 100%;
    min-height: 32rem;
    background: no-repeat center linear-gradient(to bottom, rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0.52)), url(./Assets/Photos/Rectangle\ 606.png);
    background-size: 100%;
    margin-bottom: 5rem;
}

.hero-footer-heading {
    width: 50%;
    font-weight: 800;
    font-size: 4.5rem;
    margin: 0 auto;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.hero-footer-description {
    width: 50%;
    margin: 0 auto;
    font-weight: 400;
    font-size: 1.5rem;
}

.f-btn {
    position: relative;
    top: 1rem;
    margin: 4rem 0;
}

.footer {
    width: 80%;
    margin: 0 auto;
    display: flex;
}

.footer-logos {
    width: 20%;
}

img[alt="f-logo"] {
    padding-top: 2rem;
}

.game-footer-text {
    font-weight: 500;
    font-size: 1.25rem;
}

.socials {
    margin-right: 1rem;
}

.fbar {
    display: flex;
    width: 80%;
    margin-bottom: 3rem;
}

.footer-list {
    list-style: none;
    width: 25%;
}

.list-head {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 auto;
}

.other {
    font-weight: 400;
    font-size: 1.5rem;
    margin: 1.5rem 0;
    color: rgb(163, 159, 159);
}

hr {
    margin: 0;
    border-color: darkslategrey;
}

.empty-fbar {
    background-color: #11111e;
    height: 10vh;
    min-height: 100px;
    margin: 0;
}