/* 
Notes:
other colors - 
#ff4d5a; -red
#feda4a; - golen yellow
#ff6; -canary yellow
rgb(75, 213, 238) -robin blue
#4beed0 -close-enough easter turquoise green

Fonts 
'News Cycle", sans-serif;' ex. 1
'Pathway Gothic One', sans-serif; ex. 2
*/

/* Base Styling */
html {
    background-color: black;
    color: #fafafa;
    font-family: montserrat, sans-serif;

    a {
        text-decoration: none;
    }

    h1 {
        color: #4beed0;
        font-size: 2rem;
        margin: 1rem 0;
        text-align: center;
    }

    h2 {
        font-size: 1.25rem;
        margin: 0.25rem 0 1rem 0;
    }

    h3 {
        font-style: italic;
        margin: 1rem 0;
    }
    
    li {
        margin: .25rem 0;
    }

    p {
        line-height: normal;
    }
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.clickable-link a {
    color: #feda4a;

    &:link, &:visited {
        color: #feda4a;
    }

    &:hover {
        /* color: #ff4d5a; */
        /* color: #0693e3; */
        color: #4CB7F6;
    }

    &:active {
        color: #4beed0;   
    }
}

#nav-bar-container {
    position: sticky;
    top: 0;
    left: 0;
}

#nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(40, 40, 40, 0.95);
    color: #fafafa;
    padding: 0.75rem 1rem;
    width: 100%;
    z-index: 999;
}

#nav-bar a {
    padding: 0 0.5rem;
    text-align: center;
}

#nav-bar a {
    color: #fafafa;

    &:link, &:visited {
        color: #fafafa;
    }

    &:hover {
        /* color: #ff4d5a; */
        /* color: #0693e3; */
        color: #4CB7F6;
    }

    &:active {
        color: #feda4a;
    }
}

#nav-bar a.menu-icon {
    display: none;
    color: #fafafa;
}

.section {
    padding: 2rem 10%;
}

#home-section {
    padding-top: 8rem;
    text-align: center;
}

#about-content {
    margin: 0 20%;
    text-align: center;
}

#resume-link {
    text-align: center;
}

#resume-link a {
    font-size: 1.25rem;
}

#interests {
    text-align: center;
}

.work-history-item {
    margin-bottom: 2.75rem;
    margin-left: 15%;
    margin-right: 15%;
}

.work-history-item-title {
    font-size: 1.25rem;
}

.work-history-item-subtitle {
    font-style: italic;
    margin: 0.5rem 0 .75rem 0;
}

.work-history-item-last {
    margin-bottom: 0rem;
}

#projects {
    text-align: center;
}

.projects-item {
    margin: 1.5rem 1rem;
}

.projects-item h2 {
    margin: 0.25rem 0;
}

#education {
    text-align: center;
}

.education-item {
    margin-top: 1.5rem;
}

.education-item h2 {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.connect-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: .5rem;
}
.connect-type {
    font-style: italic;
    margin: 0 .75rem 0 0;
}

#footer {
    padding: 1rem 2rem;
    text-align: right;
}

/* Video element */
.video-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -2;
    height: 100%;
    width: 100%;
}

.video-container video {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
}


/* Media Breakpoints for responsive design */

/* SMALLER THAN A TABLET, PHONES */
@media only screen and (max-width: 768px) {
    #nav-bar a:not(:first-child) { 
        display: none;
    }

    #nav-bar a.menu-icon {
        float: right;
        display: block;
        padding-right: 2rem;
    }

    #nav-bar.responsive a.menu-icon {
        padding: .75rem 1.25rem;
        position: absolute;
        right: 1.5rem;
        top: .125rem;
        z-index: 9998;
    }

    #nav-bar.responsive a {
        float: none;
        display: block;
        padding: .5rem .5rem;
        text-align: left;
    }

    #about-content {
        margin: 0;
    }

    .work-history-item {
        margin-left: 0;
        margin-right: 0;
    }

    .education-item h2 {
        line-height: 1.625rem;
    }
}

/* TABLETS */
@media only screen and (max-width: 992px) {

}

/* DESKTOP AND LARGER */
@media only screen and (min-width: 992px) {

}