:root {
color-scheme: light dark;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
display: flex;
flex-direction: column;
/* colors */
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
}
main {
margin: auto;
width: 80%;
padding: 10px;
min-height: 40%;
overflow-y: scroll;
/* colors */
border: 1px solid darkblue;
background-color: white;
box-shadow: 3px 3px 3px #30303090;
}
main h1 {
font-family: "Raleway", sans-serif;
font-size: 2em;
margin-top: 0px;
margin-bottom: 8px;
text-decoration: underline;
text-shadow: 0px 0px 4px white, 2px 2px 6px;
}
main h2 {
margin-bottom: 0.5em;
}
main p {
margin-left: 1em;
margin-top: 0.5em;
}
.float-right {
float: right;
}
.text-red {
color: red;
}
header {
padding: 3px 16px 3px 16px;
border-bottom: 1px solid black;
background-image: linear-gradient(#0000006f, #0000007f);
text-shadow: 1px 1px 1px #0000004f;
}
header a {
padding: 4px;
margin: 0 1px;
/* color: #06c; */
background-color: #0000002f;
}
header a:hover {
/* text-shadow: #FFF 1px 0 10px; */
border: 1px solid white;
padding: 3px;
}
footer {
padding: 4px 8px 2px 8px;
border-top: 1px solid black;
background-image: linear-gradient(#0000008f, #0000005f);
margin-top: auto;
text-shadow: 1px 1px 1px #0000004f;
}
footer h1,
footer h2,
footer h3,
footer p {
display: inline;
margin: 0px;
}
@media(prefers-color-scheme: dark) {
html,
body {
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
}
main {
border: 1px solid darkgray;
background-color: black;
box-shadow: 3px 3px 5px #101010C0;
}
main h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px;
}
header {
/* border-bottom: 1px solid darkgray; */
background-image: linear-gradient(#FFFFFF1f, #FFFFFF3f);
}
header a {
/* color: white */
/* background-color: #0000004f; */
}
footer {
/* border-top: 1px solid darkgray; */
background-image: linear-gradient(#FFFFFF4f, #FFFFFF0f);
}
}