@layer theme {
    :root {
        --fg0:      #000000;
        --fg1:      #ffffff;
        --red:      light-dark(#9d0006,#fb4934);
        --blue:     light-dark(#076678,#83a598);
        --bg0:      #ffc0ff;
        --bg1:      #000000;

        --font-mono:    "IBM Plex Mono", Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
        --font-sans-serif: "Onest", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    }
}

:root {
    /* Tells the browser the page supports both modes */
    color-scheme: light dark;
}

[id] {
    scroll-margin-top: 10rem;
}

nav, footer {
    background-color: var(--bg1);
    padding: 0.5em 10%;
    margin: 0;
    color: var(--fg1);
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    font-size: 1.3em;
}

nav {
    position: sticky;
    top: 0;
    z-index: 999;
}

#nav-logo {
    width: 3%;
}

#logo {
    width: 20%;
    align-self: center;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 1em;
    text-align: center;
}

body {
    margin: 0px;
    color: var(--fg0);
    background-color: var(--bg0);
}


.navbar-element {
    margin: 0px;
    padding: 0 0.5em;
}

.navbar-places {
    text-align: right;
}

.container {
    margin: 1em;
    padding: 1em;
    border-style: solid;
    border-width: 1px 1px;
    border-color: var(--bg1);
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* Titulos de categorias */

.categoria {
    color: var(--bg0);
    text-align: center;
    margin: 0px;
    scroll-margin-top: 25rem;
}


.footer-host {
    padding: 0 0.5em;
    margin: 0;
    text-align: left;
}

.footer-source {
    text-align: right;
    flex-grow: 1;
    margin: 0;
    padding: 0 0.5em;
}

#boton_host {
color: var(--fg1);
}

#boton_source {
color: var(--fg1);
}

#boton_host:hover {
color: var(--fg0);
background-color: var(--bg0);
}

#boton_source:hover {
color: var(--fg0);
background-color: var(--bg0);
}

/*
 * Estilos - definidos en Figma
 * Fuentes importadas desde Google Fonts
 */

.estilo-cuerpo {
    font-family: var(--font-mono);
    font-weight: 500;
    font-style: normal;
}

.estilo-navbar {
    font-family: var(--font-mono);
    font-weight: 600;
    font-style: normal;

    text-transform: lowercase;
    text-decoration: none;
}

.estilo-links {
    font-family: var(--font-mono);
    font-weight: 700;
    font-style: normal;
}


.estilo-descripcion {
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-style: normal;
}

.estilo-titulo {
    font-family: var(--font-sans-serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}