.page { 
    height: 5000px; 
    margin: 0px 0px 0px 0px; 
 
    background-color: #F6F6C9; 
} 

.filling {
    position: absolute;

    margin-top: -10px;
    padding-top: 0px;

    width: 100%;
    height: 20px;
    background-color: #BAD1C2;
}

.landingPageVideoContainer { 
    display: flex; 
    justify-content: center; 
     
    margin-top: 50vh;
    position: relative; 
} 

.landingPageVideo {
    max-width: 100%;
    max-height: 100%; 
    width: 70vw;

    padding: 0px 0px 0px 0px; 
    border-width: 40px;
    border: 10px solid #806517;

    pointer-events: none;
}

.toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    position: sticky;
    top: 0px;
    z-index: 1;

    padding-left: 15px;
    padding-right: 15px;

    background-color: #4FA095;
}

.toolbarOption {
    padding: 6px 78px 6px 78px;

    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: #4FA095;

    cursor: pointer;
    transition: all 0.3s;
}

.toolbarOption:hover {
    border-color: #646464;
    font-size: 16;
}

.toolbarOption:active {
    opacity: 0.5;
}

.toolbarText {
    font-size: 16px;
    color: #e7e9eb;
}

.aboutMe {
    display: flex;
    flex-direction: column;

    padding-left: 9vw;
    padding-bottom: 30px;
    margin: 30px 5vw 10px 5vw;
    padding-top: 50px;

    background-color: #BAD1C2;
    border-radius: 8px;
}

.introWelcomeGrid {
    display: grid;
    justify-content: center;

    grid-template-columns: 6fr 4fr;
    grid-row: auto auto;
}

.introNameText {
    font-size: 72px;
    font-weight: bold;
    margin-top: 90px;
}

.introWelcome {
    font-size: 18px;
    opacity: 90%;

    margin-top: -70px;
    margin-bottom: 50px;
}

.sectionHeaderContainer {
    display: flex;
    justify-content: center;

    margin-top: -5vh;  
}

.sectionHeaderText {
    font-size: 10vh;
    font-weight: bold;
    color: #153462;
}

.sectionDescriptionContainer {
    margin-top: -5vh;
    margin-bottom: 10vh;  
}

.colsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3vw;

    width: 100%;

    margin-top: -4vh;
}

.cardHolder {
    display: flex;
    flex-direction: column;

    row-gap: 3vh;
}

.card {
    display: grid;
    grid-template-rows: auto auto;

    background-color: #8EC3B0;
    border: solid #4FA095;

    border-radius: 8px;

    padding-left: 5%;
    padding-right: 5%;
}

.cardTitleContainer {
    display: grid;
    grid-template-columns: auto 30%;

    padding-left: 3%;
    padding-right: 3%;

    border-bottom-style: dotted;
}

.cardTitleText {
    font-size: 3vh;
    font-weight: bold;
}

.cardButtons {
    display: flex;
    flex-direction: row-reverse;
}

.cardDescription {
    font-size: 18px;
}

.introductionContainer {
    display: flex;
    justify-content: center;
}

.introductionImage {
    height: 300px;
    width: auto;

    margin: 20px 0px 0px 0px;
    
    border: 3px solid #5b6d48;
    border-radius: 50%;

    pointer-events: none;
}