@font-face {
    font-family: 'NotoSans';
    src: url('Noto_Sans/NotoSans-VariableFont_wdth_wght.ttf');
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #fca790;
        color: #2e222f;

    }

    main {
        background-color: #fdcbb0;
    }

    /* unvisited link */
    a:link {
        color: #4d65b4;
    }

    /* visited link */
    a:visited {
        color: #484a77;
    }

    /* mouse over link */
    a:hover {
        color: #f04f78;
    }

    /* selected link */
    a:active {
        color: #484a77;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #2e222f;
        color: #c7dcd0;
    }

    main{
        background-color: #3e3546;
    }

    /* unvisited link */
    a:link {
        color: #f9c22b;
    }

    /* visited link */
    a:visited {
        color: #f79617;
    }

    /* mouse over link */
    a:hover {
        color: #f04f78;
    }

    /* selected link */
    a:active {
        color: #f79617;
    }
}

body {
    font-family: 'NotoSans', sans-serif;
    margin: 0;
    min-height: 100vh;
}

main{
    max-width: 60em;
    margin: auto;
    padding: 1em;


    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 30em;
    }
}

footer{
    max-width: 60em;
    margin: auto;
    padding: 1em;

    img{
        max-height: 100%;
        width: auto;
    }
}