@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Raleway:wght@400;500;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/pricedown');

@font-face {
        font-family: 'Pricedown';
        src: url('https://assets.codepen.io/t-1003/pricedown.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: 'Bank Gothic';
        src: url('https://db.onlinewebfonts.com/t/157c6cc36dd65b1b2adc9e7f3329c761.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
}

html {
        font-size: 10px;
        overflow-x: hidden;
}
body {
        background: linear-gradient(135deg, 
                rgba(26, 26, 46, 1) 0%, 
                rgba(15, 15, 30, 1) 50%, 
                rgba(10, 10, 20, 1) 100%);
        overflow-x: hidden;
        position: relative;
}
body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('./images/gta-sa-bg.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(3px);
        z-index: -2;
        opacity: 0.8;
        will-change: opacity;
}
body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 10, 20, 0.7);
        z-index: -1;
}
@keyframes fadeInBackground {
        to {
                opacity: 1;
        }
}
section {
        padding: 100px 0;
}
@media only screen and (max-width: 767px) {
        section {
                padding: 50px 0;
        }
}
.container {
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;
}
:root {
        --green-1: #ff6ead;
        --green-2: #ffa500;
        --lightGreen-1: #1a1a2e;
        --lightGreen-2: rgba(26, 26, 46, 0.85);
        --black-1: #0f0f1e;
        --black-2: #16213e;
        --black-3: #6a5acd;
        --white-1: #ffffff;
        --yellow-gta: #FFE88C;
        --pink-gta: #ff6ead;
}
img {
        width: 100%;
        height: 100%;
        object-fit: contain;
}
h1 {
        font-family: 'Pricedown Bl', 'Pricedown', sans-serif;
        color: var(--yellow-gta);
        text-transform: uppercase;
        letter-spacing: 0.05em;
}
h2 {
        font-family: 'Bank Gothic', sans-serif;
        color: var(--yellow-gta);
        text-transform: uppercase;
}
h3,
h4 {
        font-family: 'Bank Gothic', sans-serif;
        color: var(--white-1);
}
p {
        font-family: Raleway;
        font-weight: 400;
        line-height: 1.4em;
        font-size: 1.8rem;
        color: var(--white-1);
}
a {
        display: inline-block;
        text-decoration: none;
}