:root {
    --brand1st: #417057;
    --brand2nd: #A9C7C3;
    --brandBlack: #141915;
  }

html {
   
    scroll-behavior: smooth;

}

.vh-75 {

height: 75vh;

}

.row, .row>* {

    margin:0;
    padding: 0;

}

body{
    display: block;
    margin:0;
    padding: 0;
    margin-top: 25px;
    background-color: white;
    

}

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%;
}



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




/* Sidebar / Skill Section */

#sideBar a {

    font-family: "Atkinson Hyperlegible", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--brand2nd) !important;
    font-size: 24px;


}

#sideBar a:hover {

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

}

#sideBar{
    
    margin-top:25px;
   
}

#sideBarInternal {

    background-color: var(--brandBlack);

}

#sideBar hr {

    color: var(--brand1st);

}

#sideBarInternal span {

    color:white;

}




#sideBar div {

    margin-left: calc(var(--bs-gutter-x)* .5);
    width: 90%;

}

/* Body Section */

section h2 {

    text-align: left;

}

.overviewColumns {

    background-color: var(--brandBlack);

}


.objectiveColumns {

    background-color: var(--brand1st);
    min-height: 550px;

}

.objectiveColumns h1, .objectiveColumns h3 {

    color: white;

}

#research strong {

    color: var(--brand2nd)

}



#sketches {

    min-width: 100%;

}

.carousel-item, .carouselWrapper {

    width: fit-content;

}


.carousel h2, .carouselWrapper h2{

    text-align: center;

}

#carousel3 .carousel-inner {

    border: 1px solid white;

}

.carousel-control-next, .carousel-control-prev{

    height: fit-content;
    background-color: var(--brandBlack);

}

#overviewGrid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1.75fr;
    grid-template-areas: 
    "theProblem theProblem theProblem theSolution theSolution theSolution"
    "problemBetter problemBetter overviewImage overviewImage solutionBetter solutionBetter";

    align-items: center;
    

}

#theProblem {

    grid-area: theProblem;

}

#theProblemSmall {

    background-color: var(--brandBlack);

}

#theSolution {

    grid-area: theSolution;

}

#theSolutionSmall {

    background-color: #323E34;

}

#problemBetter {

    grid-area: problemBetter;

}

#solutionBetter {

    grid-area: solutionBetter;

}

#overviewImage {

    grid-area: overviewImage;

    
}

#overviewImageSmall {

    background-color: #323E34;

}

#problemSideBg {

background-color: var(--brandBlack);

}

#solutionSideBg {

    background-color: #323E34;
    
    }

#usabilityStudy {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr min-content;
    grid-template-areas: 
    "beforeUS beforeUS beforeUS afterUS afterUS afterUS"
    "beforeUSExtra beforeUSExtra overviewText overviewText afterUSExtra afterUSExtra";

    align-items: start;
    
}

#beforeUS {

    grid-area: beforeUS;

}

#afterUS {

    grid-area: afterUS;

}

#beforeUSExtra {

    grid-area: beforeUSExtra;

}

#afterUSExtra {

    grid-area: afterUSExtra;

}

#overviewText {

    grid-area: overviewText;

}

#problemSideBg {

background-color: var(--brandBlack);

}

#testing img{

    max-width: 390px;
    max-height: 844px;

}

#nextSteps, #designingPrototyping, #ideation, #research, #finalThoughts, #cardIterations {

    background-color: var(--brandBlack);

}

#nextSteps h1, #nextSteps h2, #nextSteps h3, #nextSteps p, #designingPrototyping h1, #designingPrototyping h2, #designingPrototyping h3, #designingPrototyping p, #ideation h1, #ideation h2, #ideation h3, #ideation p, #research h1, #research h2, #research h3, #research p, #research li,  #overview h3, #theProblem p, #theSolution p, #theProblemSmall p, #theSolutionSmall p, #problemBetter p, #solutionBetter p, #usabilityStudy h3, #overviewText p, #finalThoughts h1, #finalThoughts h2, #finalThoughts h3, #finalThoughts p  {

    color:white;

}

#nextSteps h1, #nextSteps h2, #designingPrototyping h1, #designingPrototyping h2, #ideation h1, #ideation h2, #research h1, #research h2, #finalThoughts h1, #finalThoughts h2 {

    color:var(--brand2nd);

}


/* 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:#FE922D

}

footer img {

    max-width: 150px;

}




  /* Animation States */




  .buttonHover {

    background-color: #198CFF;
    color:black;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.50));
    transition: .3s;

}

.navButton:active, button:active {

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

}

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

    #overviewGrid {

        display: grid;
    
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "theProblem theProblem theProblem theSolution theSolution theSolution"
        "problemBetter problemBetter overviewImage overviewImage solutionBetter solutionBetter";
    
        align-items: center;
        
    
    }

    

}

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

    #overviewGrid {
    
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr .5fr;
        
    
    }

    #usabilityStudy{

        display: none;

    }

}



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

    
    .nav-item {
    
        width: 100%;
    
    }

    button, .navButton{

        border-radius: 10px;
        border-color: transparent;
        background-color: transparent;
        padding: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 20px;
        font-family: "Lemonada", cursive;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        cursor: pointer;
    
    }


  }

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

    #overviewGrid {
    
        display: none;
        
    
    }

}