/***************************
Color Scheme
****************************/
:root{
    --extra-dark-blue: #03111A;
    --dark-blue: #031825;
    --navy-blue: #102837;
    --portfolio-card-bg: #0A202E;
    --yellow: #f9c08e;
    --text-white: #fff;
    --text-off-white: ##E8EBED;
    --text-gray: #9BA1A4;
    --pill-shadow: rgba(255, 171, 54, 0.25);
    --portfolio-card-shadow: #183446;
}

/****************************
    General Styles 
****************************/
* {
    box-sizing:border-box;
}
body{
    background-color:#031825;
    font-family: "Lato", sans-serif;
    color:#E8EBED;
    font-size:1em;
    font-weight:300;
    line-height:1.3;
    letter-spacing:.5px;
    padding:0;
    margin:0;
}
p::selection,
span::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
dl::selection,
dt::selection{
    background-color:var(--yellow);
    color:var(--dark-blue);
}

.container{
    padding-left:2em;
    padding-right:2em;
}

/* Headers and Text styles */
h1.subheader{
    color:var(--text-white);
    font-size:2.5em;
    font-weight:900;
    line-height:1;
}
h2{
    color:var(--yellow);
    font-size:1.25em;
    font-weight:800;
    line-height:1;
    margin:0.25em 0;
}
h3 span.header-text{
    color:var(--yellow);
    font-size:1.5em;
    font-weight:800;
    line-height:1;
    margin:.25em 0;
    display:block;
    text-align:center;
}
h4.list-header{
    color:var(--yellow);
    font-size:1.2em;
    font-weight:700;
    line-height:1;
    margin-bottom:.5em;
}

p.list-subheader{
    font-weight:700;
    color:var(--text-white);
}

/* Links */
a{
    color:var(--text-off-white);
    text-decoration:underline;
    line-height:1.2;
    font-weight:700;
}
a:hover,
a:focus,
a:active{
    color:var(--text-white);
    text-decoration:none;
}
a.yellow-link{
    color:var(--yellow);
}
a.yellow-link:hover,
a.yellow-link:focus,
a.yellow-link:active{
    color:var(--yellow);
}

/****************************
    General Section Styles 
****************************/
section{
    padding:1px 0 2em;
}
section span.dotted-line{
    display:none;
}
@media(min-width:768px){
    section h3{
        display:flex;
    }
    section span.header-text{
        display:inline-block;
        text-align:left;
    }
    section span.dotted-line{
        position:relative;;
        left:8px;
        top:1.125em;
        z-index:-100;
        display:block;
        flex-grow:2;
        border-top:1px dotted var(--yellow);
    }
}

/****************************
    Header Nav Styles
    (Desktop Only)
****************************/
header{
    padding:4em 0;
}
header nav{
    display:none;
}
@media(min-width:1200px){
    /* Split Screen styles */
    .desktop-view{
        display:flex;
    }
    main{
        width:60%;
    }

    /* Desktop Header Styles */
    header{
        width:40%;
    }
    header div.container{
        position:sticky;
        top:4em;
        left:2em;
    }
    header nav{
        width:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:3em;
    }
    header ul.chained-nav{
        padding:0;
        padding-left:18px;
        list-style-type:none;
        display:inline-block;
    }
    header ul.chained-nav li{
        position:relative;
    }
    header ul.chained-nav li:not(:last-child){
        margin-bottom:1.5em;
    }
    header ul.chained-nav li:before{
        content:'';
        display:block;
        width:18px;
        height:18px;
        border:2px solid var(--yellow);
        border-radius:50%;
        background-color:var(--dark-blue);
        position:absolute;
        left:-28px;
    }
    header ul.chained-nav li:not(:last-child):after{
        content:'';
        display:block;
        width:2px;
        height:30px;
        position:absolute;
        background-color:var(--yellow);
        left:-20px;
        top:18px;
    }
    header ul.chained-nav li.active:before{
        background-color:var(--yellow);
    }
    header ul.chained-nav li a{
        color:var(--text-white);
        font-weight:bold;
        text-decoration:none;
        font-size:1.1em;
    }
    header ul.chained-nav li.active a{
        color:var(--yellow);
    }
}

/****************************
    About Styles 
****************************/
#about h3{
    margin-bottom:1em;
}
#about .about-wrapper > p{
    margin-bottom:2em;
}
#about .about-skills{
    width:100%;
    max-width:400px;
    margin:0 auto;
}
#about .about-edu ul,
#about .about-stack dl{
    width:100%;
    padding:0 1.5em;
}
#about .about-edu ul{
    margin-bottom:3em;
    list-style-type:none;
}
#about .about-edu ul li{
    margin-bottom:1em;
}
#about .about-edu ul p,
#about .about-stack dt{
    margin-bottom:.25em;
}
#about .about-stack dd{
    margin-bottom:1em;
}
#about .about-stack dt{
    font-weight:bold;
}
@media(min-width:768px){
    #about{
        padding-top:3em;
    }
    #about .about-skills{
        max-width:800px;
        display:flex;
    }
    #about .about-edu,
    #about .about-stack{
        width:50%;
    }
}

/****************************
    Portfolio Styles 
****************************/
#portfolio h3{
    margin-bottom:1.5em;
}
#portfolio a.portfolio-card{
    text-decoration:none;
    color:var(--text-off-white);
    display:block;
    padding:2em 1.5em 1.5em;
    border-radius:15px;
}
#portfolio a.portfolio-card:not(:last-child){
    margin-bottom:2em;
}
#portfolio .portfolio-wrapper a.portfolio-card *{
    opacity:1;
    transition: opacity 0.5s;
}
#portfolio .portfolio-wrapper:hover a.portfolio-card *,
#portfolio .portfolio-wrapper:focus a.portfolio-card *{
    opacity:0.4;
}
#portfolio a.portfolio-card:hover,
#portfolio a.portfolio-card:focus,
#portfolio a.portfolio-card:active{
    background-color:var(--portfolio-card-bg);
    box-shadow:-1px 1px 2px var(--portfolio-card-shadow);
}
#portfolio a.portfolio-card:hover *,
#portfolio a.portfolio-card:focus *,
#portfolio a.portfolio-card:active{
    opacity:1 !important;
}
#portfolio h4.portfolio-header{
    color:var(--text-white);
    font-size:1.5em;
    font-weight:800;
    line-height:1;
    margin-bottom:12px;
}
#portfolio p{
    color:var(--text-off-white);
    text-decoration:none;
    font-weight:300;
}
#portfolio .pills-wrapper{
    display:flex;
    align-items:center;
    flex-wrap: wrap;
}
#portfolio .pill{
    background-color:var(--navy-blue);
    padding:.5em 1em;
    box-shadow:-1px 1px var(--pill-shadow);
    border-radius:20px;
    margin-bottom: .5em;
}
#portfolio .pill:not(:last-child){
    margin-right:1em;
}
#portfolio .pill p{
    color:var(--yellow);
    font-weight:500;
    text-decoration:none;
    text-align:center;
    margin:0;
}

/****************************
    Contact Styles 
****************************/
#contact{
    padding:3em 0;
}
#contact h3{
    margin-bottom:28px;
}
#contact .contact-wrapper{
    list-style-type:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-left:0;
}
#contact .contact-wrapper li{
    margin-bottom: 12px;
}
#contact .contact-wrapper h4{
    font-size:1.3em;
    font-weight:bold;
    margin-bottom:0;
    display:inline-block;
}
#contact .contact-wrapper a{
    display:inline-block;
    margin-left:4px;
}
#contact .contact-wrapper a:hover,
#contact .contact-wrapper a:focus,
#contact .contact-wrapper a:active{
    color:var(--yellow);
    text-decoration:none;
}
@media(min-width:768px){
    #contact .contact-wrapper{
        flex-direction:row;
        justify-content:space-evenly;
    }
    #contact .contact-wrapper li{
        margin-bottom:0;
    }
    #contact .contact-wrapper a{
        margin-bottom:0;
    }
}