: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: nowrap;
    flex-direction: row;
    justify-content: space-between;
}

nav {
    margin: 5vh auto 5vh 3%; /* top | right | bottom | left */
    border-radius: 1vmax;
    background-color: var(--fg-color);
    width: 30%;
    height: 90vh;
    position: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--clickable-inverse-color);
    font-weight: 600;
    font-size: larger;
}

nav #pfp {
    color: var(--dark-icon-color);
    font-weight: 900;
    font-size: xx-large;
}

section {
    width: 67%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

article p {
    padding: 2.5vh;
    width: 125%;
    border-radius: 1vmax;
    background-color: var(--pgraph-color);
}

h1 {
    margin-top: 10vh;

    font-weight: 900;
    font-size: xx-large;
    color: white; /*change later*/
}

h2 {
    margin-top: 1vh;
    color: white;
}

h3 {
    color: white;
}

p {
    font-size: large;
}

.dyna-box {
    background-color: var(--moviescreen-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dyna-image {
    width: 75%;
    margin: 2.5vh;
}

.piece {
    margin: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 50%;
}

.spacer {
    width: 33%;
    height: 100vh;
}

.goto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 60%;
}

.link-section {
    display: flex;

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

    margin: 5%;
}

.category {
    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);
}

#pfp {
    display: flex;
    width: 25vh;
    height: 25vh;
    background-color: var(--icon-color);
    margin-top: 12.5%;
    margin-bottom: 12.5%;
    border-radius: 50%;

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


.league-spartan-em { /*Use for display*/
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}


.merriweather-em { /*Use for pgraphs and small stuff*/
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}