/* {
    border: red solid 1px;
}
*/

:root {
    --brand1st: #198CFF;
    --brand2nd: #FE922D;
    --brandBlack: #151515;
}



.row, .row>* {

    margin:0;
    padding: 0;

}

html {
   
    scroll-behavior: smooth;

}

body{
    margin:0;
    background-color: #bcdafc69;
    padding: 0;    

}

.w-lg-75{

    width: 75% ;

}


.vh-lg-80 {

    height: 80vh;
        
}

    h1, #sideBar span {

        font-size: 32px;
        font-family: "Lemonada", cursive;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        color: var(--brand1st);
    
    }
    
    h2 {
    
        font-size: 28px;
        color: var(--brand1st);
        text-align: center;
        font-family: "Lemonada", cursive;
        font-optical-sizing: auto;
        font-weight: 550;
        font-style: normal;
    
    }
    
    h3{
    
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: var(--brandBlack);
        font-size: 28px;
    
    
    }
    
    p, li{
    
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: var(--brandBlack);
        font-size: 24px;
    
    
    }



button, .button, .navButton{

    border-color: transparent;
    background-color: #FE922D;
    font-size: 20px;
    font-family: "Lemonada", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;

}

.active {

    background-color: #198CFF !important;
    color:white !important;

}



#pageContent {

    display: flex;
    flex-direction: row;
    margin-left: 25px;

}

.noDecoration {

    text-decoration: none;

}

/* Nav Section */


.navbar-nav {
    display: flex;
    vertical-align: top;
    text-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}

.navbar {

    height: min-content

}



.navButton {
    text-decoration: none;
    color: var(--brandBlack);
}


/* Sidebar / Skill Section */




.skill {
    background-color: #bcdafc;
    text-align: center;
    font-weight: 700;

}



/* Hero Banner */


#heroBanner {

    background: url(/img/portfolio-banner-image.png);  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#heroBanner button, #heroBanner a, #heroBannerStack a {

    width: max-content;
    text-decoration: none;
    color: var(--brandBlack)

}

#heroBanner h1 {

    font-size: 32px;
    font-family: "Atkinson Hyperlegible", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: white;

}

#heroBanner p {

    font-size: 20px;
    color: white;

}

#heroBannerStack h1 {

    font-size: 32px;
    font-family: "Atkinson Hyperlegible", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--brand1st);

}

#heroBannerStack p {

    font-size: 20px;
    color: var(--brandBlack);

}

/* Body Section */

#grin{

    grid-area: grin;

}

#localAdventures{

    grid-area: localAdventures;

}

.workShowcase {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content 1fr;
    grid-template-areas: 
    "title"
    "projectContent";
    background-color: var(--brand2nd);
    text-decoration: none;

}

.projectTitle{

    text-align: center;
    padding: 15px;
    margin-top: auto;
    margin-bottom: auto;
    font-weight: 400;
    color: var(--brandBlack) !important;
    grid-area: title;
    vertical-align: middle;

}

.projectDesc {

    grid-area: projectContent;

}

.projectDesc img{
    
    width: 100%;
    position: relative;
    object-fit: contain;
    z-index: 0;

}

#hiddenText {

    display: none;
    transition: .3s;
    color: white;

}




/* Footer Section */

footer {
    width: 100%;
    background-color: #bcdafc;
    text-align: center;
    color: var(--brandBlack);
    grid-area: Footer;
}

footer div {
    display: inline-block;
    width: 45%;
    text-align: center;
    vertical-align: top;

}

footer h2  {
    color: var(--brandBlack);
}


#contactButtons {

    width: min-content;

}


#contactButtons .button {

    font-weight: 400;
    color: var(--brandBlack);
    font-size: 18px;
    height: min-content;
    min-width: 50px;

}

footer a {

    
    text-decoration: none;
    color: var(--brandBlack)

}

footer a:hover {

    text-decoration: none;
    font-weight: 700;
    color: var(--brand2nd)

}

footer img {

    max-width: 150px;

}

/* Media Queries */

@media only screen and (max-width: 1200px) {

    #heroBanner {

        background: url(/img/portfolio-banner-Small.jpg);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }

    .width-50{

        width: 50%;
    
    }
}


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

    .vh-md-90 {

        height: 90vh;
            
    }


}

@media only screen and (max-width: 768px) {
    .vh-sm-50 {

        height: 50vh;
        
    }

    #hiddenText {

        font-size: 18px;

    }

}

@media only screen and (max-width: 576px) {

    #heroBanner {

        background: url(/img/c2f0ea48-abea-4825-9f33-939d4315d532.jpg);
        background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }

  }

  /* Animation States */




  .buttonHover {

    background-color: var(--brand1st);
    color:white !important;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.50));
    transition: .3s;

}

.navButton:active, button:active, .button:active {

    background-color: var(--brand2nd) !important;
    color:white !important;
    box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.50);
    transition: .3s;

}