html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: Arial;
}
header {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    position: fixed;
    box-sizing: border-box;
}
main {
    width: 100%;
    height: 100%;
    padding-top: 57px;
    padding-bottom: 22px;
    box-sizing: border-box;
}
footer {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
}
h1 {
    margin: 10px;
}
h6 {
    margin: 5px;
}

@media (prefers-color-scheme: dark) {
    a:link {
        color: #ffa000;
    }
    a:visited {
        color: #ff5000;
    }
    body {
        background-color: #111111;
    }
    header {
        color: #dddddd;
        background-color: #333333;
    }
    main {
        color: #dddddd;
        background-color: #444444;
    }
    footer {
        color: #dddddd;
        background-color: #222222;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #cccccc;
    }
    header {
        background-color: #eeeeee;
    }
    main {
        background-color: #ffffff;
    }
    footer {
        background-color: #dddddd;
    }
}