:root { /*define variable, mostly color*/
    --bg-color: #0D6073; /*color of the background*/
    --dark-bg-color: #05262E; /*darker version of the background*/

    --fg-color: #011F26; /*foreground color*/

    --icon-color: #04C4D9; /*icon color*/
    --dark-icon-color: #024E57; /*icon color during moviescreen mode*/

    --pgraph-color: #13F2F2; /*paragraph color*/

    --clickable-color: #155902; /*standard color of sidebar clickables, switches with --clickable-inverse-color when clicked/hovered over*/
    --clickable-inverse-color: #34BF49; /*'inverted' color of sidebar clickables, normally for type*/

    --moviescreen-color: black; /*use for examinations of portfolio works, neutralize the color interference*/

    --type-color: black; /*default font color, contrasts against --pgraph-color*/
    --contrast-type-color: white; /*during moviescreen mode, contrasts against --moviescreen-color*/
}

* {
    margin: 0% 0% 0% 0%;
    text-align: center;

    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;

    line-height: 1.5;
}

body {
    background-color: var(--bg-color);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding-left: 25%;
    padding-right: 25%;

}

h1 {
    display: flex;

    width: 50%;
    height: 2.5vmax;
    background-color: var(--clickable-inverse-color);
    border-radius: 1vmax;
    justify-content: center;
    align-items: center;

    margin: 5%;

    color: var(--clickable-color);
}

p {
    padding: 2.5vh;
    border-radius: 1vmax;
    background-color: var(--pgraph-color);
    font-size: large;
}

.back {
    display: flex;

    width: 20vmax;
    height: 3vmax;
    background-color: var(--fg-color);
    border-radius: 1vmax;
    justify-content: center;
    align-items: center;

    margin: 5%;
}

a{
    text-decoration: none;
    color: var(--dark-bg-color);
    font-weight: 600;
    font-size: larger;
    color: white;
}