Simplecss

/*
The EUPL License (EUPL)

Copyright (c) 2023 Lovis
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://eupl.eu/1.2/en/>

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: #17232e;
    --h: #fff;
    --p: #fff;
    
    --prim: #a4cdfa;
    --sec: #4f7dad;
    --tert: #345274;

    --cy: cyan;
    --dcy: darkcyan;
    --border: var(--prim) 3px solid;
    --shadow: var(--sec) 0rem 0rem .8rem;
    --shadow-h: var(--cy) 0rem 0rem 1.3rem;
    --trans: all .5s ease;
}
::selection {
    background-color: var(--sec);
    color: yellow;
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #250c01;
        --h: #fff;
        --p: #fff;
        
        --prim: #e6aa5c;
        --sec: rgb(168, 107, 57);
        --tert: #9e5c06;

        --cy: #be873e;
        --dcy: brown;

        --border: var(--prim) 3px solid;
        --shadow: var(--sec) 0rem 0rem .8rem;
        --shadow-h: var(--cy) 0rem 0rem 1rem;
        --trans: all .5s ease;
    }
    img,
    video {
      opacity: 0.8;
    }
    ::selection {
        background-color: var(--sec);
        color: var(--bg);
    }
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--p);
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 2rem;
}
h1,h2,h3,h4,h5,h6 {
    color: var(--h);
    text-align: center;
}
a {
    color: var(--dcy);
}
a:hover,
a:focus {
    text-decoration: none;
    color: var(--cy);
}
section {
    position: relative;
    margin-bottom: 2rem;
}
section::after {
    content: '';
    position: absolute;
    background-color: var(--sec);
    width: 70%;
    height: .25rem;
    border-radius: 1rem;
    bottom: -1rem;
    margin-left: 15%;
}
hr {
    color: var(--prim);
    width: 80%;
    height: 0.3rem;
    background-color: var(--prim);
    border-radius: 1rem;
}
p {
    margin: 1rem 2rem;
}
header {
    background-color: var(--tert);
    padding: 1rem;
    text-align: center;
    margin: 1rem;
    border-radius: 1rem;
}
mark {
    background-color: var(--prim);
    color: black;
}
main img,
main picture,
main video,
main audio {
  max-width: 90%;
  height: auto;
  border-radius: 1rem;
  margin: 2rem;
}
figure {
    display: grid;
    place-items: center;
}
figcaption {
    color: var(--sec);
    text-align: center;
}
audio, video {
    box-shadow: var(--shadow);
    transition: var(--trans);
    position: relative;
    margin: 0;
    width: 80%;
}
audio:hover,
audio:focus,
video:hover,
video:focus  {
    box-shadow: var(--shadow-h);
}
article {
    position: relative;
    border: var(--sec);
    margin: 1rem;
    padding: 1rem;
}
progress {
    background-color: var(--bg);
    border: var(--border);
    border-radius: 1rem;
    margin: 0 1rem;
}
iframe,
embed,
object {
    width: clamp(5rem, 80%, 60vw);
    border: var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    transition: var(--trans);
    margin: 2rem;
    height: 40vw;
    max-height: 60vh;
}
iframe:hover,
embed:hover,
object:hover {
    box-shadow: var(--shadow-h);
}
blockquote {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 2rem;
    font-style: italic;
    color: var(--prim);
}
blockquote::before {
    position: absolute;
    content: '';
    background-color: var(--sec);
    height: 80%;
    width: 3px;
    box-shadow: var(--shadow);
    margin: .5rem 0;
}
blockquote cite {
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    color: var(--cy);
}
blockquote cite a {
    color: var(--cy);
}
aside {
    border: var(--border);
    padding: .5rem;
    float: right;
    border-radius: 1rem;
    margin: 0.5rem;
    width: 40vw;
    max-width: 40%;
    box-shadow: var(--shadow), var(--shadow) inset;
    transition: var(--trans);
}
aside:hover {
    box-shadow: var(--shadow-h), var(--shadow-h) inset;
}
details {
    margin: 2rem 0 ;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: var(--border);
    transition: var(--trans);
    box-shadow: var(--shadow), var(--shadow) inset;
    border-radius: 1rem;
    text-align: center;
}
summary {
    width: fit-content;
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
}
details:hover {
    box-shadow: var(--shadow-h), var(--shadow-h) inset;
}
address {
    color: var(--prim);
}
address a {
    color: var(--cy);
}
fieldset {
    border: var(--border);
    border-radius: 1rem;
    margin: 2rem;
    padding: 1rem;
    color: var(--prim);
}
input,
select,
textarea {
    background-color: var(--tert);
    border: var(--border);
    border-radius: 1rem;
    color: var(--h);
    margin: 0 1rem;
    padding: 0.3rem;
    box-shadow: var(--shadow);
    transition: var(--trans);
}
input:hover,
input:focus,
select:hover,
select:focus,
input:checked,
textarea:hover,
textarea:focus {
    box-shadow: var(--shadow-h);
    scale: 1.1;
}
input[disabled] {
    background-color: gray;
    box-shadow: none;
}
input[type="checkbox"],
input[type="radio"] {
  width: auto;
}
nav {
    background-color: var(--sec);
    color: var(--bg);
    border-radius: 1rem;
    margin: 2rem;
    padding: 1rem;
}
nav a {
    color: var(--bg);
}
table {
    border-collapse:collapse;
    width: 100%;
    margin: 1.5rem 0;
}

td,
th {
    border: var(--border);
    text-align: left;
    padding: 0.5rem;
}

th {
    background: var(--sec);
    font-weight: bold;
}

tr:nth-child(even) {
    background: var(--tert);
}

table caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
}
ol,
ul {
    padding-left: 3rem;
}