body {
    background-color: #0d0337;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(168, 172, 202);
}
html{
    overscroll-behavior: none;
}

::-moz-selection { /* Highlighting for Firefox */
    color: rgb(51, 42, 84);
    background: rgb(122, 138, 199);
}
  ::selection { /* Highlighting */
    color: rgb(51, 42, 84);
    background: rgb(122, 138, 199);
}

/*#region StylingLinks*/
    a:link {
        color: pink;
        background-color: transparent;
        text-decoration: none;
    }
    a:visited {
        color: aquamarine;
        background-color: transparent;
        text-decoration: none;
    }
    a:hover {
        color: lavender;
        background-color: transparent;
        text-decoration: underline;
    }
    a:active {
        color: aquamarine;
        background-color: transparent;
        text-decoration: underline;
    }
 /*#endregion */

/*#region NavigationMenu*/
    #navigationWrapper {
        display: flex;
        justify-content: center;
        background-color: #371658;
    }
    .NavigationPic {
        display: flex;
        justify-content: flex-start;
        filter:brightness(70%)
    }
    .NavigationPic:hover {
        filter: brightness(80%);
        transform: scale(1.02);
        filter: drop-shadow(20px 10px 4px #0e0944) ;
        transition: all 0.3s ease;
    }
/*#endregion*/

/*#region HamburgerMenu*/
    .navmob { /* Style the navigation menu */
    overflow: hidden;
    background-color: #371658;
    position: relative;
    width: 100%; 
    }
    .navmob #navigationButtons { /* Hide the links inside the navigation menu (except for logo/home) */
    display: none;
    }
    .navmob a { /* Style navigation menu links */
    color: rgb(218, 226, 237);
    padding: 20px 30px;
    text-decoration: none;
    font-size: 17px;
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .navmob a.icon { /* Style the hamburger menu */
        background-color: #371658;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    }
    .navmob a:hover { /* Add a background color on mouse-over */
        background-color: #14054d;
    color: rgb(229, 234, 241);
    }
    .active { /* Style the active link (or home/logo) */
        background-color: #371658;
    color: white;
    }
 /*#endregion */

#transitionIMG {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

#headerWrapper{
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 60;
    background-color: #3e2458;
}

/*#region project 1*/
    #titleWrapperIns{
        display: flex;
        justify-content: center;
        background-color: #462863;
        margin-top: 0px;
    }
    #infoIns{
        background-color:  #462863;
        display: flex;
        justify-content: center;
    }
    #text{
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 30px;
        margin-right: 100px;
        font-size: 20px;
        text-align: justify;
    }
    #textIns{
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 100px;
        margin-right: 30px;
        font-size: 20px;
        text-align: justify;
    }
    #cardPics{
        display: flex;
        flex-direction: column;
        margin-right: 50px;
    }
    .picRow{
        display: flex;
        flex-direction: row;    
    }
    #cardIMG{
        display: flex;
    }
 /*#endregion*/

 /*#region project 2*/
    #titleWrapperCho{
        display: flex;
        justify-content: center;
        background-color: #463a6b;
        margin-top: 0px;
    }
    #picsCho{
        margin-left: 100px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    #infoCho{
        background-color:  #463a6b;
        display: flex;
        justify-content: center;
    }
    #textCho{
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 30px;
        margin-right: 100px;
        font-size: 20px;
        text-align: justify;
    }
 /*#endregion */

 /*#region project 3*/
    #titleWrapperBlu{
        display: flex;
        justify-content: center;
        background-color: #342a6b;
        margin-top: 0px;
    }
    #infoBlu{
        background-color: #342a6b;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    #picsBlu{
        display: flex;
        flex-direction: row;  
        margin-right: 100px;
    }
    #textBlu{
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 100px;
        margin-right: 30px;
        font-size: 20px;
        text-align: justify;
    }
 /*#endregion */

/*#region project 4*/
    #titleWrapperNigh{
        display: flex;
        justify-content: center;
        background-color: #1e0e5f;
        margin-top: 0px;
    }
    #infoNigh{
        background-color: #1e0e5f;
        display: flex;
        justify-content: center;    
    }
    #vidNigh{
        display: flex;
        flex-direction: row;  
        justify-content: space-around;
        margin-left: 50px;
    }
    #textNigh{
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 30px;
        margin-right: 100px;
        font-size: 20px;
        text-align: justify;
    }
 /*#endregion */

/*#region project 5*/
    #titleWrapperMisc{
        display: flex;
        justify-content: center;
        background-color: #0f014a;
        margin-top: 0px;
    }
    #infoMisc{
        background-color: #0f014a;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    #infoWeb{
        background-color: #0f014a;
        display: flex;
        justify-content: center;
    }
    #MiscImg{
        background-color: #0f014a;
        display: flex;
        margin-right: 100px;
        flex-direction: column;
    }
    #webImgs{
        background-color: #0f014a;
        display: flex;
    }
    #ytVids{
        display: flex;
        justify-content: center;
        flex-direction: row;
        background-color: #0f014a;

    }#textMisc{
        display: flex;
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 100px;
        margin-right: 30px;
        font-size: 20px;
        text-align: justify;
    }

 /*#endregion*/

/*#region @media*/
@media only screen and (max-width: 420px){/*stop video overflow on mobile?*/
    #vidNigh{
        width: 320px;
        margin-left: 10px;
    }
}

@media only screen and (max-width: 800px){/* change order and margins for mob*/
    .NavigationPic{
        display: none;
    }
    #textIns{
        margin-left: 5%;
        margin-right: 5%;
    }
    #cardPics{  
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: 0px;
    }
    .picRow{
        justify-content: center;
    }
    #infoIns{
    flex-direction: column;
    }
    #infoCho{
        flex-direction: column-reverse;
    }
    #textCho{
        margin-left: 5%;
        margin-right: 5%;
    }
    #picsCho{
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 30px;
    }
    #ChoPic{
        width: 100%;
        height: auto;
        margin-left: 0%;
        margin-right: 0%;
    }
    #infoBlu{
        flex-direction: column;
    }
    #textBlu{
        flex-direction: column;
        margin-left: 5%;
        margin-right: 5%;
    }
    #picsBlu{
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 10px;  
        margin-right: 0px;
        width: 100%;
        height: auto;
    }
    #BlubImage{
        margin-left: 10%;
        margin-right: 10%;  
        width: 100%; 
        height: auto;
    }
    #infoNigh{
        flex-direction: column;  
    }
    #textNigh{
        margin-left: 5%;
        margin-right: 5%;
    }
    #vidNigh{
        display: flex;
        margin-left: 0%;
        margin-right: 5%;
    }
    #ytVids{
        flex-direction: column;

    }
}

@media only screen and (min-width: 701px){/* hide mobile nav menu*/
     .navmob{
        display: none;
    }
    #navmob{
        display: none;
    }
        .NavigationPic{
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 2500px){/* add margins for wide screen*/
    #cardPics{
        margin-right: 15%;
    }
    #textIns{
        margin-left: 15%;
    }
    #picsCho{
        margin-left: 15%;
    }
    #textCho{
        margin-right: 15%;   
    }
    #picsBlu{
        margin-right: 15%;
    }
    #textBlu{
        margin-left: 15%;   
    }        
    #vidNigh{
        margin-left: 250px;
    }
    #textNigh{
        margin-right: 15%;   
    }
}

@media only screen and (min-width: 3500px){/* add margins for widescreen*/
    #cardPics{
        margin-right: 28%;
    }
    #textIns{
        margin-left: 30%;
    }
    #infoCho{
        flex-direction: column;
    }
    #picsCho{
        margin-left: 33%;
        margin-right: 30%;
    }
    #textCho{
        margin-right: 30%;   
        margin-left: 30%;
    }
    #picsBlu{
        margin-right: 30%;
    }
    #textBlu{
        margin-left: 30%;   
    }        
    #vidNigh{
        margin-left: 27%;
    }
    #textNigh{
        margin-right: 30%; 
        margin-left: 120px;  
    }
}
/*#endregion */