/* color palette: https://coolors.co/6c809a-f467c0-99f3ff-172a3a-ffffff */
/* new color palette: https://coolors.co/ffffff-f2f3f7-f7b3ff-2c2b47-000000 */
/*green color palette: https://coolors.co/4a7b6f-d0d6b3-f7f7f7-efefef-745296*/

@font-face {
        font-family: 'montserrat';
        src: url(../mediaAssets/fonts/Montserrat-ExtraLight.ttf);
}

@font-face {
        font-family: 'montserratRegular';
        src: url(../mediaAssets/fonts/Montserrat-Regular.ttf);
}

@font-face {
        font-family: 'yousef';
        src: url(../mediaAssets/fonts/YuseiMagic-Regular.ttf);
}

/*****************************/
/* Both orientation elements */
/*****************************/

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'montserratRegular';
}

html {
        /* background-color: #FFFFFF; */
        /* background-color: #F2F3F7; */

        background-color: #EFEFEF;
        /* background-color: #D0D6B3; */
        font-weight: normal;
}

body {}

a {
        cursor: default;
}

h1 {
        font-weight: normal;
        font-size: 2rem;
        font-family: 'montserrat';
}

h2 {
        font-weight: normal;
        font-size: 1.375rem;
        font-family: 'montserrat';
}

h3 {
        /* font-size: 1.125rem; */
        font-weight: normal;
        font-size: 1rem;
        display: inline;
}

h4,
h5,
h6 {
        /*reset for mobile browsers */
        font-weight: normal;
}

.textBubbleFade {
        position: absolute;
        display: block;
        width: 100%;
        overflow: hidden;
        /* background-image: linear-gradient(to bottom,
                        rgba(44, 43, 71, 0),
                        rgba(44, 43, 71, 1) 100%); */
        /* background-image: linear-gradient(to bottom,
                        rgba(78, 86, 126, 0),
                        rgba(78, 86, 126, 1) 100%); */
        background-image: linear-gradient(to bottom,
                        rgba(62, 69, 101, 0),
                        rgba(62, 69, 101, 1) 100%);
}

.textBubbleContent {
        width: 100%;
        height: 100%;
        font-size: 1rem;
        overflow: hidden;
        box-sizing: border-box;
        text-align: justify;
        position: relative;
}

.lightContainer {
        background-color: #FFFFFF;
        background-color: #F7F7F7;
        /* color: #2C2B47; */
        /* color: #4E567E; */
        color: #3E4565;
}

.darkContainer {
        /* background-color: #2C2B47; */
        /* background-color: #4E567E; */
        /* background-color: #3E4565; */
        background-color: #4A7B6F;
        /* color: #FFFFFF; */
        color: #F7F7F7;
        overflow: hidden;
}

.darkLinkButton {
        color: #FFFFFF;
        /* background-color: rgba(44, 43, 71, 0.375);
        border-color: #FFFFFF; */
        color: #FFFFFF;
        /* background-color: rgba(255, 60, 199, 0.375); */
        background-color: rgba(255, 60, 199, 0.5);


        color: #F7F7F7;
        background-color: #4A7B6F;
        /* background-color: #FF3CC7; */
        text-decoration: none;
}

.lightLinkButton {
        /* color: #2C2B47; */
        /* color: #4E567E; */
        color: #3E4565;
        background-color: #FFFFFF;
        /* border-color: #2C2B47; */
        /* border-color: #4E567E; */
        border-color: #3E4565;
        text-decoration: none;
}

.highlightText {
        /* background-color: rgba(255, 255, 255, 0.8); */
        /* color: #2C2B47; */
        color: #FFFFFF;
        /* border-radius: 0.5rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem; */
        text-decoration: none;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
}

.noBoxShadow {

        box-shadow: none !important;
}

.highlightHeaderLink {
        /* color: #444444; */
        /* background-color: #F7B3FF; */
        /* background-color: #FEB1CD; */
        /* background-color: #e59fb9; */
        /* background-color: #9592f1; */
        /* background-color: #CC0606; */
        /* color: #FFFFFF;
        background-color: #FF3CC7; */
        color: #F7F7F7;
        background-color: #4A7B6F;


        /* background-color: #A9B8F5; */


        /* background-color: #F2A6C2;
        background-color: #f260b5; */

        border-radius: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        text-decoration: none;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
}

.introH1 {
        font-size: 3rem;
}

.introH1Name {
        font-size: 5rem;
        line-height: 2em;
}

.menuIcon {
        /* background-image: url(../mediaAssets/iconAssets/hamburgerDark.jpg);
        background-image: url(../mediaAssets/iconAssets/hamburgerDark.png); */
        /* background-image: url(../mediaAssets/iconAssets/hamburgerPink.png); */
        background-size: cover;
        position: absolute;
}

.menuTextContainer {
        height: 100%;
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        justify-content: center;
        /* color: #FFFFFF; */
        /* background-color: #FF3CC7; */
        color: #F7F7F7;
        background-color: #4A7B6F;
        border-radius: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
}

a.menuTextContainer {
        text-decoration: none;
        /* color: #2C2B47; */
}

.menuDropDownContainer {
        flex-direction: column;
        text-align: center;
        align-items: start;
        justify-content: flex-start;
        display: none;
        max-height: 80vh;
        overflow-y: auto;
        /* display: flex; */
}

.dropDownMenuItem {
        text-decoration: none;
        color: #FFFFFF;
        font-weight: normal;
        font-size: 2rem;
        font-family: 'montserratRegular';
}

/********************************/
/* Potrait orientation elements */
/********************************/

.portrait_body {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 2.08vw;

}

.potrait_topLevelContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        width: 95.83vw;
}

.potrait_sectionLargeContentContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 66.6vw;
        /* background-color: #D9DCE8;
        border-radius: 2.08vw; */
        /* width: 100%; */
}

.potrait_sectionSmallContentContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 49.99vw;
}

.portrait_fiveBySevenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 20.8vw;
        height: 29.1vw;
        border-radius: 2.08vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 2.08vw;
        margin: 2.08vw;
        box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1);
}

.portrait_elevenBySevenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 45.8vw;
        height: 29.1vw;
        border-radius: 2.08vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 2.08vw;
        margin: 2.08vw;
        box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1);
}

.portrait_tenByFifteenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 41.6vw;
        height: 62.5vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 2.08vw;
        margin: 2.08vw;
        border-radius: 2.08vw;
        box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1);
}

.portrait_sixteenByFifteenContainer {
        display: flex;
        position: relative;
        flex-direction: column;
        flex-wrap: wrap;
        width: 66.6vw;
        height: 62.5vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 2.08vw;
        margin: 2.08vw;
        border-radius: 2.08vw;
        box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1);
}

.potrait_linkButton {
        display: flex;
        /* width: 12.5vw; */
        height: 4.16vw;
        position: absolute;
        bottom: 2.08vw;
        border-radius: 1.04vw;
        align-items: center;
        text-align: center;
        justify-content: center;
        /*0.13vw = 1/32 of a division*/
        border: 0.13vw solid;
        padding-left: 1.04vw;
        padding-right: 1.04vw;
}

.portrait_textBubbleFade {
        border-bottom-left-radius: 2.08vw;
        border-bottom-right-radius: 2.08vw;
        /* bottom: 2.08vw; */
        bottom: 1.04vw;
        height: 6.25vw;
}

.portrait_sectionDivider {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        /* background-color: #F2F3F7; */
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* min-height: 29.1vw; */
        border-radius: 2.08vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        /* padding: 2.08vw; */
        /* margin: 2.08vw; */
}

.portrait_introHeaderPicture {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 91.67vw;
        /* background-color: #F2F3F7; */
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* height: 45.8vw; */
        height: 62.5vw;
        height: 55vw;
        border-radius: 2.08vw;
        text-align: center;
        align-items: center;
        justify-content: center;

        background-image: url(../mediaAssets/imageAssets/aboutMe.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        padding: 2.08vw;
        /* margin-top: 4.16vw; */
        margin-top: 8.32vw;
        margin-left: 4.16vw;
        margin-right: 4.16vw;
        margin-bottom: 0;
        /* box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1); */
}

.portrait_introHeader {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 91.67vw;
        /* background-color: #F2F3F7; */

        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */

        /* min-height: 62.5vw; */
        min-height: 45.8vw;
        border-radius: 2.08vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 2.08vw;
        margin-top: 4.16vw;
        margin-left: 4.16vw;
        margin-right: 4.16vw;
        margin-bottom: 0;
        /* box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1); */
}

.portrait_menuBar {
        display: flex;
        /* position: sticky; */
        /* 4.16 - 0.52 (from border) */
        top: -0.104vw;
        /* top: -0.1vh; */
        z-index: 1000;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100vw;
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* background-color: #4A7B6F; */
        /* border-bottom: solid 0.52vw #2C2B47; */
        /* border-bottom: solid 0.52vw #4E567E; */
        /* border-bottom: solid 0.52vw #3E4565; */
        /* color: #2C2B47; */
        /* color: #4E567E; */
        color: #3E4565;
        /* 8.32+0.52(from border) */
        height: 8.84vw;
        /* height: 5vh; */
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.04vw;
        font-size: 1.25rem;
        /* border-radius: 2.08vw; */
        /* border-bottom-left-radius: 1.04vw;
        border-bottom-right-radius: 1.04vw; */
        /* box-shadow: 0 0 2vw 0.125vw rgba(0, 0, 0, 0.1); */
}

.portrait_menuIcon {
        height: 6.24vw;
        width: 6.24vw;
        left: 1.04vw;
}

.portrait_HomeLink {
        position: absolute;
        left: 10.4vw;
}

.portrait_menuTextContainer {
        margin-right: 4.16vw;
        min-width: 14.56vw;
}

.portrait_menuDropDownContainer {
        position: fixed;
        top: 8.5vw;
        /* height: 100vh; */
        z-index: 10000;
        border-bottom-left-radius: 2.08vw;
        border-bottom-right-radius: 2.08vw;
        /* padding: 2.08vw; */
        padding: 4.16vw;
}

.portrait_dropDownMenuItem {
        /* margin: 0.52vw; */
        font-size: 1.5rem;
}

.portrait_dropDownHeaderItem {
        /* margin: 0.52vw; */
        margin-bottom: 1.04vw;
        font-size: 2rem;
        text-decoration: underline;
}

/**********************************/
/* Landscape orientation elements */
/**********************************/

.landscape_body {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 1.06vw;
}

.landscape_headerContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        padding: 1.06vw;
}

.landscape_topLevelContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        width: 97.88vw;
}

.landscape_sectionLargeContentContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 34.04vw;
        width: 48.9vw;
}

.landscape_sectionSmallContentContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 25.55vw;
}

.landscape_sectionTinyContentContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 24.25vw;
}

.landscape_fiveBySevenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 10.6vw;
        height: 14.89vw;
        border-radius: 1.06vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin: 1.06vw;
        box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1);
}

.landscape_elevenBySevenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 23.4vw;
        height: 14.89vw;
        border-radius: 1.06vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin: 1.06vw;
        box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1);
}

.landscape_tenByFifteenContainer {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 21.27vw;
        height: 31.9vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin: 1.06vw;
        border-radius: 1.06vw;
        box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1);
}

.landscape_sixteenByFifteenContainer {
        display: flex;
        position: relative;
        flex-direction: column;
        flex-wrap: wrap;
        width: 34.04vw;
        height: 31.9vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin: 1.06vw;
        border-radius: 1.06vw;
        box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1);
}

.landscape_linkButton {
        display: flex;
        /* width: 6.3vw; */
        height: 2.12vw;
        position: absolute;
        bottom: 1.06vw;
        border-radius: 0.52vw;
        align-items: center;
        text-align: center;
        justify-content: center;
        /*0.13vw = 1/32 of a division*/
        border: 0.067vw solid;
        padding-left: 0.52vw;
        padding-right: 0.52vw;
}

.landscape_textBubbleFade {
        border-bottom-left-radius: 1.06vw;
        border-bottom-right-radius: 1.06vw;
        /* bottom: 2.08vw; */
        bottom: 0.53vw;
        height: 3.19vw;
}

.landscape_sectionDivider {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        width: 46.8vw;
        /* background-color: #F2F3F7; */
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* min-height: 14.8vw; */
        height: 31.9vw;
        border-radius: 1.06vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin: 1.06vw;
        /* box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1); */
}

.landscape_introHeaderPicture {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        /* width: 95.74vw; */
        width: 42.4vw;
        /* width: 33.3vw; */
        /* background-color: #F2F3F7; */
        /* min-height: 31.9vw; */
        min-height: 46.8vw;
        border-radius: 1.06vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-image: url(../mediaAssets/imageAssets/aboutMe.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 1.06vw;
        margin-top: 2.12vw;
        margin-left: 2.12vw;
        margin-right: 2.12vw;
        margin-bottom: 0;
}

.landscape_introHeader {
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        /* width: 95.74vw; */
        min-width: 33.3vw;
        /* width: 30vw; */
        /* background-color: #F2F3F7; */
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* min-height: 31.9vw; */
        min-height: 46.8vw;
        border-radius: 1.06vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 1.06vw;
        margin-top: 2.12vw;
        margin-left: 2.12vw;
        margin-right: 2.12vw;
        margin-bottom: 0;
        /* box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1); */
}

.landscape_menuBar {
        display: flex;
        /* position: sticky; */
        /* 4.16 - 0.52 (from border) */
        /* top: -3.64vw; */
        top: -0.075vw;
        z-index: 1000;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100vw;
        /* background-color: #FFFFFF;
        background-color: #F7F7F7; */
        /* border-bottom: solid 0.375vw #2C2B47;
        color: #2C2B47; */
        /* border-bottom: solid 0.375vw #4E567E;
        color: #4E567E; */
        /* border-bottom: solid 0.375vw #3E4565; */
        color: #3E4565;
        /* height: 8.32vw; */
        /* 3+1.5+0.375(from border) */
        /* height: 4.875vw; */
        height: 3.445vw;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        padding: 0.375vw;
        font-size: 1.25rem;
        /* box-shadow: 0 0 2vh 0.125vh rgba(0, 0, 0, 0.1); */
}

.landscape_menuIcon {
        height: 2.385vw;
        width: 2.385vw;
        left: 0.53vw;
}

.landscape_HomeLink {
        position: absolute;
        left: 4.5vw;
}

.landscape_menuTextContainer {
        margin-right: 2.12vw;
        min-width: 8.48vw;
}

.landscape_menuDropDownContainer {
        position: fixed;
        top: 3.4vw;
        z-index: 10000;
        border-bottom-left-radius: 1.06vw;
        border-bottom-right-radius: 1.06vw;
        padding: 2.12vw;
}

.landscape_dropDownMenuItem {
        /* margin: 0.375vw; */
        font-size: 1.25rem;
}

.landscape_dropDownHeaderItem {
        /* margin: 0.375vw; */
        margin-bottom: 0.75vw;
        font-size: 1.5rem;
        text-decoration: underline;
}