:root {
    --primary-50: #E5EDFF;
    --primary-100: #CCDAFF;
    --primary-200: #99B6FF;
    --primary-300: #6691FF;
    --primary-400: #336DFF;
    --primary-500: #1B5CFF;
    --primary-600: #003ACC;
    --primary-700: #002B99;
    --primary-800: #001D66;
    --primary-850: #040F2D;
    --primary-900: #000E33;
    --primary-950: #00071A;

    --neutral-50: #F2F2F2;
    --neutral-100: #E6E6E6;
    --neutral-200: #CCCCCC;
    --neutral-250: #C2C2C2;
    --neutral-300: #B3B3B3;
    --neutral-400: #999999;
    --neutral-500: #FFFFFF;
    --neutral-600: #666666;
    --neutral-700: #4D4D4D;
    --neutral-800: #333333;
    --neutral-900: #1A1A1A;
    --neutral-950: #0D0D0D;

    --gradient-light: linear-gradient(90deg, #7F98DE 0%, #FFFFFF 45.67%, #758DCF 100%);
    --gradient-dark: linear-gradient(90deg, #222222 0%, #214AB6 47.6%, #222222 100%);
    --gradient-dark-2: linear-gradient(90deg, #222428 0%, #21439D 48.56%, #222324 100%);;

    --error: #DE7F81;
}

.no-scroll {
    overflow: hidden;
}

.section-with-decoration {
    position: relative;
    overflow: hidden;
}

.section-with-decoration::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background-image: url('./images/background/background-decoration.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.6s ease, transform 0.8s ease;
    pointer-events: none;
}

.section-with-decoration.animate-decoration::before {
    opacity: 0.8;
    transform: scale(1);
}

.section-with-decoration .container {
    position: relative;
    z-index: 2;
}

.section-with-decoration-up {
    position: relative;
    overflow: hidden;
}

.section-with-decoration-up::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background-image: url('./images/background/background-decoration-2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.6s ease, transform 0.8s ease;
    pointer-events: none;
}

.section-with-decoration-up.animate-decoration::before {
    opacity: 0.8;
    transform: scale(1);
}

.section-with-decoration-up .container {
    position: relative;
    z-index: 2;
}

html {
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    border: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a, a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

aside, nav, footer, header, section, main {
    display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
    font-weight: inherit;
}

body {
    background-color: var(--neutral-800);
    color: var(--primary-50);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--primary-50);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
}

.button {
    border: none;
    border-radius: 16px;
    color: var(--neutral-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

section {
    margin-inline: 18px;
    overflow: hidden;
}

img {
    object-fit: cover;
    user-select: none;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-block: 18px;
}

@media (max-width: 768px) {
    section {
        margin-inline: 4px;
    }
}