* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    font-weight: bold;
}

.divDropdownHolder:hover .mainDropdownMenu {
    top: 100%;
    opacity: 100;
    transition: top .75s ease-in, opacity .75s ease-in;
    pointer-events: auto;
}

#navBarMain {
    background-color: #42c0fb;
    position: fixed;
    display: flex;
    height: 8vh;
    width: 100vw;
    min-height: 80px;
    align-items: center;
    color: white;
    font-size: large;
    font-weight: bolder;
    padding: 10px 25px 10px 0;
    box-shadow: 0px 0px 10px rgb(0, 0, 0);
}

#redirectButtonsCategory {
    display: flex;
    margin-left: auto;
    margin-top: 10px;
    padding: 10px 10px;
}

#logoImage {
    width:  50px;
    height: 50px;
    border-radius: 5px;
    margin: 0px 10px;
}

.divDropdownHolder {
    position: relative;
    font-weight: lighter;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    height: 40px;
    padding: 0 30px;
    cursor: pointer;
}

#contactButtonDesign {
    margin: 5px 10px;
    width: 100px;
    height: 40px;
    background-color: #27b2f2;
    border-width: 0px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}

#contactButtonDesign:hover {
    background-color: #8dceec
}

.mainDropdownMenu {
    position: absolute;
    top: 80%;
    opacity: 0;
    display: flex;
    flex-direction: column;
    background-color: #04afff;
    gap: 10px;
    padding: 20px;
    border-radius: 5px;
    pointer-events: none;
    transition: top .75s ease-out, opacity .75s ease-out;
}

.divDropdownHolder .dropdownSelectionSetUp {
    display: flex;
    font-weight: bold;
    position: relative;
    background-color: rgb(40, 174, 236);
    align-items: center;
    font-size: 1.25vmax;
    width: 10vw;
    height: 50px;
    padding: 10px;
    font-weight: lighter;
    cursor: pointer;
    transition: background-color 1s;
    border: solid #04afff;
    visibility: visible;
    border-radius: 10px;
}

.dropdownSelectionSetUp:hover {
    background-color: #a8e1fb;
}


#navTitle {
    font-size: 2vmax;
    padding-right: 0 100px;
    margin: 2px 10px;
    color: #5e17eb;
}


/*Page below the main header*/
#imageBackground {
    display: flex;
    background-image: url("imageFiles/mainBackgroundTemp.png");
    position: absolute;
    z-index: -100;
    margin-right: 50%;
    width: 150%;
    height: 160vh;
    transform: translateX(-20%);
    filter: blur(2px);
    transition: all .5s ease-in-out;
}

#mainPage {
    position: absolute;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    height: 160vh;
    animation: mainPageInitAnimation 1s forwards;
    z-index: -5;
}

@keyframes mainPageInitAnimation {
    from {height: 110vh}
    to {height: 170vh}
}

#mainPage_lowerDiv {
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 100vw;
    z-index: 10;
}

#mainPage_lowerDiv_mainContentDiv {
    display: flex;
    height: 100%;
    width: 100%;
    justify-self: center;
    align-self: center;
    border-radius: 4px;
}

#mainPage_lowerDiv_leftDivTitle {
    display: flex;
    font-size: 5vmax;
    color:#dcf4ff;
}

#mainPage_lowerDiv_leftDivMainContext {
    display: flex;
    font-weight: 500;
    font-size: 2vmax;
}

#mainPage_lowerDiv_leftDiv {
    display: flex;
    flex-direction: column;
    padding: 2%;
    height: 100%;
    width: 50%;
    background-color:#04afff;
}

#mainPage_lowerDiv_rightDiv {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    background-color:#04afff;
}

#mainPage_lowerDiv_rightDiv_topDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
}

#mainPage_lowerDiv_rightDiv_bottomDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
}

.mainPage_lowerDiv_rightDiv_card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 40%;
    border-radius: 8px;
    /*background: linear-gradient(327deg,rgb(182, 227, 244) 4%, rgba(84, 201, 255, 1) 15%, rgb(170, 219, 241) 32%, rgb(155, 218, 246) 34%, rgba(120, 209, 250, 1) 49%, rgba(120, 209, 250, 1) 55%, rgb(173, 227, 252) 76%); */
    box-shadow: 0px 0px 0px grey;
    flex-direction: column;
    transform: scale(1);
    background-color: #7dcef4;
    background-size: 600%;
    background-position: right;
    transition: all 1s ease-in-out;
}

.mainPage_lowerDiv_rightDiv_cardTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5vmax;
    text-align: center;
    width: 100%;
    height: 20%;
}

.mainPage_lowerDiv_rightDiv_cardContent {
    display: flex;
    margin: 1%;
    align-items: center;
    justify-content: center;
    font-size: 1.25vmax;
    font-weight: 500;
    text-align: center;
    align-self: center;
    width: 80%;
    height: 40%;
}

.mainPage_lowerDiv_rightDiv_card:hover {
    transform: scale(1.05);
    background-position: center;
    box-shadow: 0px 2px 6px grey;
}

#mainPage_lowerDiv_rightDiv_cardTL {
    margin-right: 8%;
}

#mainPage_lowerDiv_rightDiv_cardBL {
    margin-right: 8%;
}

#mainPage_lowerDiv_leftDivDivider {
    background-color: #dcf4ff;
    border-width: 0px;
    border-radius: 4px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    min-height: 1%;
    height: 1%;
    align-self: center;
    width: 100%;
}

#mainPage_centeredDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 80vh;

}

#mainPage_lowerDiv_leftDivCopyright {
    display: flex;
    width: 40vw;
    font-size: 1vmax;
    height: 10%;
    margin-top: 12%;
    align-self: center;
    justify-content: space-between;
    align-items: center;
}


#mainPage_centeredDiv_title {
    font-size: 3.5vmax;
}

#mainPage_centeredDiv_button {
    width: 150px;
    height: 40px;
    background-color: #27b2f2;
    border-width: 0px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}

#mainPage_centeredDiv_purposeSummary {
    font-size: 1.5vmax;
    padding: 5px 0px 15px 0px; 
    font-weight: lighter;
}

#mainPage_centeredDiv_button:hover {
    background-color: #93d8f8;
}

/*#mainScreenDescriptorSiteDetailsButton {
    position: relative;
    width: 150px;
    height: 40px;
    margin: 0px 0px;
    align-self: center;
    background-color: #27b2f2;
    border-width: 0px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
} */

#mainScreenDescriptorSiteDetailsButton:hover {
    background-color: #93d8f8;
}


/* Home CSS */

#mainBackgroundDiv {
    display: flex;
    flex-direction: row;
    position: absolute;
    overflow-x: hidden;
    background-color: #dcf4ff;
    width: 100vw;
    height: 100vh;
}

#sidebar {
    position: fixed;
    height: 100vh;
    width: 5.5vw;
    background-color: #9ddefc;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width 1s ease;
    z-index: 105;
    
}

.sidebar_widgetNextToSideBar_a {
    transform: scaleX(.1);
    transform-origin: left;
    opacity: 0;
    color:#ffffff;
    width: 0px;
    max-width: 5vw;
    font-size: 2vmax;
    font-weight: bold;
    transition: opacity .35s ease .4s transform .35 ease .4;
}

#sidebar_a1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5vw;
    height: 5vh;
}

#sidebar_widgetNextToSideBar_a1 {
    color:#5e17eb;
    font-weight: bolder;
}

#sidebar_a1Holder {
    margin: 10px 0px 0px 0px;
}

#sidebar_a1_logoImage {
    background-image: url("imageFiles/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1 / 1;
    width: 3.5vw;
    border-radius: 50%;
}

#sidebar_a2 {
    background: url("imageFiles/temp.png");
    align-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 5.5vw;
    height: 5vh;
}

#sidebar_a3 {
    background: url("imageFiles/temp.png");
    align-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 5.5vw;
    height: 5vh;
}

#sidebar_a4 {
    background: url("imageFiles/temp.png");
    align-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 5.5vw;
    height: 5vh;
}

#sidebar_a5 {
    background: url("imageFiles/temp.png");
    align-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 5.5vw;
    height: 5vh;
}

.sideBar_aHolderLeftBorderExpand {
    position: absolute;
    background-color: rgb(255, 255, 255);
    height: 6.7vh;
    align-self: left;
    left: 0;
    width: 4px;
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 1s ease;
}

.sidebar_aHolder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    cursor: pointer;
    height: 10vh;
    width: 5.5vw;
    margin: 0px 0px;
    transition: width 1s ease, background-color 1s ease;
}

#sideBarDivider {
    background-color: white;
    position: relative;
    width: 3.0vw;
    border-radius: 2px;
    border-width: 0px;
    margin: 1.2vh 0px;
    height: 4px;
    transform-origin: center;
    transform: scaleX(1);
    transition: transform 1s ease;
}

#homePage_rightSide {
    display: flex;
    align-self: right;
    flex-direction: column;
    margin-left: 5.5vw;
    background-color: #dcf4ff;
    width: 94.5vw;
    height: 100vh;
}


#homePage_rightSide_upperDiv_leftDiv {
    background-color: #42c0fb;
    display: flex;
    width: 42vw;
    flex-direction: column;
    height: 90%;
    border-radius: 10px;
    box-shadow: 0px 0px 0px rgb(71, 66, 66);
    align-self: center;
    margin-right: 0%;
    margin-left: 3%;
    align-items: center;
    margin-bottom: 2%;
    justify-content: center;
    justify-self: center;
    transition: box-shadow 1s ease;
}

#homePage_rightSide_upperDiv_rightDiv {
    display: flex;
    flex-direction: column;
    background-color: #42c0fb;
    width: 47%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 0px 0px 0px rgb(71, 66, 66);
    margin-bottom: 2%;
    margin-left: 2%;
    align-self: center;
    align-items: center;
    justify-self: center;
    transition: box-shadow .8s ease;
    
}

#homePage_rightSide_upperDiv {
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: #dcf4ff;
    width: 94.5vw;
    height: 45vh;
}


#homePage_rightSide_lowerDiv {
    position: relative;
    background-color: #dcf4ff;
    width: 94.5vw;
    height: 45vh;
}

#homePage_rightSide_titleDiv {
    position: relative;
    padding: 15px 0px 0px 35px;
    display: flex;
    flex-direction: column;
    width: 94.5vw;
    min-height: 12vh;
    height: 12%;
}

#homePage_rightSide_upperDiv_rightDiv_verticalDiv {
    padding: 20px 0px; 
    height: 100%;
}

#homePage_rightSide_upperDiv_rightDiv_verticalDiv_cardName {
    font-size: 1.2vmax;
    font-weight: bolder;
    color:#dcf4ff;
}

#homePage_rightSide_titleDiv_title {
    display: flex;
    color:#04afff;
    font-weight: bolder;
    font-size: 2vmax;
}

#homePage_rightSide_titleDiv_divider {
    margin: 1% 0px 5px 0px;
    background-color: #04afff;
    border-width: 0px;
    border-radius: 4px;
    height: 10%;
    width: 96%;
}

#homePage_rightSide_upperDiv_rightDiv_verticalDiv_divider {
    margin-top: 1%;
    margin-bottom: 1%;
    background-color: #dcf4ff;
    border-width: 0px;
    border-radius: 4px;
    height: 1.25%;
}

#homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder {
    display: flex;
    width: 38vw;
    height: 85%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#homePage_rightSide_upperDiv_leftDiv_title {
    display: flex;
    color: white;
    align-items: center;
    margin-left: 10%;
    font-size: 1.2vmax;
    height: 12.5%;
    width: 100%;
}

#homePage_rightSide_upperDiv_leftDiv_divider {
    background-color: white;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    margin-bottom: 1%;
    width: 90%;
}

.homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder_continueDiv {
    background-color: #d1eaf4;
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 95%;
    border-radius: 4px;
    box-shadow: 0px 0px 0px grey;
    margin-left: 1%;
    margin-right: 1%;
    cursor: pointer;
    transition: box-shadow .6s ease-in-out;
}

#mainPage_backgroundBlocker {
    position: absolute;
    width: 100vw;
    min-height: 100%;
    height: 100vh;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    z-index: 101;
}

#homePage_rightSide_lowerDiv_mainDiv {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #42c0fb;
    box-shadow: 0px 0px 0px rgb(71, 66, 66);
    width: 94%;
    height: 90%;
    border-radius: 6px;
    justify-self: center;
    transition: all .6s ease-in-out;
}

#mainPage_lowerDiv_aboutUsText {
    display: flex;
    height: 5%;
    width: 100%;
    margin-top: 2%;
    color:#dcf4ff;
    margin-bottom: 1%;
    font-size: 4vmax;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#mainPage_lowerDiv_divider {
    background-color:#dcf4ff;
    margin: 1% 0%;
    align-self: center;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    width: 70%;
}

#homePage_rightSide_lowerDiv_mainDiv:hover {
    box-shadow: 0px 0px 10px rgb(71, 66, 66);
}

.lowerPage {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #dcf4ff;
}

#lessons_rightSide_lowerPage {
    width: 90%;
    height: 90%;
}

.lesson_rightSide_lessonDiv {
    height: 45%;
    width: 92vw;
    margin-left: .6%;
    display: flex;
    background-color: #dcf4ff;
    flex-direction: row;
    justify-content: center;

}

.lessons_rightSide_lessonDiv_lessons_title_progressDivHolder {
    display: flex;
    margin: 0 1%;
    background-color: #98dcf7;
    border-radius: 4px;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    height: 100%;
    width: 70%
}

.lessons_rightSide_lessonDiv_lessons {
    margin: 10px 20px 0px 20px;
    display: flex;
    height: 80%;
    width: 20%;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0px 0px 0px black;
    transition: box-shadow 1s ease;

}

.lesson_rightSide_lessonDiv_lessons_title_progressBarPercentage {
    margin: 0px 2%;
    font-size: .7vmax;
    align-self: center;
    justify-self: center;
    font-weight: bold;
}

.lesson_rightSide_lessonDiv_lessons_Inner {
    background-color: #04afff;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #04afff #a8e1fb;
}

.lesson_rightSide_lessonDiv_lessons_title_progressBar {
    display: flex;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    align-self: center;
    margin: 0px 2%;
    width: 60%;
    height: 15%;
}

.lessons_rightSide_lessonDiv_lessons_title_wordTitle {
    text-wrap: nowrap;
    height: 80%;
    align-self: center;
    font-size: 1vmax;
    margin: 0px 4%;
}

.lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar {
    width: 20%;
    border-radius: 4px;
    height: 100%;
    background-color: rgb(20, 188, 255);
    transition: all .8s ease-in-out;
}

.lessons_rightSide_lessonDiv_lessons_title {
    height: 10%;
    display: flex;
    flex-direction: row;
    margin: 4% 0;
}

.lessons_rightSide_lessonDiv_lessons_sublesson {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: center;
    align-items: center;
    justify-items: center;
    margin: 4% 0px;
    padding: 5% 0px 5% 0px;
    border-radius: 4px;
    min-height: 5vh;
    width: 80%;
    z-index: 0;
    height: auto;
    background-color: #4fc5fc;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 4px;
    background-color: #4fc5fc;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_lessonName {
    width: 67%;
    margin: 0px 4% 0px 9%;
    height: 100%;
    font-weight: 300;
    font-size: 1vmax;
    justify-content: center;
    align-content: center;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_lessonCompletion {
    justify-self: left;
    cursor: pointer;
    align-self: center;
    aspect-ratio: 1 / 1;
    width: 10%;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgb(142, 152, 154);
    background-color: rgb(190, 210, 196);
    z-index: 100;
    transition: background-color 1s ease, border 1s ease;
    /*border: 3px solid rgb(142, 152, 154);
    background-color: rgb(190, 203, 210);*/
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_lessonCompletion.lessonCompButtonActive {
    background-color: rgb(49, 239, 106);
    border: 2px solid rgba(92, 235, 135, 1);
}

#lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar_unit1 {
    width: 0%;
}

#lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar_unit2 {
    width: 0%
}

#lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar_unit3 {
    width: 0%;
}

#lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar_unit4 {
    width: 0%;
}

#lesson_rightSide_lessonDiv_lessons_title_progressBar_innerProgressBar_unit5 {
    width: 0%;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_subLessonContent.syncAnimationLRLLSCS {
    display: flex;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_subLessonContent {
    position: absolute;
    opacity: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
    width: 90%;
    height: 5vh;
    transform: scaleY(.001);
    transform-origin: center;
    pointer-events: none;
    background-color:#98dcf7;
    margin: 6% 0px 0px 0px;
    border-radius: 4px;
    transition: transform 1s ease;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_subLessonContent_image {
    aspect-ratio: 1 / 1;
    height: 65%;
    margin-left: 6%;
    background: url("imageFiles/temp.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.lessons_rightSide_lessonDiv_lessons_sublesson_content_subLessonContent_text {
    margin: 0px 4%;
    width: 45%;
    font-size: 1vmax;
    font-weight: 300;
}


/* Practice Page */
#mainBackgroundDiv_leftDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    height: 100%;
}

#mainBackgroundDiv_rightDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    height: 100%;
}

.mainBackgroundDiv_leftDiv_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    width: 35%;
    height: 40%;
    background: #27b2f2;
    border-radius: 4px;
    box-shadow: 0px 0px 0px black;
    margin: 24% 0px 0px 8%;
    background: linear-gradient(160deg,rgba(67, 195, 250, 1) 24%, rgb(159, 209, 246) 61%, #27b2f2 80%);
    background-size: 900%;
    background-position: right;
    transform: scale(1);
    transition: background-position 1s ease-in-out, transform .5s ease-in-out, box-shadow 1s ease-in-out;

    
}

.mainBackgroundDiv_leftDiv_card:hover {
    background-position: center;
    transform: scale(1.06);
    box-shadow: 0px 0px 2px black;

}


#mainPage-divHolder {
    display: flex;
    flex-direction: column;
    margin-left: 5.5vw;
    width: 100%;
    height: 100%;
}

#mainPage_contentDivHolder {
    display: flex;
    flex-direction: row;
    transform: background-color 1s ease;
    width: 100%;
    height: 80%;
}

#mainPage_titleDivHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 15%;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    height: 92%;
    margin-top: 4%;
    background-color: #27b2f2;
    border-radius: 4px;
    box-shadow: 0px 0px 0px black;
    transform: scale(1);
    transition: box-shadow .5s ease-in-out, transform .8s ease-in-out;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv:hover {
    box-shadow: 0px 0px 4px black;
    transform: scale(1.02);
}

#mainPage_titleDivHolder_title {
    align-content: center;
    color :#04afff;
    font-size: 2.5vmax;
    padding-left: 2.5%;
    width: 100%;
    font-weight: bolder;
    height: 40%;
}

#mainPage_titleDivHolder_title_divider {
    background-color: #04afff;
    border-width: 0px;
    border-radius: 4px;
    margin: 1% 0%;
    height: 5%;
    width: 95%;
}


.mainBackgroundDiv_leftDiv_card_cardTitle {
    display: flex;
    color: #d1eaf4;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    font-size: 2vmax;
    width: 60%;
    height: 10%;

}


#mainBackgroundDiv_leftDiv_card_gameCardImage {
    background-image: url("imageFiles/gameLogo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 1/1;
    width: 70%
}

#mainBackgroundDiv_leftDiv_card_questionCardImage { 
    background-image: url("imageFiles/questionLogo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 1/1;
    width: 70%
}

.mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_select {
    border-radius: 4px;
    margin: 0% 0% 4% 0%;
    border-width: 2px;
    border-color: #4fc5fc;
    background-color:#d1eaf4;
    color:#04afff;
    height: 6%;
    width: 80%;

}

.mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_options {
    color:#04afff;

}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_title_divider {
    background-color:white;
    margin: 1% 0%;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    width: 90%;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_title {
    font-size: 2vmax;
    margin: 1% 0%;
}

.mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_headerText {
    font-size: 1.1vmax;
    margin: 3% 0% 0% 0%;
    width: 80%;
    height: 5%;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_addQuestion {
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    border-width: 0px;
    font-size: 1vmax;
    height: 70%;
    width: 30%;
    margin-right: 4%;
    background-color: #5abdea;
    pointer-events: none;
    box-shadow: 0px 0px 0px black;
    transition: box-shadow .4s ease-in-out;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_addQuestion:hover {
    box-shadow: 0px 0px 4px black;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_addAdaptiveQuestions {
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    border-width: 0px;
    font-size: 1vmax;
    height: 70%;
    width: 30%;
    margin-left: 4%;
    background-color: #93d8f8;
    box-shadow: 0px 0px 0px black;
    transition: box-shadow .4s ease-in-out;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_addAdaptiveQuestions:hover {
    box-shadow: 0px 0px 4px black;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_buttonHolder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2% 0%;
    width: 95%;
    height: 10%;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_questionPreviewHolder {
    background-color: #a8e1fb;
    margin: 1%;
    height: 35%;
    width: 90%;
    border-radius: 4px;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_questionPreviewHolder_title {
    font-size: 1.1vmax;
    margin: 2%;
}

#mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_questionPreviewHolder_questionHolder {
    display: flex;
    flex-direction: column;
    height: 70%;
    width: 90%;
    align-self: center;
    align-items: center;
    justify-self: center;
    border-radius: 4px;
    background-color: #04afff;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #04afff #a8e1fb;
}

.mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_questionPreviewHolder_questionHolder_question {
    display: flex;
    margin-top: 2%;
    font-size: 1vmax;
    align-items: center;
    padding-left: 2%;
    color:#04afff;
    flex-shrink: 0;
    width: 90%;
    border-radius: 4px;
    height: 20%;
    background-color: #d1eaf4;
}

.mainPage_contentDivHolder_rightDiv_unitLessonChooserDiv_questionPreviewHolder_questionHolder_question_removalDiv {
    display: flex;
    cursor: pointer;
    aspect-ratio: 1/1;
    font-size: 1vmax;
    width: 4.5%;
    margin-left: auto;
    margin-right: 2%;
    color: black;
    justify-content: center;
    align-items: center;
    background-color: red;
    border-radius: 2px;

}

#hiddenDivGame {
    display: none;
    flex-direction: column;
    margin-left: 5.5vw;
    width: 100%;
    height: 100%;
}

#hiddenQuiz {
    display: none;
    flex-direction: column;
    margin-left: 5.5vw;
    width: 100%;
    height: 100%;
}

#hiddenQuiz_title {
    transform: translateY(-100%);
    display: flex;
    font-size: 4vmax;
    color: #04afff;
    padding-top: 1%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 12.5%;
    flex-direction: column;
    width: 100%;
    transition: transform 1s ease-in-out;
}

#hiddenDivGame_title {
    transform: translateY(-100%);
    display: flex;
    font-size: 4vmax;
    color: #04afff;
    padding-top: 1%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 12.5%;
    flex-direction: column;
    width: 100%;
    transition: transform 1s ease-in-out;
}

#hiddenQuiz_title_divider {
    background-color: #04afff;
    border-width: 0px;
    border-radius: 4px;
    margin-top: 1%;
    height: 8%;
    width: 70%;
    z-index: 100;
}

#hiddenQuiz_mainScreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 75%;
}

#hiddenDivGame_mainScreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 75%;
}

#hiddenDivGame_title_divider {
    background-color: #04afff;
    border-width: 0px;
    border-radius: 4px;
    height: 8%;
    width: 70%;
    z-index: 100;
}

#hiddenQuiz_mainScreen_gameScreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #04afff;
    width: 90%;
    height: 94%;
    transform-origin: bottom;
    transform: scaleY(115%);
    /* 115% */
    border-radius: 4px;
    transition: transform 1s ease-in-out;
}

#hiddenDivGame_mainScreen_gameScreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #04afff;
    width: 90%;
    height: 94%;
    transform-origin: bottom;
    transform: scaleY(115%);
    /* 115% */
    border-radius: 4px;
    transition: transform 1s ease-in-out;
}


#hiddenQuiz_mainScreen_gameScreen_title {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 5vmax;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 1%;
}

#hiddenDivGame_mainScreen_gameScreen_title {
    font-size: 5vmax;
}

#hiddenQuiz_mainScreen_gameScreen_description {
    font-size: 1vmax;
    font-weight: normal;
}

#hiddenQuiz_mainScreen_gameScreen_startButton {
    display: flex;
    cursor: pointer;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    background-color: #98dcf7;
    margin-top: 1%;
    border-radius: 4px;
    width: 10%;
    height: 7%;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenDivGame_mainScreen_gameScreen_description {
    font-size: 1vmax;
    font-weight: normal;
}

#hiddenDivGame_mainScreen_gameScreen_startButton {
    display: flex;
    cursor: pointer;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    background-color: #98dcf7;
    margin-top: 1%;
    border-radius: 4px;
    width: 10%;
    height: 7%;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenQuiz_mainScreen_gameScreen_startButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}

#hiddenDivGame_mainScreen_gameScreen_startButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}
    
#hiddenQuiz_bottomScreen {
    display: flex;
    flex-direction: row;
    height: 12%;
    width: 100%;
}

#hiddenQuiz_returnButton {
    cursor: pointer;
    display: flex;
    width: 10%;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    height: 40%;
    border-radius: 4px;
    margin-top: 1%;
    margin-left: 4%;
    background-color: #04afff;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenDivGame_bottomScreen {
    display: flex;
    flex-direction: row;
    height: 12%;
    width: 100%;
}

#hiddenDivGame_returnButton {
    cursor: pointer;
    display: flex;
    width: 10%;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    height: 40%;
    border-radius: 4px;
    margin-top: 1%;
    margin-left: 4%;
    background-color: #04afff;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenQuiz_returnButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}
#hiddenQuiz_restartButton {
    cursor: pointer;
    display: flex;
    width: 10%;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    height: 40%;
    border-radius: 4px;
    margin-top: 1%;
    margin-left: 72.5%;
    background-color: #04afff;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenQuiz_restartButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}

#hiddenDivGame_returnButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}
#hiddenDivGame_restartButton {
    cursor: pointer;
    display: flex;
    width: 10%;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    height: 40%;
    border-radius: 4px;
    margin-top: 1%;
    margin-left: 72.5%;
    background-color: #04afff;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    transition: box-shadow .75s ease-in-out, transform .75s ease-in-out;
}

#hiddenDivGame_restartButton:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 4px grey;;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder {
    display: none;
    flex-direction: column;
    width: 45%; 
    margin: 2%;
    border-radius: 4px;
    height: 90%;
    background-color:#c2e0ee;
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpgTitle {
    display: flex;
    margin-top: 4%;
    margin-left: 4%;
    font-size: 2vmax;
    color:#04afff;
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpgMoney {
    color: #04afff;
    margin: 1% 4%;
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_separator {
    background-color:#04afff;
    margin-top: 1%;
    margin-left: 4%;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    width: 90%;
}


.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg {
    display: flex;
    cursor: pointer;
    margin-left: 4%;
    border-radius: 4px;
    margin-top: 4%;
    background-color:#04afff;
    width: 90%;
    padding: 4%;
    font-size: 2vmax;
    height: 10%;
    background: linear-gradient(160deg,rgba(67, 195, 250, 1) 24%, rgb(116, 193, 252) 61%, #27b2f2 80%);
    box-shadow: 0px 0px 0px grey;
    background-size: 400%;
    background-position: right;
    transform: scale(1);
    transition: background-position .7s ease-in-out, transform .7s ease-in-out, box-shadow .7s ease-in-out;
}



.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg:hover {
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.015);
    background-position: left;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg.clickEvent {
    transform: scale(.90);
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg_title {
    display: flex;
    width: 50%;
    margin-right: 4%;
    align-items: center;
    justify-content: left;
    font-size: 1.25vmax;
    height: 100%;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg_cost {
    display: flex;
    height: 100%;
    width: 50%; 
    align-items: center;
    justify-items: center;
    font-size: 1vmax;
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirth {
    background-color: rgb(243, 243, 145);
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirthTitle {
    display: flex;
    justify-content: center;
    text-wrap: nowrap;
    align-items: center;
    flex-direction: row;
    font-size: 1.25vmax;
    margin-top: 4%;
    margin-left: 4%;
    height: 10%;
    width: 90%;
    font-size: 2vmax;
    color:rgb(255, 187, 0);
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirthButton {
    display: flex;
    cursor: pointer;
    justify-content: center;
    margin-left: 25%;
    align-items: center;
    width: 25%;
    height: 90%;
    border-radius: 4px;
    color: rgb(243, 243, 145);
    background-color: rgb(255, 187, 0);
    box-shadow: 0px 0px 0px grey;
    transform: scale(1);
    transition: all .75s ease-in-out;
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirthAmount {
    margin-left: 5%;
    color: rgb(255, 187, 0);
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_divider {
    background-color:rgb(255, 187, 0);
    margin-top: 1%;
    margin-left: 4%;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    width: 90%;
    
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirthButton:hover {
    background-color: rgb(247, 212, 116);
    box-shadow: 0px 0px 9px grey;
    transform: scale(1.05);
}

#hiddenDivGame_mainScreen_gameScreen_upgHolder_rebirthButton.clickEventRB {
    transform: scale(.8);
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mRUpg {
    display: flex;
    cursor: pointer;
    margin-left: 4%;
    border-radius: 4px;
    margin-top: 4%;
    background-color:#FFC421;
    align-items: center;
    width: 90%;
    padding: 4%;
    font-size: 2vmax;
    height: 10%;
    background: linear-gradient(160deg,rgb(255, 214, 80) 15%, rgb(248, 219, 123) 21%, rgb(252, 222, 126) 36%, rgba(255, 206, 71, 1) 45%, rgba(255, 209, 84, 1) 55%, rgba(255, 187, 0, 1) 77%);
    box-shadow: 0px 0px 0px grey;
    background-size: 200%;
    background-position: right;
    transform: scale(1);
    transition: background-position .7s ease-in-out, transform .7s ease-in-out, box-shadow .7s ease-in-out;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mRUpg.clickEventRB {
    transform: scale(.8);
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mRUpg * {
    color: rgb(243, 243, 145);
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mRUpg:hover {
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.015);
    background-position: left;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg_rtitle {
    font-size: 1.25vmax;
    width: 60%;
    margin-right: 15%;
}

.hiddenDivGame_mainScreen_gameScreen_upgHolder_mUpg_rCost {
    font-size: 1vmax;
}

.hiddenDivGame_mainScreen_gameScreen_question {
    display: flex;
    background-color: #8dceec;
    text-wrap: nowrap;
    font-size: 1.5vmax;
    color: white;
    border-radius: 4px;
    height: 15%;
    width: 50%;
    align-items: center;
    justify-content: center;
    scrollbar-width: thin;
}

.hiddenDivGame_mainScreen_gameScreen_twoQuestionHolder {
    display: flex;
    justify-self: bottom;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-radius: 4px;
    width: 90%;
    margin-top: 2%;
    height: 30%;
}

.hiddenDivGame_mainScreen_gameScreen_answer {
    display: flex;
    cursor: pointer;
    margin-right: 4%;
    text-wrap: nowrap;
    white-space: none;
    align-items: center;
    justify-content: center;
    font-size: 1.25vmax;
    background-color: #8dceec;
    border-radius: 4px;
    height: 80%;
    width: 40%;
    box-shadow: 0px 0px 0px grey;
    transform: scale(1);
    transition: all .75s ease-in-out;
}

.lessons_rightSide_lowerPage_videoDiv {
    display: flex;
    align-self: center;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    justify-content: top;
    width: 80%;
    height: 40%;
    margin-bottom: 2%;
    margin-top: 2%;
    background-color: #04afff;
    border-radius: 4px;

}

#lesson_rightSide_lowerPage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
    height: 400%;
}

#lesson_rightSide_lowerPage_quizPractice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.lessons_rightSide_lowerPage_lowerDivArticle {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 110%;
    margin-bottom: 2%;
    border-radius: 4px;
    background-color: #04afff;
}

#lesson_homePage_rightSide {
    display: flex;
    align-self: right;
    flex-direction: column;
    border-radius: 4px;
    margin-left: 5.5vw;
    background-color: #dcf4ff;
    width: 94.5vw;
    overflow-y: auto;
    height: 300%;
}

#lesson_homePage_rightSide_quizPractice {
    display: flex;
    align-self: right;
    flex-direction: column;
    border-radius: 4px;
    margin-left: 5.5vw;
    background-color: #dcf4ff;
    width: 94.5vw;
    overflow-y: auto;
    height: 100%;
}

.lessons_rightSide_lowerPage_videoDiv_videoFrame {
    display: flex;
    width: 66.7%;
    height: 70%;
    border: 0px;
    border-radius: 8px;
    background-color: black;
}

.lesson_rightSide_lowerPage_videoDiv_divider {
    background-color: #dcf4ff;
    border-width: 0px;
    border-radius: 4px;
    height: 1%;
    margin-bottom: 2%;
    width: 80%;
}

.lesson_rightSide_lowerPage_videoDiv_title {
    display: flex;
    align-self: left;
    font-size: 3vmax;
    margin-bottom: 1%;
    width: 80%;
    margin-top: 2%;
    color: #dcf4ff;
}


.lesson_rightSide_lowerPage_buttonHolder {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 15%;
    align-items: center;
}

.lessons_rightSide_lowerPage_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    font-size: 1vmax;
    width: 15%;
    height: 40%;
    border-radius: 4px;
    background-color: #dcf4ff;
    color:#04afff
}

#lessons_rightSide_lowerPage_buttonReturn {
    margin-left: 4%;
}

#lessons_rightSide_lowerPage_buttonNext {
    margin-left: 62%;
}

.lesson_rightSide_lowerPage_articleTitle {
    display: flex;
    align-self: left;
    font-size: 3vmax;
    margin-left: 10%;
    margin-bottom: 1%;
    margin-top: 2%;
    width: 80%;
    margin-top: 2%;
    color: #dcf4ff;
}

.lesson_rightSide_lowerPage_articleDivider {
    background-color: #dcf4ff;
    border-width: 0px;
    border-radius: 4px;
    height: .5%;
    margin-bottom: 2%;
    margin-left: 10%;
    width: 80%;
}

.lesson_rightSide_lowerPage_articleMainContent {
    display: flex;
    flex-direction: column;
    justify-self: center;
    text-wrap: wrap;
    color:#04afff;
    font-weight: normal;
    font-size: 2vmax;
    padding: 2%;
    align-self: center;
    border-radius: 4px;
    height: 90%;
    width: 80%;
    background-color: #dcf4ff;
}

.lesson_rightSide_lowerPage_articleMainDivider {
    background-color:#04afff;
    border-width: 0px;
    border-radius: 4px;
    height: .5%;
    margin-bottom: 2%;
    margin-top: 2%;
    margin-left: 10%;
    width: 80%;
}

.lesson_rightSide_lowerPage_videoDiv_adapativeButtonIncrease {
    display: flex;
    cursor: pointer;
    background-color: #04afff;
    color:#dcf4ff;
    font-size: 1vmax;
    text-align: center;
    align-items: center;
    border: 0px;
    justify-content: center;
    align-self: center;
    margin-left: 2%;
    border-radius: 4px;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    height: 90%;
    width: 15%;
    transition: all .8s ease-in-out;
}

.lesson_rightSide_lowerPage_videoDiv_adapativeButtonIncrease:hover {
    background-color: #6eccf8;
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.05);
}

.lesson_rightSide_lowerPage_videoDiv_adapativeButtonDecrease {
    display: flex;
    cursor: pointer;
    background-color: #04afff;
    color:#dcf4ff;
    font-size: .8vmax;
    align-items: center;
    border: 0px;
    text-align: center;
    justify-content: center;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    align-self: center;
    margin-left: 2%;
    border-radius: 4px;
    height: 90%;
    width: 15%;
    transition: all .8s ease-in-out;
}

.lesson_rightSide_lowerPage_videoDiv_adapativeButtonDecrease:hover {
    background-color: #6eccf8;
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.05);
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv {
    display: flex;
    flex-direction: column;
    background-color:#d1ebf7;
    width: 44%;
    height: 90%;
    margin-right: 3%;
    border-radius: 4px;
    align-self: center;
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_title {
    display: flex;
    color: #04afff;
    width: 100%;
    height: 10%;
    font-size: 1.5vmax;
    margin-left: 8%;
    margin-top: 2%;
    margin-bottom: 1%;
    align-items: center;
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_divider {
    background-color:#04afff;
    border-width: 0px;
    border-radius: 4px;
    height: 2%;
    margin-bottom: 2%;
    margin-left: 8%;
    width: 84%;
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_mainContent {
    display: flex;
    flex-direction: column;
    margin-left: 8%;
    align-items: center;
    background-color: #04afff;
    width: 84%;
    height: 72%;
    border-radius: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #04afff #a8e1fb;

}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_mainContent_lessons {
    display: flex;
    margin-top: 2%;
    font-size: 1vmax;
    align-items: center;
    padding-left: 2%;
    color:#04afff;
    flex-shrink: 0;
    width: 90%;
    border-radius: 4px;
    height: 20%;
    background-color: #d1eaf4;
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_mainContent_lessonsImprovementIndex {
    display: flex;
    align-items: center;
    background-color: #04afff;
    margin-right: 2%;
    border-radius: 4px;
    justify-content: center;
    font-size: .6vmax;
    width: 30%;
    height: 70%;
}

.homePage_rightSide_lowerDiv_mainDiv_rightDiv {
    display: flex;
    flex-direction: column;
    background-color: #d1ebf7;
    width: 47%;
    height: 90%;
    margin-left: 0%;
    border-radius: 4px;
    align-self: center;
}

#homePage_rightSide_lowerDiv_mainDiv_leftDiv_titleInformation {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2%;
    width: 20%;
    color:#d1ebf7;
    font-size: 1vmax;
    margin-left: 20%;
    border-radius: 4px;
    top: 18%;
    background-color: #2bb5f6;
    height: 50%;
}

#homePage_rightSide_lowerDiv_mainDiv_leftDiv_titleButton {
    display: flex;
    cursor: pointer;
    color:#04afff;
    justify-content: center;
    align-items: center;
    margin-left: 1%;
    font-size: 1vmax;
    aspect-ratio: 1 / 1;
    border: 2px solid #04afff;
    border-radius: 50%;
    width: 4%;
}

.contextOfTextDiv {
    display: flex;
    color:#04afff;
    width: 50%;
    font-size: .6vmax;
}

.homePage_rightSide_lowerDiv_mainDiv_leftDiv_mainContent_lessons_start {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: .6vmax;
    width: 15%;
    height: 70%;
    border-radius: 4px;
    background-color: #04afff;
    box-shadow: 0px 0px 0px grey;
    color:#d1ebf7;
    transition: all .8s ease-in-out;
}

#lesson_rightSide_lowerPage_videoDiv_improvementIndex {
    display: flex;
    background-color: #04afff;
    color:#dcf4ff;
    font-size: .8vmax;
    align-items: center;
    text-align: center;
    border: 0px;
    justify-content: center;
    transform: scale(1);
    box-shadow: 0px 0px 0px grey;
    align-self: center;
    margin-left: 2%;
    border-radius: 4px;
    height: 90%;
    width: 12.5%;
}

.homePage_rightSide_lowerDiv_mainDiv_rightDiv_title {
    display: flex;
    color: #04afff;
    width: 100%;
    height: 10%;
    font-size: 1.5vmax;
    margin-left: 8%;
    margin-top: 2%;
    margin-bottom: 1%;
    align-items: center;
}

#homePage_rightSide_lowerDiv_mainDiv_rightDiv_titleButton {
    display: flex;
    cursor: pointer;
    color:#04afff;
    justify-content: center;
    align-items: center;
    margin-left: 1%;
    font-size: 1vmax;
    aspect-ratio: 1 / 1;
    border: 2px solid #04afff;
    border-radius: 50%;
    width: 4%;
}

#homePage_rightSide_lowerDiv_mainDiv_rightDiv_titleInformation {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2%;
    width: 20%;
    color:#d1ebf7;
    font-size: 1vmax;
    margin-left: 26%;
    border-radius: 4px;
    top: 18%;
    background-color: #2bb5f6;
    height: 50%;
    z-index: 100;
}

.homePage_rightSide_lowerDiv_mainDiv_rightDiv_decrease {
    display: flex;
    margin-left: 1%;
    cursor: pointer;
    transform: scale(1);
    background-color: rgb(246, 81, 81);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: 1vmax;
    width: 5%;
    height: 80%;
    box-shadow: 0px 0px 0px grey;
    transition: all .8s ease-in-out;
}

.homePage_rightSide_lowerDiv_mainDiv_rightDiv_decrease:hover {
    box-shadow: 0px 0px 4px grey;
    background-color: rgb(250, 164, 164);
}


.homePage_rightSide_lowerDiv_mainDiv_rightDiv_increase {
    display: flex;
    margin-left: 4%;
    cursor: pointer;
    background-color: rgb(59, 206, 59);
    transform: scale(1);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-size: 1vmax;
    width: 5%;
    height: 80%;
    box-shadow: 0px 0px 0px grey;
    transition: all .8s ease-in-out;
}

.homePage_rightSide_lowerDiv_mainDiv_rightDiv_increase:hover {
    box-shadow: 0px 0px 4px grey;
    background-color: rgb(117, 249, 117);
}

.homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder_continueDiv_lessonText {
    display: flex;
    height: 50%;
    width: 80%;
    background-color: #04afff;
    font-weight: 300;
    text-align: center;
    border-radius: 4px;
    padding-left: 4%;
    padding-right: 4%;
    align-self: center;
    justify-self: center;
    align-items: center;
    font-size: .8vmax;
    margin-top: 8%;
}

.homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder_continueDiv_divider {
    display: flex;
    background-color: #04afff;
    margin-top: 10%;
    margin-bottom: 2%;
    border-width: 0px;
    border-radius: 4px;
    align-self: center;
    justify-self: center;
    height: 2%;
    width: 80%;
}

.homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder_continueDiv_lessonType {
    display: flex;
    height: 12.5%;
    font-weight: 300;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 4px;
    width: 80%;
    background-color:#04afff;
    font-size: .7vmax;
    margin-top: 6%;
}

.homePage_rightSide_upperDiv_rightDiv_verticalDiv_mainContinueDivHolder_continueDiv_improvementIndex {
    display: flex;
    height: 12.5%;
    font-weight: 300;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 4px;
    width: 80%;
    background-color:#04afff;
    font-size: .6vmax;
    margin-top: 6%;
}

.lesson_rightSide_lowerPage_quizPage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 90%;
    border-radius: 4px;
    background-color: #04afff;
}

.lesson_rightSide_lowerPage_quizPage_buttonDiv {
    display: flex;
    height: 15%;
    width: 100%;
}

.lesson_rightSide_lowerPage_quizPage_title {
    display: flex;
    font-size: 7vmax;
}

.lesson_rightSide_lowerPage_quizPage_extraInformation {
    display: flex;
    font-size: 1.5vmax;
    text-align: center;
    align-items: center;
    margin-left: 2.5%;
    justify-content: center;
    align-items: center;
    font-weight: 300;
}

.lesson_rightSide_lowerPage_quizPage_quizStartButton {
    display: flex;
    color: #04afff;
    background-color: #dcf4ff;
    cursor: pointer;
    margin-top: 1%;
    align-items: center;
    border-radius: 4px;
    box-shadow: 0px 0px 0px grey;
    justify-content: center;
    font-size: 1.25vmax;
    width: 12.5%;
    height: 6%;
    transition: all 1s ease-in-out;
}

.lesson_rightSide_lowerPage_quizPage_improvementIndexDiv {
    display: flex;
    cursor: pointer;
    color: #dcf4ff;
    justify-content: center;
    justify-self: center;
    align-items: center;
    font-size: 1.25vmax;
    aspect-ratio: 1 / 1;
    max-height: 70%;
    border: 2px solid #dcf4ff;
    border-radius: 50%;
    width: 3%;
}

.lesson_rightSide_lowerPage_quizPage_buttonDiv_improvementIndexInformation {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2%;
    width: 20%;
    color:#dcf4ff;
    font-size: 1.4vmax;
    font-weight: 300;
    margin-left: 18%;
    border-radius: 4px;
    bottom: 16%;
    background-color:#37baf6;
    height: 25%;
}

.lesson_rightSide_lowerPage_quizPage_extraInformationText {
    display: flex;
    width: 60%;
    font-size: 1.5vmax;
    font-weight: 300;
}

#homePage_rightSide_titleDiv_titleQ {
    display: flex;
    justify-items: center;
    height: 40%;
    margin-top: 1%;
}

.lesson_rightSide_lowerPage_quizPage_temporaryQuizPageBlocker {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #04afff;
    width: 85%;
    height: 71.4%;
    border-radius: 4px;
}

.lesson_rightSide_lowerPage_quizPage_temporaryQuizPageBlocker_titleTextContent {
    display: flex;
    color:#dcf4ff;
    font-size: 7vmax;
    text-wrap: nowrap;
    padding-top: 2.5%;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 1%;
    width: 45%;
    height: 25%;
}

.lesson_rightSide_lowerPage_quizPage_temporaryQuizPageBlocker_briefExplanation {
    display: flex;
    color:#dcf4ff;
    text-align: center;
    font-size: 1.25vmax;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    width: 45%;
    height: 15%;
    margin-bottom: 6%;
}

.lesson_rightSide_lowerPage_quizPage_endCardTitle {
    display: flex;
    font-size: 4vmax;
    text-align: center;
    align-items: flex-end;
    justify-content: center;
    width: 50%;
    height: 30%;
}

.lesson_rightSide_lowerPage_quizPage_quizAccuracy {
    display: flex;
    background-color:#dcf4ff;
    color: #04afff;
    font-weight: 600;
    margin-bottom: 2%;
    border-radius: 4px;
    margin-top: 1%;
    font-size: 1vmax;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 15%;
    height: 5%;
}

.lesson_rightSide_lowerPage_quizPage_disclaimer {
    display: flex;
    margin-top: 1%;
    font-size: 1vmax;
    font-weight: 100;
    text-align: center;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    height: 5%;
}

.lesson_rightSide_lowerPage_quizPage_endRestartButton {
    display: flex;
    cursor: pointer;
    width: 20%;
    background-color: #dcf4ff;
    color: #04afff;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 2vmax;
    transform: scale(1);
    height: 10%;
    margin-bottom: 3%;
    box-shadow: 0px 0px 0px grey;
    transition: all .8s ease-in-out;
}

.lesson_rightSide_lowerPage_quizPage_returnButton {
    display: flex;
    background-color: #04afff;
    align-items: center;
    align-self: center;
    border-radius: 4px;
    justify-content: center;
    color: #dcf4ff;
    width: 8%;
    height: 40%;
}


.lesson_rightSide_lowerPage_quizPage_returnButton {
    display: flex;
    background-color: #04afff;
    align-items: center;
    cursor: pointer;
    align-self: center;
    border-radius: 4px;
    justify-content: center;
    color: #dcf4ff;
    width: 8%;
    height: 40%;
    margin-left: 3%;
    box-shadow: 0px 0px 0px grey;
    transform: scale(1);
    transition: all .8s ease-in-out;
}

.lesson_rightSide_lowerPage_quizPage_returnButton:hover {
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.05);
    background-color: #5ec5f5;
}

.lesson_rightSide_lowerPage_quizPage_nextButton {
    display: flex;
    background-color: #04afff;
    cursor: pointer;
    align-items: center;
    align-self: center;
    margin-left: 77.5%;
    border-radius: 4px;
    justify-content: center;
    color: #dcf4ff;
    width: 8%;
    height: 40%;
    box-shadow: 0px 0px 0px grey;
    transform: scale(1);
    transition: all .8s ease-in-out;
}

.lesson_rightSide_lowerPage_quizPage_nextButton:hover {
    box-shadow: 0px 0px 4px grey;
    transform: scale(1.05);
    background-color: #5ec5f5;
}

#homePage_rightSide_vocabularySearch {
    display: flex;
    align-self: center;
    background: url(imageFiles/magnifyingGlass.png);
    background-position: .2%;
    background-repeat: no-repeat;
    background-size: 4%;
    border-radius: 4px;
    min-height: 5vh;
    font-weight: 500;
    border-color: #dcf4ff;
    padding-left: 3%;
    border: 0px;
    color:#dcf4ff;
    outline-color:#98d5f1;
    outline-width: 4px;
    background-color: #04afff;
    width: 70%;
    height: 5%;
}

#homePage_rightSide_vocabularySearch::placeholder {
    color: #ace5fa;
}

.homePage_rightSide_vocabularyDetail {
    display: flex;
    cursor: pointer;
    margin-top: 2%;
    width: 95%;
    padding-bottom: 2%;
    justify-content: left;
    flex-direction: column;
    align-items: flex-start;
    background-color: #04afff;
    border-radius: 4px;
    align-self: center;
    justify-self: center;
    transition: all 1s ease-in-out;
}


.homePage_rightSide_vocabularyText {
    display: flex;
    text-wrap: nowrap;
    font-size: 2vmax;
    margin-left: 2%;
    margin-right: 2%;
    height: 100%;
    width: auto;
}

.homePage_rightSide_vocabularyUnit {
    display: flex;
    color:#04afff;
    margin-left: 2%;
    justify-content: center;
    align-items: center;
    margin-right: 2%;
    font-size: .8vmax;
    border-radius: 4px;
    padding: 0% 2%;
    height: 100%;
    background-color:#d1eaf4;
    width: auto;
}

.homePage_rightSide_vocabularyLesson {
    display: flex;
    color:#04afff;
    margin-left: 2%;
    font-size: .8vmax;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    padding: 0% 2%;
    margin-right: 2%;
    height: 100%;
    background-color:#d1eaf4;
    width: auto;
}

.homePage_rightSide_vocabularySummary {
    display: flex;
    align-items: center;
    width: 95%;
    margin-top: 2%;
    height: 70%;
}

.homePage_rightSide_vocabularyDefintion {
    display: flex;
    background-color: #d1eaf4;
    font-weight: 500;
    font-size: 1vmax;
    border-radius: 4px;
    color:#04afff;
    padding: 1%;
    width: 67.8vw;
    margin-left: 3%;
    margin-top: 2%;
    height: 80%;
    margin-bottom: 5%;
    transition: all 1s ease-in-out;
}

#homePage_rightSide_vocabularyDivHolder {
    display: flex;
    flex-direction: column;
    height: auto;
}

.homePage_rightSide_vocabularyDivHolder_unitDivSeparator {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#9ddefc;
    flex-direction: column;
    margin-top: 2%;
    margin-bottom: 2%;
    align-self: center;
    justify-self: center;
    border-radius: 4px;
    width: 80%;
    height: auto;
    padding-bottom: 2%;
}

.homePage_rightSide_vocabularyDivHolder_unitDivSeparator_titleDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding-top: 1%;
    width: 100%;
    height: 14vh;
}

.homePage_rightSide_vocabularyDivHolder_unitDivSeparator_titleContent {
    display: flex;
    color:#04afff;
    margin-top: 2%;
    margin-left: 4%;
    font-size: 3vmax;
}

.homePage_rightSide_vocabularyDivHolder_unitDivSeparator_titleDivider {
    background-color:#04afff;
    margin: 1% 0%;
    border-width: 0px;
    border-radius: 4px;
    margin-left: 4%;
    height: 1vh;
    width: 90%;
}

#homePage_rightSide_upperDiv_leftDiv_button {
    display: flex;
    margin-left: 40%;
    font-size: 1vmax;
    background-color:#dcf4ff;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    border-radius: 4px;
    color:#04afff;
    width: 40%;
    transform: scale(1);
    height: 70%;
    box-shadow: 0px 0px 0px grey;
    transition: all .8s ease-in-out;
}

#homePage_rightSide_upperDiv_leftDiv_titleTextContent {
    display: flex;
    width: 10%;
    text-wrap: nowrap;
    align-items: center;
}

#homePage_rightSide_upperDiv_leftDiv_button:hover {
    transform: scale(1.025);
    background-color: #b1ddf1;
    box-shadow: 0px 0px 4px grey;
}

#mainPage_graph {
    width: 100%;
    height: 80%;
}

#homePage_rightSide_titleDiv_titleContent {
    display: flex;
    align-items: center;
    justify-content: center;
}