@font-face {
    font-family: WALTS; /* CAN BE ANYTHING YOU WANT */
    src: url('font/waltograph42.otf');
  }

.walts{
    font-family: WALTS;
    font-size: xx-large;
}

@font-face {
    font-family: Raleway;
    src: url('/font/Raleway/static/Raleway-Medium.ttf');
}

.Raleway{
    font-family: Raleway;
}


html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}
/*body*/
body{
    background-color: #FFFFFE;
    min-height: 100%;
    margin-bottom: 60px;
}

/* header */

#header {
    position: sticky;
    width: 100%;
    background-color: white;
    top: 0;
    z-index: 23;
}



#root {
    position: relative;
}

.nav-item{
    text-transform: uppercase;

}

.navbar-toggler{
    border: none;
}

.navbar-brand{
    font-size:medium;
}
/*
.nav-item.active{
    border-bottom-style: solid;
    border-color: black;
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-linke{
    background-color: transparent;
    color: black;    
}
*/

#myHomeImage, #contact-me-icon{
    width: 100%;
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
}
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; 
    line-height: 60px;
}
#footer-quote-container{
    text-align: center;
    font-style: italic;
    font-size: 1em;
}

.portfolioCategory{
    font-size: xx-large;
}

.card-text{
    text-align: left;
}

.get-in-touch{
    margin-top: 10vh;
    position: relative;
    max-width: 350px;
}

hr {
    width: 100px;
    margin-left: 0%;
    border: 1px solid lightgray;
}

#moreDetailToggle {
    width: 100%;
}

.portfolio-section{
    color: grey;
}

.portfolio-section:hover{
    color: black;
}

#portfolio-section-select{
    opacity: 1;
    z-index: 1;
    
}

.portfolio-section-select-active {
    color: black;
    /* border-style: none none solid none;
    border-width: 1px;
    border-color: grey; */
    text-decoration: none;
 
}



.portfolio-section-select-not-active {
    color: grey;
    text-decoration: none;
 
}

a, .portfolio-section-select-not-active{

}




@media only screen and (max-width: 600px) {
    #footer-quote-container{
        font-size: small;
    }
    
}

@media only screen and (min-width: 992px) {
    .portfolioCategory{
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        text-align: center;
    }

    .btn-getting-smaller{
        display: block;
        width: 100%;
    }

    

}

@media only screen and (min-width: 1199px) {
    #workingExperience, #education{
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

}


@media only screen and (max-width: 992px) {
    .btn-getting-bigger{
        width: 100%;
    }

    .resume-contact-text{
        font-size: x-small;
    }

    .portfolio-section-select, .hide{
        opacity: 0;
        z-index: -99;
        position: absolute;
    }

    #workingExperience, #education{
        overflow: hidden;
        flex-wrap: wrap;
    }
}

.Night{
    background-color: #163057;
    color: white;
}