:root {
    --bg-color: #1c1c1c;
    --bg-color-2: #1c1c1cd0;
    --text-color: #fafafa;
    --text-color2: #fafafabf;
    --text-secondary: #d0d0d0;
    --button-primary: #00bfa6;
    --text-special: #ff007f;
    --border-color: #2e2e2e;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --link: #00ffff;
}

.light-mode {
    --bg-color: #fafafa;
    --bg-color-2: #fafafad0;
    --text-color: #000000;
    --text-color2: #000000bf;
    --text-secondary: #4d4d4d;
    --button-primary: #7A3A9D;
    --button-secondary: #ff007f;
    --border-color: #D3D3D3;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --link: #5F27CD;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: content-box;
}

html {
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    scroll-behavior: smooth;
    box-sizing: content-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

[id] {
    scroll-margin-top: 7ex;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.5px;
}

h2 .las {
    /* Iconos de sección */
    font-size: 2rem;
    font-weight: 800;
    border-radius: .7rem;
    /* line-height: 1; */
}

section {
    max-width: 1100px;
    padding: 20px;
}

section h2 {
    font-size: 2rem;
}

section h3 {
    font-size: 1.5rem;
}

/* ESTILOS ESPECIALES */

p {
    line-height: 1.6;
}

ul {
    list-style: none;
}

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

a:hover {
    color: var(--link);
}

.background {
    background-color: var(--bg-color-2);
}

.shadow {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.20);
}

.shadow-1 {
    box-shadow:
        0px 6px 16px rgba(0, 0, 0, 0.20);
}

.hidden {
    display: none !important;
}

.bolder {
    font-weight: 800;
}

.text-color {
    color: var(--button-primary);
}

.scale,
.scale-2 {
    transition: transform 300ms ease;
}

.scale:active {
    transform: scale(.9);
}

.scale-2:hover {
    transform: scale(1.3);
}

.scale-2:active {
    transform: scale(1);
}

.background-img {
    /* padding: 5px; */
    background-color: #2e2e2ef3;
    border-radius: 50%;
    transition: all  0ms;
}

/* FONDO DE PANTALLA */
@keyframes hero-gradient-animation {
    0% {
        --x-0: 85%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-0: hsla(266.99999999999983, 1%, 12%, 1);
        --y-0: 80%;
        --y-1: 24%;
        --x-1: 60%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(335.9999999999997, 2%, 22%, 1);
        --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
        --x-2: 13%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 82%;
        --x-3: 24%;
        --y-3: 7%;
        --c-3: hsla(120, 0%, 10%, 1);
        --s-start-3: 13%;
        --s-end-3: 68%;
    }

    100% {
        --x-0: 31%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-0: hsla(266.99999999999943, 0%, 12%, 1);
        --y-0: 94%;
        --y-1: 25%;
        --x-1: 2%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(0, 4%, 19%, 1);
        --c-2: hsla(54.000000000000036, 0%, 0%, 0.49);
        --x-2: 98%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 20%;
        --x-3: 95%;
        --y-3: 92%;
        --c-3: hsla(298.99999999999994, 0%, 10%, 1);
        --s-start-3: 13%;
        --s-end-3: 68%;
    }
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(266.99999999999983, 1%, 12%, 1)
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(335.9999999999997, 2%, 22%, 1)
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(53.999999999999886, 0%, 0%, 0.49)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(120, 0%, 10%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

/* Fondo oscuro */
.dark-mode {
    --c-0: hsla(266.99999999999983, 1%, 12%, 1);
    --c-1: hsla(335.9999999999997, 2%, 22%, 1);
    --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
    --c-3: hsla(120, 0%, 10%, 1);
    --x-0: 85%;
    --x-1: 60%;
    --x-2: 13%;
    --x-3: 24%;
    --y-0: 80%;
    --y-1: 24%;
    --y-2: 82%;
    --y-3: 7%;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    background-blend-mode: normal, normal, normal, normal;
}

/* Fondo claro */
@keyframes hero-gradient-animation {
    0% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-0: hsla(266.99999999999983, 0%, 98%, 1);
        --x-0: 85%;
        --y-0: 80%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --x-1: 60%;
        --y-1: 24%;
        --c-1: hsla(300, 0%, 94%, 1);
        --c-2: hsla(300, 0%, 98%, 1);
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 82%;
        --x-2: 13%;
        --s-start-3: 13%;
        --s-end-3: 68%;
        --c-3: hsla(300, 0%, 98%, 1);
        --y-3: 7%;
        --x-3: 24%;
    }

    100% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-0: hsla(300, 0%, 98%, 1);
        --x-0: 31%;
        --y-0: 94%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --x-1: 2%;
        --y-1: 25%;
        --c-1: hsla(300, 0%, 94%, 1);
        --c-2: hsla(300, 0%, 99%, 1);
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 20%;
        --x-2: 98%;
        --s-start-3: 13%;
        --s-end-3: 68%;
        --c-3: hsla(300, 0%, 98%, 1);
        --y-3: 92%;
        --x-3: 95%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(266.99999999999983, 0%, 98%, 1)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(300, 0%, 94%, 1)
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(300, 0%, 98%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(300, 0%, 98%, 1)
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

.light-mode {
    --c-0: hsla(266.99999999999983, 0%, 98%, 1);
    --x-0: 85%;
    --y-0: 80%;
    --x-1: 60%;
    --y-1: 24%;
    --c-1: hsla(300, 0%, 94%, 1);
    --c-2: hsla(300, 0%, 98%, 1);
    --y-2: 82%;
    --x-2: 13%;
    --c-3: hsla(300, 0%, 98%, 1);
    --y-3: 7%;
    --x-3: 24%;
    ;
    background-color: hsla(300, 0%, 98%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
}

@media (min-width: 481px) and (max-width: 768px) {
    section {
        padding: 25px;
    }
}


@media (min-width: 769px) {
    section {
        padding: 50px;
    }
}