*{
    font-family: sans-serif;
    color:var(--invert);
    font-size: var(--default-font-size);
    font-weight: lighter;
}

html{
    --main: white;
    --invert: black;
    --container-width: min(700px, 90vw);
    --default-font-size: 20px;
}

@media (prefers-color-scheme: dark) {
    html{
        --main: black;
        --invert: white;
    }
}

body{
    margin:0;
    display: flex;
    flex-direction: column;
    background: var(--main);
    align-items: center;
}

h1,h2,h3,h4,h5, a{
    font-variant-caps: all-small-caps;
}
p{
    font-size: max(calc(var(--default-font-size)*0.75), 15px);
}
.smaller-1{
    font-size:  max(calc(var(--default-font-size)*0.85), 15px);
}
.smaller-2{
    font-size: max(calc(var(--default-font-size)*0.65), 15px);
}
.normal {
    font-variant-caps: normal;
}

.darker-1{
    opacity: 0.7;
}
.darker-2{
    opacity: 0.6;
}

h2{
    font-style: normal;
    margin: 0px;
    letter-spacing: -0.025em;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;
}

ul.contact  {
    list-style: none;
    padding:0;
    display: flex; 
    justify-content: space-between;
    flex-wrap: wrap;
}

a{
    transition: all 0.25s ease;
    text-decoration: none;
    color: rgba(var(--invert), 0.1);;
}
a:hover{
    color: rgba(var(--invert), 1);
    text-shadow: 0px 0px 4px gray;    
}

footer {
    margin-top: 40px;
    margin-bottom: 20px;
    opacity: 0.2;
}