body {
    background-color: #74493e;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
html{
    overscroll-behavior: none;
}

::-moz-selection { /* Highlighting for Firefox */
    color: #f3e4da;
    background: #b28173;
}
::selection { /* Highlighting */
    color: #f3e4da;
    background: #b28173;
}

/*#region StylingLinks*/
    a:link {
        color: #54463d;
        background-color: transparent;
        text-decoration: none;
    }
    a:visited {
        color: #54463d;
        background-color: transparent;
        text-decoration: none;
    }
    a:hover {
        color: #e268b5;
        background-color: transparent;
        text-decoration: underline;
    }
    a:active {
        color: #e268b5;
        background-color: transparent;
        text-decoration: underline;
    }
 /*#endregion */

/*#region NavigationMenu*/
#navigationWrapper {
    background-color: #f4efed;
    display: flex;
    justify-content: center;
}
.NavigationPic {
    display: flex;
    justify-content: flex-start;
    filter:brightness(140%);
    filter: sepia(90%);
}
.NavigationPic:hover {
    filter: brightness(120%);
    transform: scale(1.02);
    transition: all 0.3s ease;
    filter: sepia(90%) drop-shadow(20px 10px 4px #594a2ed1) ;

}
/*#endregion */

/*#region HamburgerMenu*/
    .navmob { /* Style the navigation menu */
        overflow: hidden;
        background-color: #f4efed;
        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: #74493e;
        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: #f4efed;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }
    .navmob a:hover { /* Add a background color on mouse-over */
        background-color: #f4efed;
        color: #74493e;
    }
    .active { /* Style the active link (or home/logo) */
        background-color: #debab0;
        color: white;
    }
 /*#endregion */

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

#headerWrapper{
    background-color: #f3e4da;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 35px;
    color: #60544c;
}

/*#region titleblock*/
#titleWrapper{
    background-color: #debab0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#titleTextWrapper{
    background-color: #debab0;
    color: #5d4f46;
    font-size: 30px;
    margin-left: 100px;
    margin-left: 5%;
}
#titleImageWrapper{
    background-color: #debab0;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    color: #5d4f46;
    font-size: 20px;
    margin-right: 10%;
}
/*#endregion*/

/*#region introduction*/
#introductionWrapper{
    background-color: #b28173;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    font-size: 30px;
}
#introductionImageWrapper{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    font-size: 17px;
    margin-left: 5%;
    margin-top: 40px;
    color: #54463d;
}
#introductionTextWrapper{
    background-color: #b28173;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    color: #413127;
    font-size: 30px;
    margin-left: 100px;
    margin-right: 10%;
}
/*#endregion*/

#pageEndWrapper{
    background-color: #efdb84;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

/*#region @media*/
@media only screen and (max-width: 800px){ /* change order and margins for mob*/
    .NavigationPic{
        display: none;
    }
    #titleWrapper{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    #titleTextWrapper{
        margin-left: 0px;
    }
    #titleImageWrapper{
        grid-template-columns: 0.7fr 1fr;
        margin-right: 30px;
        margin-bottom: 20px;
        margin-left: 5px;
    }
    #introductionTextWrapper{
        margin-right: 20px;
        margin-left: 5%;
    }
    #introductionWrapper{
        flex-direction: column-reverse;
        align-items: center;
    }
    #introductionImageWrapper{
        margin-left: 0px;
    }
}

@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: 2800px){ /* add margins for wide screen*/

    #titleTextWrapper{
        margin-left: 30%;
    }
    #titleImageWrapper{
        margin-right: 30%;
    }
        #introductionImageWrapper{
        margin-left: 30%;
    }
    #introductionTextWrapper{
        margin-right: 30%;
    }
}
/*#endregion */