/* DOCUMENT FONTS */

@font-face {
    font-family: PoppinsLight;
    src: url(/fonts/PoppinsLight.woff);
}

@font-face {
    font-family: PoppinsLightItalic;
    src: url(/fonts/PoppinsLightItalic.woff);
}

@font-face {
    font-family: PoppinsRegular;
    src: url(/fonts/PoppinsRegular.woff);
}

@font-face {
    font-family: PoppinsItalic;
    src: url(/fonts/PoppinsItalic.woff)
}

@font-face {
    font-family: PoppinsSemiBold;
    src: url(/fonts/PoppinsSemiBold.woff);
}

@font-face {
    font-family: PoppinsSemiBoldItalic;
    src: url(/fonts/PoppinsSemiBoldItalic.woff);
}

@font-face {
    font-family: PoppinsBold;
    src: url(/fonts/PoppinsBold.woff);
}

@font-face {
    font-family: PoppinsBoldItlic;
    src: url(/fonts/PoppinsBoldItalic.woff);
}

@font-face {
    font-family: PoppinsExtraBold;
    src: url(/fonts/PoppinsExtraBold.woff);
}

@font-face {
    font-family: PoppinsExtraBoldItlic;
    src: url(/fonts/PoppinsExtraBoldItalic.woff);
}

/* DEFINE COLOR VARIABLES */

:root {
    --lightBGColor: #ebfafa;
    --midBGColor: #39acac;
    --darkBGColor: #006666;
    --darkTextColor: #003333;
    --lightTextColor: #ffffff;
    --linkHoverColor: #39acac;
    --dividerGradient: linear-gradient(to right, var(--darkBGColor), var(--midBGColor), var(--lightBGColor), var(--midBGColor), var(--darkBGColor));
}

/* DEFAULT BODY STYLING */

body {
    padding: 0px;
    margin: 0px;
    background-color: var(--lightBGColor);
    color: var(--darkTextColor);
}

/* DIVIDER SYLING */

.divider {
    background-image: var(--dividerGradient);
    height: 5px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/* HEADER */

div.headerContainer {
    margin-left: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
}

header h1 {
    font-family: PoppinsExtraBold;
    font-size: 2rem;
    margin: 0px, 0px;
    padding: 0px, 0px;
}

header div.location {
    font-family: PoppinsRegular;
    font-size: 1rem;
    margin: 0px, 0px;
    padding: 0px, 0px;
}


/* NAV BAR */

nav {
    position: sticky;
    top: 0;
}

ul.navigation {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: var(--midBGColor);
    display: flex;
    width: 100%;
}

nav ul li a {
    font-family: PoppinsRegular;
    color: var(--darkTextColor);
    display: inline-block;
    padding: 5px 25px;
    text-decoration: none;
}

nav ul li a:hover {
    color: var(--linkHoverColor);
    background-color: var(--lightBGColor);
}

nav ul li a.active {
    color: var(--lightTextColor);
    background-color: var(--darkBGColor);
}

/* HEADINGS */

h2 {
    font-family: PoppinsBold;
    font-size: 1.5rem;
    margin: 0px 0px;
    padding: 0px 0px;
}

h3 {
    font-family: PoppinsSemiBold;
    font-size: 1.25rem;
    margin: 0px 0px;
    padding: 0px 0px;
}

/* SUMMARY */

.summaryContainer {
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 25px;
}

div.summary {
    width: 850px;
}

div.summary p {
    font-family: PoppinsRegular;
    font-size: 1rem;
}

/* EMPLOYMENT HISTORY */

.employmentHistoryHeader {
    margin-top: 25px;
    margin-bottom: 10px;
    margin-left: 25px;
}

div.employmentHistoryContainer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    column-gap: 25px;
    row-gap: 25px;
    padding: 0px 0px;
    margin-top: 0px;
    margin-bottom: 25px;
    margin-right: 0px;
    margin-left: 25px;
}

div.jobContainer {
    display: flex;
    flex-direction: column;
    width: 650px;
    margin: 0px 0px;
    padding: 0px 0px;
}

.jobDetailsContainer {
    width: 600px;
    margin: 0px 0px;
    padding: 0px 0px;
}

.jobTitle {
    font-family: PoppinsRegular;
    font-size: 1rem;
}

.jobDates {
    font-family: PoppinsRegular;
    font-size: 1rem;
}

.jobList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style-type: disc;
    font-family: PoppinsRegular;
    font-size: .95rem;
    width: 600px;
    padding-right: 0px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 25px;
}




/* EDUCATION */

.educationHeader {
    margin-top: 25px;
    margin-bottom: 10px;
    margin-left: 25px;
}

.educationContainer {
    display: flex;
    flex-direction: row;
    padding: 0px 0px;
    margin-left: 25px;
    margin-bottom: 25px;
}

.schoolContainer {
    margin-left: 0px;
    margin-right: 200px;
    margin-top: 0px;
    margin-bottom: 0px;
}



/* SKILLS */