/* Source Code Pro */
@font-face {
    font-family: "Source Code Pro";
    src: 
        url("../fonts/ttf/SourceCodePro-Regular.ttf") format("truetype"),
        url("../fonts/woff2/SourceCodePro-Regular.ttf.woff2") format("woff2");
}

/* Lato Regular */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: normal;
    src: 
        url("../fonts/ttf/Lato-Regular.ttf") format("truetype"),
        url("../fonts/woff2/Lato-Regular.woff2") format("woff2");
}

/* Lato Bold */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: bold;
    src:
        url("../fonts/ttf/Lato-Bold.ttf") format("truetype"),
        url("../fonts/woff2/Lato-Bold.woff2") format("woff2");
}
/* Lato Italic */
@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: normal;
    src:
        url("../fonts/ttf/Lato-Italic.ttf") format("truetype"),
        url("../fonts/woff2/Lato-Italic.woff2") format("woff2");
}

/* Lato Bold Italic */
@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: bold;
    src:
        url("../fonts/ttf/Lato-BoldItalic.ttf") format("truetype"),
        url("../fonts/woff2/Lato-BoldItalic.woff2") format("woff2");
}

html {
    background-color: white;
    color: black;
}

table, th, td {
    border: 1px solid black;
}

.unsupported {
    background-color: lightgrey;
}

a:link {
    color: purple;
}

a:visited {
    color: violet;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #0F0F0F;
        color: #FFFFFF;
    }

    table, th, td {
        border: 1px solid white;
    }

    .unsupported {
        background-color: #404040;
    }

    a:link {
        color: violet;
    }

    a:visited {
        color: purple;
    }
}

body {
    font-family: "Lato", sans-serif;
    font-weight: normal;
    font-size: 16px;
}

h1, h2, h3, h4 {
    font-family: "Lato";
}

code {
    font-family: "Source Code Pro", monospace;
    font-size: 16px;
    overflow-wrap: break-word;
}

table, th, td {
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
}

#wrapper {
    position: relative;
}

#scroll {
    overflow: auto;
}