/* #region FUENTES */

@font-face {
    font-family: "Eurostile";
    src: url("/assets/fonts/Eurostile.woff2") format("woff2");
    font-display: swap;
}

::selection {
    background: #32a1cd;
    color: #1a2a1a;
}

::-moz-selection {
    background: #32a1cd;
    color: #1a2a1a;
}

/* #endregion */

/* #region GENERAL */

:root {
    --font-title: "Eurostile";
    --block-color: #300101de;
    --block-text: #f4f4f4;
    --block-shadow: #ee513f71;
    --block-border: #db594ae7;
    --title-color: #f29997;
    --accent-color: #fdabab;
    --map-background: #010101;
}

body.custom-cursor * {
    cursor: url("/assets/cursors/III.cur") 0 0, auto !important;
}

body {
    background-image: url("/assets/images/main/backgrounds/background_LCS.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;

    @media (min-width: 768px) {
        background-attachment: fixed;
    }

    &::after {
        content: "";
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 80px;
        background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--block-border) 10%, var(--block-color)));
    }

    & .block,
    #radioInfo {
        background: linear-gradient(135deg,
                #2e0a0ae3 0%,
                #1f0808e3 50%,
                #3a0e0ee3 100%);

    }
}

.text-container {
    & h1 {
        text-shadow: 2px 2px #000;
    }

}

/* #endregion */

/* #region FICHA TÉCNICA */
.ficha-tecnica {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
}


/* #endregion */

/* #region 100% CHECKLIST */

/* #endregion */

/* #region MAPA */
.map-wrapper {
    background: linear-gradient(135deg, rgba(49, 0, 0, 0.685), rgb(0, 0, 0));
}

/* #endregion */

/* #region RADIO */

#radioInfo {

    & #playlistSelector {
        margin-bottom: 1em;
        gap: 0 2em;

        & button {
            color: #6EAAC0;
            font-size: 1.3em;
            background: none;
            text-shadow: 2px 2px 1px #000;

            &:hover {
                color: #E8F0F3;
            }

            &.active {
                color: #E8F0F3;
            }


        }
    }
}


/* #endregion */

/* #region TRUCOS */


/* #endregion */

/* #region MEDIA QUERIES  */

@media (max-width: 1350px) {

    body {
        background: radial-gradient(circle at top, rgba(255, 100, 100, 0.8), rgba(0, 0, 0));
    }
}

/* #endregion */