@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
}

:root {
    --thems: black;
}

/* Navbar */
nav {
    background-color: var(--thems);
}

section#header {
    margin-top: 3.5rem;
}

.dropdown-item:hover {
    background-color: var(--thems);
    color: white;
}

/* Login */
section#login {
    padding: 4.5rem 2rem;
}

.btn-login {
    background-color: var(--thems);
    color: white;
}

.btn-login:hover {
    border: 1px solid var(--thems);
}

/* Home */
.promo-product {
    text-decoration: line-through;
}

.btn-cs {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--thems);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 100%;
    font-size: 2rem;
    border: 0;
    z-index: 999;
    border: 2px solid white;
}

.btn-cs:hover {
    background-color: white;
    color: var(--thems);
    border: 2px solid var(--thems);
}

/* About */
section#about {
    padding-top: 3rem;
}

.header-about {
    background-color: var(--thems);
}

.text-welcome {
    color: white;
}

section#background-about {
    background-image: url('../assets/img/about.gif');
    margin-top: 30rem;
    height: 100vh;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Products */
section#products {
    margin: 4rem 0;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: #0d6efd;
}

/* Img Details */
section#img-details,
section#about3 {
    margin: 4.5rem 2rem;
}

.img-details,
.img-game,
.img2,
.img3,
.img-gender {
    width: 100%;
}

.img-details:hover {
    cursor: pointer;
}

/* Cart */
section#cart {
    margin: 4.5rem 2rem;
}

.card-product:hover,
.img-gender,
.img2,
.img3 {
    box-shadow: 5px 10px 18px #888888;
}

/* Account */
section#account,
section#addresses {
    padding: 4.5rem 2rem 2rem 2rem;
}

.img-profile {
    height: 50%;
    border-radius: 100%;
}

.form-select {
    cursor: pointer;
}

/* Game */
section#games {
    margin-top: 2rem;
}

.card-game {
    cursor: pointer;
    padding: 5rem;
}

.card-game:hover {
    box-shadow: 5px 10px 18px #888888;
}

/* Footer */
footer {
    background-color: black;
    color: white;
}

footer ul li a {
    color: white;
}

.icons-contact {
    font-size: 1.5rem;
    margin: 0 0.2rem;
}

.footer-address {
    margin-top: 30rem;
}