:root {
    color-scheme: light dark;
}

a:visited {
    color: light-dark(#4A4A4A,white);
}

html {
    font-family: Verdana;
    font-style: normal;
    background: light-dark(#FFFFFF, #4A4A4A);
    color: light-dark(#4A4A4A, #FFFFFF);
}

body {
    margin-left: 10%;
    margin-right: 10%;
}

header center .mainheader {
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
}

h2 {
    text-transform: uppercase;
}

header * {
    text-decoration: none;
}

main a:hover {
    text-decoration: underline;
    text-decoration-style: double;
    color: blue;
    transition: color 0.5s;
}

:link {
    color: light-dark(#4A4A4A, #FFFFFF);
}

:visited {
    color: light-dark(#4A4A4A, #FFFFFF);
}

.code {
    border-style: solid;
    display: block;
    padding: 1em;
    width: 80%;
    margin: auto;
    margin-bottom: 14px;
    box-shadow: light-dark(#7D7D7D, #D7D7D7) 7px 7px;
    white-space: pre-wrap;
}

code {
    font-weight: 700;
}

dl dt {
    text-decoration: underline;
}

.warning {
    color: light-dark(red,orange);
    border-style: solid;
    display: block;
    padding: 1em;
}

.note {
    color: light-dark(green, lightgreen);
    border-style: solid;
    display: block;
    padding: 1em;
}