@import url("header.css");
@import url("video.css");
@import url("carousel.css");
@import url("performance.css");
@import url("geforce-nvidia.css");
@import url("memory.css");
@import url("speed.css");
@import url("upgrade.css");
@import url("cooling.css");
@import url("game-pass.css");
@import url("planet9.css");
@import url("guarantee.css");
@import url("specs.css");

/* Fontes - TTSquares */
@font-face {
    font-family: "tt-squaresblack";
    src: url("../assets/webfonts/ttsquares-black-webfont.woff2") format("woff2"),
        url("../assets/webfonts/ttsquares-black-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tt-squaresbold";
    src: url("../assets/webfonts/ttsquares-bold-webfont.woff2") format("woff2"),
        url("../assets/webfonts/ttsquares-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tt-squareslight";
    src: url("../assets/webfonts/ttsquares-light-webfont.woff2") format("woff2"),
        url("../assets/webfonts/ttsquares-light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tt-squaresregular";
    src: url("../assets/webfonts/ttsquares-regular-webfont.woff2") format("woff2"),
        url("../assets/webfonts/ttsquares-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "acerfoco-regular";
    font-display: auto;
    font-weight: 400;
    font-style: normal;
    src: local("acerfoco"), url("../assets/webfonts/acerfoco-regular-webfont.woff2") format("woff2"),
        url("../assets/webfonts/acerfoco-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: "acerfoco-bold";
    font-display: auto;
    font-weight: 700;
    font-style: normal;
    src: local("acerfoco"), url("../assets/webfonts/acerfoco-semibold-webfont.woff") format("woff");
}
@font-face {
    font-family: "acerfoco-black";
    font-display: auto;
    font-weight: 900;
    font-style: normal;
    src: local("acerfoco"), url("../assets/webfonts/acerfoco-black-webfont.woff") format("woff");
}

body {
    font-family: "tt-squaresregular";
    font-size: 18px;
    color: #ffffff;
    overflow-x: hidden;
    margin: 0 auto;
    background-color: #000000;
}
img {
    max-width: 100%;
}
.z-10 {
    position: relative;
    z-index: 10;
}
@media (min-width: 1025px) {
    .w-lg-75 {
        width: 75% !important;
    }
}
/* Títulos e fontes*/
h1,
h2,
h3,
h4,
h5 {
    font-family: "tt-squaresblack", sans-serif;
    color: #ed1c2c;
}
h1 {
    font-size: 80px !important;
    background: #800000;
    background: linear-gradient(
        to bottom right,
        #800000 0%,
        #ed1c2c 30%,
        #ed1c2c 70%,
        #800000 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 5px 5px 33px rgba(0, 0, 0, 0.3);
}
h2 {
    font-size: 40px !important;
}
@media (max-width: 1200px) {
    h1 {
        font-size: 64px !important;
    }
}
@media (max-width: 450px) {
    h1 {
        font-size: 44px !important;
    }
}
h4 {
    font-family: "tt-squaresblack";
    color: #76b900;
}
p {
    font-family: "tt-squaresregular";
    font-size: 24px !important;
}
.font1_regular {
    font-family: "tt-squaresregular";
}
.font1_semi {
    font-family: "acer_focosemibold";
}
.font1_black {
    font-family: "tt-squaresblack";
}
.font1_light {
    font-family: "tt-squareslight";
}
.font1_bold {
    font-family: "tt-squaresbold";
}
.font-acer-bold {
    font-family: "acerfoco-bold";
}
.font1-color1 {
    color: #ed1c2c;
}
.font1-color2 {
    color: #ffffff;
}
.font1-color3 {
    color: #76b900;
}
.font1-color4 {
    color: #666666;
}

.font-size-xxxSmall {
    font-size: 10px !important;
}
.font-size-xxSmall {
    font-size: 10px !important;
}
.font-size-xSmall {
    font-size: 10px !important;
}
.font-size-small {
    font-size: 14px !important;
}
.font-size-regular {
    font-size: 18px !important;
}
.font-size-medium {
    font-size: 25px !important;
}
.font-size-large {
    font-size: 32px !important;
}
.font-size-xLarge {
    font-size: 42px !important;
}
.font-size-xxLarge {
    font-size: 55px !important;
}
.font-size-xxxLarge {
    font-size: 65px !important;
}
.font-size-10 {
    font-size: 10px !important;
}
.font-size-12 {
    font-size: 12px !important;
}
.font-size-14 {
    font-size: 14px !important;
}
.font-size-18 {
    font-size: 18px !important;
}
.font-size-20 {
    font-size: 20px !important;
}
.font-size-30 {
    font-size: 30px !important;
}
.font-size-35 {
    font-size: 35px !important;
}
.font-size-40 {
    font-size: 40px !important;
}
.font-size-45 {
    font-size: 45px !important;
}

@media (max-width: 768px) {
    h2 {
        font-size: 1.5rem !important;
    }
    h3 {
        font-size: 1.3rem !important;
    }
    h4,
    h5 {
        font-size: 1.2rem !important;
    }
    p {
        font-size: 1rem !important;
    }
    .title-large {
        font-size: 1.2rem !important;
    }
}
@media (min-width: 540px) {
    .font-size-sm-35 {
        font-size: 35px !important;
    }
    .font-size-sm-40 {
        font-size: 40px !important;
    }
}
@media (min-width: 768px) {
    .font-size-md-35 {
        font-size: 35px !important;
    }
    .font-size-md-xxxSmall {
        font-size: 10px !important;
    }
    .font-size-md-xxSmall {
        font-size: 10px !important;
    }
    .font-size-md-xSmall {
        font-size: 12px !important;
    }
    .font-size-md-small {
        font-size: 14px !important;
    }
    .font-size-md-regular {
        font-size: 18px !important;
    }
    .font-size-md-medium {
        font-size: 25px !important;
    }
    .font-size-md-large {
        font-size: 32px !important;
    }
    .font-size-md-xLarge {
        font-size: 42px !important;
    }
    .font-size-md-xxLarge {
        font-size: 55px !important;
    }
    .font-size-md-xxxLarge {
        font-size: 65px !important;
    }
}
@media (min-width: 992px) {
    .font-size-lg-xxxSmall {
        font-size: 10px !important;
    }
    .font-size-lg-xxSmall {
        font-size: 10px !important;
    }
    .font-size-lg-xSmall {
        font-size: 12px !important;
    }
    .font-size-lg-small {
        font-size: 14px !important;
    }
    .font-size-lg-regular {
        font-size: 18px !important;
    }
    .font-size-lg-medium {
        font-size: 25px !important;
    }
    .font-size-lg-large {
        font-size: 32px !important;
    }
    .font-size-lg-xLarge {
        font-size: 42px !important;
    }
    .font-size-lg-xxLarge {
        font-size: 55px !important;
    }
    .font-size-lg-xxxLarge {
        font-size: 65px !important;
    }
}
@media (min-width: 1200px) {
    .font-size-xl-xxxSmall {
        font-size: 10px !important;
    }
    .font-size-xl-xxSmall {
        font-size: 10px !important;
    }
    .font-size-xl-xSmall {
        font-size: 12px !important;
    }
    .font-size-xl-small {
        font-size: 14px !important;
    }
    .font-size-xl-regular {
        font-size: 18px !important;
    }
    .font-size-xl-medium {
        font-size: 25px !important;
    }
    .font-size-xl-large {
        font-size: 32px !important;
    }
    .font-size-xl-xLarge {
        font-size: 42px !important;
    }
    .font-size-xl-xxLarge {
        font-size: 55px !important;
    }
    .font-size-xl-xxxLarge {
        font-size: 65px !important;
    }
}
/* imagens */

.max-w-120 {
    max-width: 120%;
}
.max-w-85 {
    max-width: 85%;
}
.max-w-75 {
    max-width: 75%;
}
/* espaçamentos */
.justify-content-evenly {
    justify-content: space-evenly;
}
.gap-3 {
    gap: 3rem;
}
/* keyboard */
@media (min-width: 576px) {
    .keyboard-bg {
        background-image: linear-gradient(to top, transparent 70%, rgb(0, 0, 0)),
            linear-gradient(to bottom, transparent 40%, rgb(0, 0, 0)),
            url("../assets/images/bg-stars.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}
/* footer */
#acer-footer {
    background: #ed1c2c;
    text-align: center;
    padding: 0;
}
#acer-footer .container {
    padding: 32px;
}
@media (min-width: 992px) {
    #acer-footer .container {
        padding: 42px;
    }
}
#acer-footer .logo {
    margin-bottom: 30px;
}
@media (min-width: 992px) {
    #acer-footer .logo {
        float: left;
    }
}
#acer-footer p {
    font-family: "tt-squaresblack";
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 0;
}
#acer-footer p br {
    display: block !important;
}
@media (min-width: 992px) {
    #acer-footer p {
        float: right;
        font-size: 30px;
        line-height: 30px;
        text-align: right;
    }
}