:root {
    /* Create variables to easily toggle light/dark mode */
    --dark: #292b35;
    --light: #e8e8e8;
    --accent: #BFD1E5;
}

body {
    line-height: 1.6;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    background-color: var(--light);
    color: var(--dark);
}

img {
    width: 100%;
}

h1 {
    font-size: 200%;
    font-weight: 900;
}

h2 {
    font-size: 175%;
    font-weight: 700;
}

h3 {
    font-size: 150%;
    font-weight: 500;
}

strong {
    font-weight: bold;
}

/* Remove any link styling */
a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 700;
}

a:visited {
    text-decoration: none;
    color: var(--dark);
}

/* Keep link underline when hovered */
a:hover,
a:focus {
    text-decoration: underline;
}

.flex-container {
    display: flex;
}

.grid-container {
    display: grid;
}

/* Button styling */
.btn {
    background-color: var(--light);
    border: solid 2px var(--dark);
    border-radius: 2px;
    padding: 8px 10px;
}

/* Invert colors when button is hovered over or tabbed onto */
.btn:hover,
.btn:focus {
    background-color: var(--dark);
}

a.btn:hover,
a.btn:focus {
    color: var(--light);
}

/* Skip to Main Content Button */
.btn.skip-content {
    /* Hide button until tabbed onto */
    position: absolute;
    top: -100px;
}

a.btn.skip-content:focus {
    z-index: 1;
    top: 10px;
    left: 10px;
}

/* Navigation Styling */
/* Toggle Button */
a.toggle-nav {
    color: var(--light);
    font-size: 125%;
}

/* Menu */
.menu {
    position: relative;
    top: 25px;
    left: 25px;
    display: inline-block;
}

.menu ul.active {
    /* Navigation links initially hidden for mobile */
    display: none;
}

.menu-list {
    position: absolute;
    top: 120%;
    left: 10px;
    padding: 10px 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    background-color: var(--dark);
}

/* Small triangle */
.menu-list:after {
    width: 0;
    height: 0;
    position: absolute;
    top: 0%;
    left: 25px;
    content: '';
    transform: translate(0%, -100%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--dark);
}

.menu-item {
    margin: 5px 0 5px 0;
    display: block;
}

.menu-item a {
    color: var(--light);
}

.menu a {
    display: block;
}

.menu a {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    color: var(--light);
    transition: color linear 0.15s;
}

.menu a:hover,
.menu a:focus {
    text-decoration: none;
    color: var(--accent);
}

a.toggle-nav {
    padding: 5px 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    border: 2px solid white;
    border-radius: 5px;
    background: var(--dark);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    color: var(--light);
    transition: color linear 0.15s;
}

.toggle-nav:hover,
.toggle-nav:focus,
.toggle-nav.active {
    color: var(--accent);
}

/* Section Breaks Styling */
.break {
    font-size: 50%;
    text-align: center;
    margin: 0 auto;
}

.break i {
    color: var(--dark);
    padding: 2.5px;
}

/* Creates space between each section */
.break {
    padding: 100px 0 50px 0;
}

/* Add padding to top of section <h2> so that <h2> is visible
   when navigating to the section since we have a fixed navigation bar */
#education,
#work,
#projects,
#activities {
    padding-top: 50px;
}

/* Introduction Styling */
.introduction {
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: center;
    padding: 100px 0;
    margin: 0 auto;
    max-width: 75%;
    row-gap: 50px;
}

.intro-photo img {
    /* Headshot cirlce */
    border-radius: 50%;
    width: 80%;
    /* Center img within div */
    display: block;
    margin: 0 auto;
}

.intro-text {
    text-align: center;
}

.hometown,
.school {
    /* Bring icons and text side-by-side */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 5px;
    /* Center icons and text */
    align-items: center;
    /* Separate two icons */
    margin-bottom: 10px;
}

.hometown p.icon::before {
    font: var(--fa-font-solid);
    content: '\f276';
    position: relative;
    right: 5px;
}

.school p.icon::before {
    font: var(--fa-font-solid);
    content: '\f19c';
}

p.icon::before {
    /* Create space between icon and text */
    position: relative;
    right: 5px;
}

p.icon {
    /* Bring back in line with text above */
    padding-left: 5px;
}

.school {
    /* Separate school from "Learn More" button */
    margin-bottom: 25px;
}

a.learn-more {
    transition: color linear 0.15s;
    text-align: center;
    width: 50%;
    display: block;
    margin: 0 auto;
}

/* Education Styling */
.education {
    /* Grid container holding four different sections of education segment */
    grid-template-columns: 1fr;
    margin: 10px auto 25px auto;
    row-gap: 25px;
}

#education h2 {
    margin: 0 10px 0 50px;
}

.university,
.languages,
.tech-skills {
    padding: 0 50px;
}

.courses {
    margin: 0 auto;
}

.languages-list,
.tech-skills-list {
    list-style: circle;
    padding-left: 25px;
}

/* Awards styling within education */
.awards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    /* Keeps two award cards centered */
    margin: 50px auto;
}

/* Each award on a colored 'card' */
.awards div {
    background-color: var(--dark);
    color: var(--light);
    border-radius: 20px;
}

.awards i {
    /* Increase size of icon */
    font-size: 500%;
    padding: 15px;
}

.award-one,
.award-two,
.award-three {
    padding: 15px;
    /* Keep two cards same width */
    flex-grow: 1;
    max-width: 60%;
    margin: 0 auto;
}

/* Relevant Coursework */
.courses {
    padding: 0 50px;
}

.courses h3,
.course-item {
    margin-bottom: 10px;
}

.course-item {
    padding-bottom: 5px;
    border-bottom: solid 1px var(--dark);
}

/* Projects Styling */
#projects {
    /* Inverted color scheme */
    background-color: var(--dark);
    /* Need margin to make 100px between top of section and break circles */
    margin-top: 50px;
    padding-bottom: 50px;
}

#projects h2 {
    color: var(--light);
    padding: 0 10px 25px 50px;
}

.projects {
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 15px auto;
    max-width: 80%;
}

.proj-info {
    background: var(--light);
    flex-direction: row;
    /* Icon above text */
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.proj-icon i {
    font-size: 500%;
    padding: 50px 50px 25px 50px;
}

.proj-details {
    padding: 25px;
}

.proj-role {
    font-style: italic;
    border-bottom: solid 1px var(--dark);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.proj-skills {
    font-weight: 600;
    padding-top: 15px;
}

.skills-list {
    list-style: circle;
    padding-left: 25px;
}

/* Work Experience Styling */
#work h2 {
    padding-left: 50px;
    padding-bottom: 25px;
}

.jobs,
.activities {
    grid-template-columns: 1fr;
    row-gap: 25px;
    padding: 15px 50px 0 50px;
    margin: 0 auto;
    max-width: 75%;
}

.job {
    background-color: var(--accent);
    padding: 25px;
    border: 2px solid var(--dark);
}

h4.position,
h4.proj-role {
    font-style: italic;
    font-size: 115%;
}

ul.responsibilities {
    padding-top: 15px;
    padding-left: 15px;
    list-style: circle;
}

/* Extracurriculars Styling */
.org {
    padding: 25px;
    border: 2px solid var(--dark);
}

h4.org-role {
    font-size: 115%;
    font-style: italic;
}

/* Footer Styling */
footer {
    margin-top: 100px;
}

footer h2,
footer h3 {
    text-align: center;
    padding: 10px;
}

.socials-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}

.social-item {
    padding: 5px 10px;
}

.social-item:not(:last-child) {
    /* Separate links with vertical lines */
    border-right: 1px solid var(--dark);
}

.social-item a {
    font-weight: 400;
}

.social-item a:hover {
    font-weight: 600;
}

footer h2 {
    font-size: 125%;
}

footer h3 {
    font-size: 100%;
}

/* Tablet View */
@media screen and (min-width: 640px) {

    /* Center section headings (except extracurricular) */
    #education h2,
    #work h2,
    #projects h2 {
        margin: 0;
        padding: 0 0 25px 0;
        text-align: center;
    }

    /* Navigation Styling */
    /* Want to display our navigation links now in top nav bar */
    .menu ul.active {
        display: block;
    }

    a.toggle-nav {
        /* Hide hamburger toggle button */
        display: none;
    }

    .menu {
        width: 100%;
        /* Top nav bar scroll with page */
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        background-color: var(--dark);
    }

    /* Account for open and closed nav links in mobile */
    .menu ul.active,
    .menu ul {
        /* Horizontal row of nav links */
        position: unset;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 10px 10px 25px;
        list-style: none;
    }

    .menu-item {
        margin: 0 25px 0 0;
    }

    .menu-list:last-child {
        margin-right: 0;
    }

    /* Introduction Styling */
    .introduction {
        flex-wrap: nowrap;
        /* Increase top margin because now have navigation bar */
        padding-top: 175px;
        column-gap: 25px;
    }

    .intro-text,
    .intro-photo {
        /* Each take half of container */
        max-width: 50%;
        padding: 10px;
    }

    .intro-photo img {
        width: 100%;
    }

    .intro-text {
        text-align: left;
        margin: auto 0;
    }

    .hometown,
    .school {
        justify-content: left;
    }

    /* Education Styling */
    .education {
        grid-template-columns: 1fr 1fr;
        max-width: 75%;
    }

    .university,
    .courses,
    .awards {
        grid-column: 1 / -1;
    }

    .award-one,
    .award-two,
    .award-three {
        max-width: 50%;
    }


    /* Projects Styling */
    .projects {
        gap: 50px;
    }

    .proj-info {
        margin: 0;
    }

    .proj-info:nth-child(odd) {
        justify-self: start;
    }

    .proj-info:nth-child(even) {
        justify-self: end;
    }

    /* Work Experience Styling */
    .jobs {
        /* Uncomment to put jobs in three columns */
        /* grid-template-columns: 1fr 1fr 1fr; */
        column-gap: 25px;
    }

    /* Extracurriculars Styling */
    .activities {
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
    }

    .activities h2 {
        align-self: center;
        padding: 25px;
        text-align: center;
    }
}

/* Tablet View >= 640px */

/* Desktop View */
@media screen and (min-width: 1024px) {

    /* Introduction Styling */
    .introduction {
        column-gap: 50px;
    }

    /* Education Styling */

    .languages {
        justify-self: self-end;
    }

    .tech-skills {
        justify-self: self-start;
    }

    .languages,
    .tech-skills {
        padding-top: 25px;
    }

    /* Projects Styling */
    .projects {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .proj-icon {
        align-self: center;
        justify-self: center;
    }

    .proj-details {
        align-self: start;
    }

    /* Work Experience Styling */

    /* Extracurriculars Styling */
}

/* Desktop View >= 1024px */