html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.06em;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    font-family: 'poppins', 'Poppins Fallback', Helvetica, arial, "sans-serif";
    font-size: 1rem;
    line-height: 21px;
    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
    -webkit-font-smoothing: antialiased;
}

main {
    padding: 20px 0;
    transition: padding 0.5s ease;
    max-width: 760px;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {line-height: initial;}

h1 {margin-bottom: 5px;}

.info {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 0.8rem;
    font-style: italic;
}

h2 {margin-top: 30px;}

ul {
    margin: 4px 0 0;

    > li {margin-top: 3px;}
}

.fa-download {margin-right: 6px;}


/**************************************************/
/*                    RESPONSIVE                  */
/**************************************************/
@media (max-width: 780px) {
    main {padding: 20px;}
}

/**************************************************/
/*                    LIGHT MODE                  */
/**************************************************/
@media (prefers-color-scheme: light) {
    :root {
        --background: #fff;
        --color: #232425;
    }

    a {
        color: rgb(13, 110, 253);
        text-underline-offset: 4px;
        
        &:hover {color: rgb(10, 88, 202);}
    }
}

/**************************************************/
/*                    DARK MODE                  */
/**************************************************/
@media (prefers-color-scheme: dark) {
    :root {
        --background: #232425;
        --color: #fff;
    }

    a {
        color: rgb(110, 168, 254);
        text-underline-offset: 4px;
        
        &:hover {color: rgb(139, 185, 254);}
    }
}