:root {
    color-scheme: light dark;
}

body {
    background-color: light-dark(#d9d9d9, black);
    color: light-dark(black, white);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

header {
    background-image: linear-gradient(to bottom, light-dark(white, #333333), light-dark(#cccccc, black));
    text-align: center;
}

header nav ul {
    display: inline-block;
    text-align: center;
    width: 80%;
    text-style: none;
    style: none;
    padding-left: 0px;
}

header nav ul li {
    display: inline-block;
    width: 25%;
    background-image: linear-gradient(to bottom, light-dark(white, #333333), light-dark(#cccccc, #333333));
    text-align: center;
    margin: 1px;
    border: 1px;
    border-color: black;
}

header nav ul li a {
    color: light-dark(black, white);
    text-decoration: none;
    font-weight: bold;
}

header nav ul li a:visited {
    color: light-dark(black, white);
    text-decoration: none;
    font-weight: bold;
}

header nav ul li a:active {
    color: light-dark(black, white);
    text-decoration: none;
    font-weight: bold;
}

h1 {
    text-align: center;
}

a {
    color: light-dark(#ff6633, #ff9966);
}

a:visited {
    color: light-dark(#3366ff, #6699ff);
}

a:active {
    color: light-dark(#6633ff, #9966ff);
}

figure {
    text-align: center;
}

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

code {
    color: light-dark(#006633, #33ff66);
}