@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
body{
    background-color: black;
    color:whitesmoke;
    font-family: 'Josefin Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* generic selectors */
.height-100{
    height:100px;
}
.padding-top-sm{
    padding-top:10px;
}
.padding-top-md{
    padding-top: 25px;
}
.padding-top-lg{
    padding-top: 50px;
}
.padding-bottom-sm{
    padding-bottom:10px;
}
.padding-bottom-md{
    padding-bottom: 25px;
}
.padding-bottom-lg{
    padding-bottom: 50px;
}
.padding-left-sm{
    padding-left:10px;
}
.padding-left-md{
    padding-left: 25px;
}
.padding-left-lg{
    padding-left: 50px;
}
.padding-left-none{
    padding-left: 0px;
}
.padding-right-sm{
    padding-right:10px;
}
.padding-right-md{
    padding-right: 25px;
}
.padding-right-lg{
    padding-right: 50px;
}
.padding-right-none{
    padding-right: 0px;
}
.border-bottom-light {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 25px;
}
.clear-both{
    clear:both;
}
/* bootstrap overrides*/
hr{
    border-top: 1px solid rgba(255,255,255,.1);
}
.container{
    background-color: rgba(2, 224, 253, 0.3);
}
footer.container{
    background-color: rgba(2, 224, 253, 0.4);
}
header.container{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.nav-pills .nav-link{
    border-radius: 0;
    position:relative;
    z-index:1;
}
.nav-pills .nav-link:not(.active) {
    background-color: rgb(38, 140, 153);
    color:#00ffff
}
.nav-pills .nav-link.active {
    background-color: rgb(2, 224, 253);
    font-weight: bold;
}
.nav-pills .nav-link:after{
    position:absolute;
    z-index: -1;
    content:"";
    right: -2%;
    top: 0;
    height:100%;
    width:100%;
    background-color: inherit;
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(-10deg);    
}
.nav-pills .nav-link:before{
    z-index: -1;
    content: "";
    position: absolute;
    left: -2%;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: inherit;
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(-10deg);
}
/*site specific selectors*/
li.resume{
    list-style-type: disclosure-closed;
}
li.portfolio{
    list-style-type: none;
}
a, a:hover{
    color:#da382d;
}
span.height-80{
    font-size:80%;
}
h3.title{
    margin: 1em 0 1em 0;
}
h3.fancy{
    text-align:center;
    line-height: 0.3;
}
h3.fancy span.first-span{
    display: inline-block;
    position: relative;
}
h3.fancy span.first-span:before,h3.fancy span.first-span:after{
    content:"";
    position:absolute;
    height:5px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    top:0;
    width:600px;
}
h3.fancy span.first-span:before{
    right:100%;
    margin-right:15px;
}
h3.fancy span.first-span:after{
    left:100%;
    margin-left:15px;
}
footer{
    border-top: 1px solid rgba(0,0,0,0.4) ;
}
main{
    min-height:100%;
}
/* media queries */
@media(min-width: 576px){
    header div.hero::after{
        max-width: 540px;
    }
}
@media(min-width: 768px){
    header div.hero::after{
        max-width: 720px;
    }
    
}
@media(min-width: 992px){
    header div.hero::after{
        max-width: 960px;
    }
}
@media(min-width: 1200px){
    header div.hero::after{
        max-width: 1140px;
    }
}
@media(max-width:420px){    
    .nav-pills .nav-link{
        font-size: 0.5rem;
        padding: .25rem 0.3rem;
    }
}