@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --white: #F3F5F6;
    --white-shade: #ecedee;
    --white-tint: #FFFFFF;
    --gray: #808080;
    --gray-shade: #4D4D4D;
    --gray-tint: rgb(214, 214, 214);
    --black: #2F2F2F;
    --black-shade: #292929;
    --black-tint: #444444;
    --hard-black: rgb(32, 32, 32);
    --ilvo: #A3CC00;
    --ilvo-shade: #8FB400;
    --ilvo-tint: #ACD11A;
    --darkgreen: #5E7600;
    --darkgreen-shade: #536800;
    --darkgreen-tint: #6E841A;
    --succes: #2DD55B;
    --warning: #FFC409;
    --danger: #C5000F;
    --primary: var(--darkgreen);
    --primary-shade: var(--darkgreen-shade);
    --primary-tint: var(--darkgreen-tint);
    --secondary: var(--ilvo);
    --secondary-shade: var(--ilvo-shade);
    --secondary-tint: var(--ilvo-tint);
    --background: var(--white-shade);
    --background-shade: var(--white-tint);
    --background-tint: var(--gray-tint);
    --background-nav: var(--white);
    --text: var(--black);
    --text-shade: var(--black-shade);
    --text-alt: var(--white);
    --login: 179, 179, 179;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: var(--ilvo);
        --primary-shade: var(--ilvo-shade);
        --primary-tint: var(--ilvo-tint);
        --secondary: var(--darkgreen);
        --secondary-shade: var(--darkgreen-shade);
        --secondary-tint: var(--darkgreen-tint);
        --background: var(--black-shade);
        --background-shade: var(--hard-black);
        --background-tint: var(--black-tint);
        --background-nav: var(--black);
        --text: var(--white);
        --text-shade: var(--gray-tint);
        --text-alt: var(--black);
        --login: 32, 32, 32;
    }
}

* {
    font-family: "Roboto", sans-serif;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    position: relative;
    margin: 0 auto;
    background-color: var(--background);
    color: var(--text);
    height: 100dvh;
}

header {
    position: relative;
}

header .skip-link {
    position: absolute;
    left: 50%;
    padding: 8px;
    color: var(--text);
    transform: translateY(-150%) translateX(-50%);
    transition: transform 0.3s;
    text-align: center;
    text-decoration: none;
}

header .skip-link:focus {
    transform: translateY(250%) translateX(-50%);
}

main {
    padding: 0;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--background-nav);
    padding: 1rem 0;
    width: 100%;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 1000;
    flex-wrap: wrap;
    margin: auto;
}


footer .links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

footer .links p {
    margin: 0;
}

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

input, select {
    color: var(--text);
    background-color: var(--background-shade);
    border: none;
    padding: .5rem .8rem;
    border-radius: 4px;
}

input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary);
}

.card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.leaflet-container, .leaflet-container :focus {
    outline: -webkit-focus-ring-color auto thin !important;
    outline: revert !important;
}

@media (min-width: 60rem) {
    html {
        font-size: 16px;
    }
}