:root{
    color-scheme: light dark;

    --light-bg: #f9f9f9;
    --light-main: #6900af;
    --light-secondary: #00b913;
    --light-text: #333;

    --dark-bg: #333;
    --dark-main: #8000ff;
    --dark-secondary: #00e016;
    --dark-text: #f9f9f9;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2{
    font-family: bytebounce;
}

p, a, h3{
    font-family: lato;
}

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
    color: light-dark(var(--light-text), var(--dark-text));

    header{
        height: 10dvh;
    }

    main{
        min-height: 90dvh;
        background-color: light-dark(var(--light-main), var(--dark-main));
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 2rem;
       
    }

    section{
        background-color: light-dark(var(--light-bg), var(--dark-bg));
        width: 80dvw;
        margin-top: 2rem;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    }
}

.riley{
    color: light-dark(var(--light-main), var(--dark-main));
    text-decoration: none;
}

.lisa{
    color: light-dark(var(--light-secondary), var(--dark-secondary));
    text-decoration: none;
}