Simplesimplecss

/*
The EUPL License (EUPL)

Copyright (c) 2023 Lovis Rentsch 
Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission - subsequent versions of the EUPL (the ''Licence'');
You may not use this work except in compliance with the Licence.
You may obtain a copy of the Licence at:

<https://joinup.ec.europa.eu/software/page/eupl>

Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an ''AS IS'' basis,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the Licence for the specific language governing permissions and limitations under the Licence.
*/

:root {
    --bg: hsl(0, 2%, 14%);
    --bgg:hsl(0, 4%, 16%);
    --bggg:hsl(0, 0%, 12%);
    --bgggg:hsl(0, 6%, 18%);
    --prim: hsl(303, 40%, 32%);
    --sec: hsl(108, 40%, 32%);
    --tert: hsl(180, 40%, 32%);
    --s: hsl(0, 43%, 38%);
    --p: hsl(300, 10%, 78%);
    --pp: hsl(158, 14%, 59%);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: sans-serif;
    color-scheme: dark;
}
body {
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--p);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--prim);
}
h4,
h5,
h6 {
    padding-left: 2.5rem;
}
h1,
h2,
h3 {
    text-align: center;
}
h1,
h2 {
    text-decoration: underline;
}

::selection {
    background-color: var(--tert);
    color: var(--p);
}
main {
    margin: auto;
    width: clamp(80px, 80vw, 1000px);
}
mark {
    background-color: var(--sec);
    color: var(--p);
}
address,
blockquote {
    font-style: italic;
    color: var(--pp);
}
blockquote {
    padding-left: 2.5rem;
}
address {
    text-align: center;
}
blockquote cite a,
blockquote cite,
address a {
    color: var(--tert);
}
aside {
    float: right;
    border: var(--pp) solid 2px;
    max-width: 40%;
    padding: 0.75rem;
    margin: 0.75rem;
    border-radius: 1rem;
    text-align: center;
}
section {
    background-color: var(--bgg);
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
}
ol {
    list-style:lower-greek;
}
li::marker {
    color: var(--tert);
}
details {
    border: var(--pp) 2px solid;
    border-radius: 1rem;
    margin: 0.75rem;
    padding: 0.75rem;
}
summary {
    color: var(--tert);
    text-align: center;
}
hr {
    height: .4rem;
    width: 80%;
    background-color: var(--sec);
    color: var(--sec);
    border: none;
    border-radius: 1rem;    
}
strong,
b {
    color: var(--s);
}
b {
    font-weight: normal;
}
kbd,
code,
samp,
pre {
    border: var(--p) solid 1px;
    font-family: monospace;
    margin: 0.3rem;
    padding: 0.3rem;
    background-color: #333;
    color: #fff;
}
figure {
    text-align: center;
    padding: 1rem;
    margin: 1rem;
}
img,
picture {
    border-radius: 1rem;
    max-width: 100%;
}
figcaption {
    color: var(--tert);
    font-style: italic;
}
audio,
video,
iframe,
embed,
object {
    width: clamp(100px, 80%, 800px);
    border-radius: 1rem;
    background-color: var(--tert);
    border: var(--pp) solid 2px;
    margin: 1rem;
}
form,
fieldset {
    border-radius: 1rem;
    color: var(--pp);
}
input {
    background-color: var(--tert);
    border: var(--pp) solid 2px;
    border-radius: 1em;
    margin: .2em 1em;
    padding: 0.3em;
    color: var(--bg);
    transition: all .5s ease;
}
input:hover,
input:focus {
    scale: 1.1;
}
input:disabled {
    background-color: #333;
    color: var(--p);
    border: var(--p) solid 2px;
}
textarea {
    background-color: var(--tert);
    color: var(--p);
    border-radius: 1rem;
    border: var(--pp) solid 2px;
    margin: 1rem;
    padding: 1rem;
}
a {
    color: var(--sec);
    transition: all .5s ease;
}
a:hover,
a:focus {
    color: hsl(60, 70%, 50%);
}
header,
nav {
    background-color: var(--bggg);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: sticky;
    top: .5rem;
}
nav > * {
    margin: 1rem;
    padding-right: 1rem;
}
footer {
    border: var(--pp) solid 2px;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    text-align: center;
}
table {
    border-collapse: collapse;
}
td,
th {
    border: var(--tert) solid 2px;
    text-align: left;
    padding: 0.5rem;
}
tr:nth-child(odd) {
    background-color: var(--sec);
}
table caption {
    font-weight: bold;
    margin: .5rem;
}
th {
    font-weight: bold;
    background-color: var(--bg) !important;
}
ul li::marker,
dd::before {
    content: '» ';
    color: var(--tert);
}
article {
  background-color: var(--bgggg);
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
}