:root {
    --main-bg-color: #373d20; /*rgb(73, 68, 68);*/
    --main-txt-color: #eff1ed;
    --accent-color: #717744;
    --accent-color-2: #766153;
    /* Color palette from: https://coolors.co/palette/eff1ed-373d20-717744-bcbd8b-766153 */
}

* {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color); 
    font-family: sans-serif; 
}

.wrapper {
    display: flex;
    flex-direction: column;
    /* background-color: blueviolet; */
}

/* NAV BAR & FOOTER */
.flex-title {
    flex: 3 auto;
    justify-content: left;
    /* background-color: aquamarine; */
}

nav, footer {
    display: flex;
    flex-direction: row; 
    /* background-color: aqua; */
    align-items: center;

    flex-grow: 0;
    flex-shrink: 0;

    border-left: 1em solid var(--accent-color);
}

nav h1 {
    font-size: 2em;
    padding-left: 1em;
}

/* LINKS---- */
a {
    font-size: 1.5em;
    padding: 1em;
    justify-content: right;
    color: var(--main-txt-color);
    /* background-color: blue; */
}

.in-text-link {
    font-size: 1em;
}

a:visited {
    color: var(--accent-color);
}

.inactive {
    color: var(--accent-color-2);
    cursor: not-allowed;
}

/* MAIN */
main {
    flex-grow: 0;
    padding: 1em;
    flex-direction: column;
    /* background-color: purple; */
}

.box-left {
    float: left;
    justify-items: center;
}

img {
    width: 40%;
    height: 40%;
    margin: 1em;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
}

.img-smaller {
    width: 20%;
    margin-right: 2em;
}

iframe {
    width: 50%;
    height: 100%;
    aspect-ratio: 16 / 9;
    margin-right: 2em;
    border-radius: 1em;
}

.project {
    background-color: aquamarine;
}

.resume {
    margin: 1em 10em 1em 10em;
}