body {
    font-family: sans-serif;
    max-width: 80em;
}

#live main {
    color: #d3d3d3;
    text-decoration: none;
}

#live nav li a:hover:not(.active) {
    color: #d3d3d3;
}

#live nav li a.active {
    color: black;
}

nav {
    list-style-type: none;
    display: inline-block;
}

nav ul {  
    list-style-type: none;
    position: fixed;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    top: 0em;
    }

nav li a {
    display: block;
    padding: 1em;
    text-decoration: none;
}

main {
    margin-left: 12em;
    font-size: 1.2em;
    line-height: 1.5;
}

img, picture {
    object-fit: scale-down;
    max-width: 100%;
    height: auto;
    display: block;
    padding: .2em;
}

footer {
    font-size: .6em;
    text-decoration: none;
    margin-left: 24em;
    bottom: 1em;
}

@media (prefers-color-scheme: dark) {
    body { 
        background: #1a1a1a;
        color: white;
    }
    main a {
        color: steelblue;
    }
    main a:visited {
        color: plum;
    }
    nav ul {
        background: black;
    }
    nav a {
        color: lightgray;
    }
    nav li a.active {
        background: darkgray;
        color: black;
    }
    nav li a:hover:not(.active) {
        background: #1a1a1a;
    }
}
@media (prefers-color-scheme: light) {
    body {
        background: #eeeeee;
        color: black;
    }
    nav ul {
        background: #cccccc;
    nav a {
        color: darkgray;
    }
    nav li a.active {
        background: lightgray;
        color: white;
    }
    nav li a:hover:not(.acitve) {
        background: #dddddd;
    }
}