@media (prefers-color-scheme: dark) {
    :root {
        --foreground-color: white;
        --background-color: rgb(30, 30, 30);
    }
}

@font-face {
    font-family: 'Oxanium';
    src:
        local("Oxanium"),
        url("/fonts/Oxanium-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-display: swap; /* Comportamiento hasta que se carga la fuente */
}

body {
    background: var(--background-color, white);
    color: var(--foreground-color, rgb(30, 30, 30));

    margin: 0 1rem;

    font-family: "Oxanium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.site {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
}

.logo {
    background-image: url(images/logo-xesco-dev-small.svg);
    width: 160px;
    height: 160px;
}

header {
    border-bottom: 1px solid rgb(78, 76, 76);
}

footer {
    border-top: 1px solid rgb(78, 76, 76);
}

footer h4 {
    text-align: center;
}