/* https://github.com/jpanther/lynx/blob/dev/assets/css/main.css */

/* Colors */
/* https://stackoverflow.com/a/77089990 */

/* martian-mono-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/martian-mono-v3-latin-regular.woff2") format("woff2");
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* martian-mono-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/martian-mono-v3-latin-500.woff2") format("woff2");
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* martian-mono-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/martian-mono-v3-latin-600.woff2") format("woff2");
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* martian-mono-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/martian-mono-v3-latin-700.woff2") format("woff2");
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* martian-mono-800 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/martian-mono-v3-latin-800.woff2") format("woff2");
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --acf-main: #5EB3F8;
    --acf-secondary: #003971;
    --wiki: #198042;
    --zoom: #2d8cff;
    --food: #775c18;
    --forums: #BFD8E7;
    --live: #e26054;
    --liveblog: #77183b;
    --map: #3a8630;
    --parking: #757e2b;
    --program: #a4668a;
    --schedule: #b3e051;
    --stats: #e3ad47;
    --tw-bg-opacity: 100%;
    --tw-text-opacity: 100%;
}

h1 {
    font-family: "Martian Mono";
}

.link-site {
    background: var(--acf-main);
}

.link-wiki {
    background: var(--wiki);
}

.link-food {
    background: var(--food);
}

.link-forums {
    background: var(--forums);
    color: black;
}

.link-live {
    background: var(--live);
}

.link-liveblog {
    background: var(--liveblog);
}

.link-map {
    background: var(--map);
}

.link-parking {
    background: var(--parking);
}

.link-program {
    background: var(--program);
}

.link-schedule {
    background: var(--schedule);
    color: black;
}

.link-stats {
    background: var(--stats);
    color: black;
}

.author {
    border-radius: 10%;
}

/* Buttons */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
}



/* Light and dark themes */
/* https://github.com/jpanther/lynx/blob/dev/assets/css/compiled/main.css */
/* https://zwbetz.com/use-hugo-templating-in-your-external-css/ */

/* Light theme */

.bg-main {
    --tw-bg-opacity: 90%;
    background-color: color-mix(in srgb, #ffffff var(--tw-bg-opacity), transparent calc(100% - var(--tw-bg-opacity)));
}

.text-main {
    --tw-text-opacity: 100%;
    color: color-mix(in srgb, #003971 var(--tw-text-opacity), transparent calc(100% - var(--tw-text-opacity)));
}

.text-alt {
    --tw-text-opacity: 75%;
    color: color-mix(in srgb, #000000 var(--tw-text-opacity), transparent calc(100% - var(--tw-text-opacity)));
}

.dark-mode {
    .bg-main {
        --tw-bg-opacity: 90%;
        background-color: color-mix(in srgb, #000000 var(--tw-bg-opacity), transparent calc(100% - var(--tw-bg-opacity)));
    }

    .text-main {
        --tw-text-opacity: 100%;
        color: color-mix(in srgb, #5EB3F8 var(--tw-text-opacity), transparent calc(100% - var(--tw-text-opacity)));
    }

    .text-alt {
        --tw-text-opacity: 75%;
        color: color-mix(in srgb, #ffffff var(--tw-text-opacity), transparent calc(100% - var(--tw-text-opacity)));
    }
}