/* Custom Properties 
---------------------------------------*/
:root {
    --darkauburn: #88171a;
    --richvelvetred: #590e12;
    /*-- rgb(89 14 18)*/
    --daintree: #042730;
    --metallicseaweed: #0c7a95;
    --seaweedlight: rgba(12, 122, 149, .1);
    --glossyyellow: #ffec54;
    --darksage: #767856;
    --pastelyellow: #f1e7d8;
    --solidmattegray: #757575;
    --color-dark: var(--richvelvetred);
    --color-light: var(--pastelyellow);
    --color-medium: var(--seaweedlight);
    --color-primary: var(--daintree);

    --font-size-h1: 5.5rem;

    --font-size-h2: 3rem;
    --font-size-base: 0.9375rem;
    --font-size-tagline: 1.3rem;
    --font-size-small: 0.7rem;

}

/* Global Styles
---------------------------------------*/
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
}

a {
    color: var(--color-dark);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: "Bitter", serif;

}

.bg-dark a,
.bg-primary a {
    color: var(--color-light);
}

.bg-light {
    background: var(--color-light);
    color: var(--color-dark);
}

.bg-medium {
    background: var(--color-medium);
    color: var(--color-dark);
}

.bg-dark {
    background: var(--color-dark);
    color: var(--color-light);
}

.bg-primary {
    background: var(--color-primary);
    color: var(--color-light);
}

.list-reset {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.content-wrap {
    max-width: 800px;
    border-radius: 10px;
    margin: 0 auto;
    padding: 60px;
}

.bitter-wild {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

/* Header + Nav
----------------------------------------------- */

header {
    height: 80%;
    background-image: linear-gradient(rgba(89, 14, 18, .5),
            rgba(89, 14, 18, 0.5)),
        url(/assets/images/dac-bg-FP.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
nav{
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;

}
.nav-list {
    display: flex;
    justify-content: right;
}

.nav-list a {
    padding: 20px;
    display: inline-block;
}

/* Project
----------------------------------------------- */

.project-item {
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
}

.project-item img {
    width: 100%;
}

/* Resume
----------------------------------------------- */
.resume.content-wrap {
    max-width: 1000px;
    border-radius: 10px;
}

.resume-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

.skills-nested {
    display: grid;
    border-radius: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content;
    gap: .2rem;
    padding: 20px;

}

.profile {
    grid-column: 1/3;

}

.work-experience {
    grid-column: 1/3;

}

.additional-experience {
    grid-column: 1/3;
}

/* Project
----------------------------------------------- */

/* footer
----------------------------------------------- */
footer {
    text-align: center;
    padding: 60px;
}

.socials-list {
    display: flex;
    justify-content: center;
}

.socials-list img {
    width: 35px;
    margin: 15px;
}