@font-face {
    font-family: 'MyFontBold';
    src: url('font/EauTest/eautest_bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyFont';
    src: url('font/EauTest/eautest_regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.BoldText{
    font-family: 'MyFontBold';
}
.Text{
    font-family: 'MyFont';
}

/* Base styles */
body {
    background-color: #ffffff;
    font-size: large;
    margin: 0;
    padding: 0;
}


/* Main page */


/* main page menu*/
#calendar_main_menu_background{
    margin-top: -2rem;
    width: 0vw;
    height: 8rem;
    background: linear-gradient(to right, #efc6b2, #f1e3cd);
}

#main_menu_background{
    margin-top: -2rem;
    width: 0vw;
    height: 8rem;
    background: linear-gradient(to right, #efc6b2, #f1e3cd);
}

#main_menu{
    display: flex;
    align-items: start;
    padding-top: 3rem;        
    gap: 18px;             
    justify-content: center;
}


.menu_button{
    position: relative;
    font-size: 30px;
    background-color: #E91E63;;
    border-color: transparent;
    border-radius: 20px;
    border-width: 10px;
    color: white;

    white-space: nowrap;       /* NEVER wrap text */
    overflow:visible;          /* hide overflow if it doesn’t fit */
    text-overflow:inherit;   /* add "…" if text is too long */


    
}



#impact_background{
    color: white;
}
#impact{
    margin-left: 50%;
    height: 15rem;
}
#impact_text_1{
    color: #ff9cb5;
    font-size: xx-large;
    z-index: 1;
    margin-top: 2rem;
    margin-left: -24rem;
}
#impact_text_2{
    color: #ff9cb5;
    font-size: large;
    z-index: 1;
    margin-top: -2.5rem;
    margin-left: -24rem;
}
#impact_img{
    z-index: 2;
    width: 400px;
    height: 350px;
    margin-top: -13rem; /* Adjust as needed */
    margin-left: 3rem;
}




#empathy{
    width: 100vw;
    height: 20rem;
    background: linear-gradient(45deg, #efc6b2, #f1e3cd);
    
}
#empathy_background{
    margin-left: 50%;
}

#empathy_text_1{
    padding-top: 2rem;
    margin-left: -4rem;
    z-index: 3;
    font-size: xx-large;
}
#empathy_text_2{
    font-size: large;
    margin-top: -3rem;
    margin-left: -4rem;   
}
#empathy_img{
    width: 20rem;
    height: 20rem;
    margin-left: -25rem;
    margin-top: -11rem;
}





#pain{
    margin-left: 50%;
    height: 30rem;
}

#pain_text_1{
    font:bold;
    color: #ff9cb5;
    font-size: xx-large;
    margin-top: 3rem;
    margin-left: -25rem;
}

#pain_text_2{
    font:bold;
    color: #ff9cb5;
    font-size: large;
    margin-top: -3rem;
    margin-left: -25rem;
}

#pain_img {
    z-index: 2;
    width: 500px;
    height: 350px;
    margin-top: -12rem; /* Adjust as needed */
    padding-bottom: 2rem;
    margin-left: -8.5rem;
}






#authority_background{
    margin-top: -5rem;
    width: 100vw;
    height: 40rem;
    background: linear-gradient(45deg, #fb8184, #fe70a0);
}

#authority{
    margin-left: 50%;
}
#authority_text_1{
    font-size: xx-large;
    margin-left: -14rem;
    padding-top: 5rem;
    color: #ffffff;
}
#authority_text_2{
    font-size: large;
    margin-top: -3rem;
    margin-left: -17.5rem;
    color: #ffffff;
}
#authority_img{
    filter: invert(1) brightness(2);
    width: 350px;
    height: 350px;
    margin-left: -10rem;
}





#action{
    margin-left: 50%;
}
#action_text_1{
    margin-left: -16.99rem;
    margin-top: 3rem;
    font-size: xx-large;
    color: #ff9cb5;
}
#action_text_2{
    font-size: large;
    margin-top: -2rem;
    margin-left: -14.99999rem;
    color: #ff9cb5;
}

#foot_note{
    width: 100vw;
    height: 10rem;
    background: linear-gradient(45deg, #efc6b2, #f1e3cd);
}

#foot_note_div{
    margin-left: 50%;
}
#foot_note_text{
    margin-left: -10rem;
}

/* Calendar */
#calendar {
    border-collapse: collapse;
    margin: 2rem auto;
    text-align: center;
}

#calendar th,
#calendar td {
    border: 5px solid #ffffff;
    padding: 0.5rem;
}

#description,
#main_heading {
    text-align: center;
    margin: 1rem auto;
    color: #E91E63;
}

#green_cube,
#orange_cube {
    width: 10px;
    height: 10px;
}

#green_cube {
    background-color: #4CAF50;
}

#orange_cube {
    background-color: orange;
}

.national_holiday {
    background-color: #4CAF50;
    color: white;
}

/* Name Generator */
#name_generator_body, #name_generator_body td{
    display: flex;
    justify-content: center;
    text-align: center;
    border: 5px solid #ffffff;
}



#start_name_search {
    width: 160px;
    height: 60px;
    cursor: pointer;
    font-size: xx-large;
}

#start_name_search:active {
    background-color: #535051;
}

#out_put_for_name {
    width: 90%;
    max-width: 500px;
    height: 400px;
    border: 1px solid black;
    background-color: #ffffff;
    margin-top: 1rem;
    padding: 1rem;
    overflow: auto;
}

.underText{
    margin-left: 50%;
}
.underTextContents{
    margin-left: -45rem;
    text-align: center;
}
.listUnderText{
    margin-left: -15rem;
}
#specialBackGround{
    margin-top: 10%;
}

@media(max-width: 768px)
{
    #underText{
        margin-left: 270%;
    }
    #underTextList{
        margin-left: -30rem;
    }
    .underText{
        margin-left: 50%;
    }
    .underTextContents{
        margin-left: -45rem;
        text-align: center;
    }
    .listUnderText{
        margin-left: -15rem;
    }

    #main_menu_background{
    margin-top: -2rem;
    width: 350%;
    height: 8rem;
    background: linear-gradient(to right, #efc6b2, #f1e3cd);
    }


    #impact_background{
        color: white;
        width: 350%;
    }
    #impact{
        margin-left: 50%;
        height: 15rem;
    }
    #impact_text_1{
        color: #ff9cb5;
        font-size: xx-large;
        z-index: 1;
        margin-top: 2rem;
        margin-left: -24rem;
    }
    #impact_text_2{
        color: #ff9cb5;
        font-size: large;
        z-index: 1;
        margin-top: -2.5rem;
        margin-left: -24rem;
    }
    #impact_img{
        z-index: 2;
        width: 400px;
        height: 350px;
        margin-top: -13rem; /* Adjust as needed */
        margin-left: 3rem;
    }


    #empathy{
        width: 350%;
        height: 20rem;
        background: linear-gradient(45deg, #efc6b2, #f1e3cd);
    }
    #empathy_background{
        margin-left: 50%;
    }

    #empathy_text_1{
        padding-top: 2rem;
        margin-left: -4rem;
        z-index: 3;
        font-size: xx-large;
    }
    #empathy_text_2{
        font-size: large;
        margin-top: -3rem;
        margin-left: -4rem;   
    }
    #empathy_img{
        width: 20rem;
        height: 20rem;
        margin-left: -25rem;
        margin-top: -11rem;
    }


    #pain_background{
        background-color: white;
        width: 300%;
    }
    #pain{
        margin-left: 50%;
        height: 30rem;
    }

    #pain_text_1{
        font:bold;
        color: #ff9cb5;
        font-size: xx-large;
        margin-top: 3rem;
        margin-left: -25rem;
    }

    #pain_text_2{
        font:bold;
        color: #ff9cb5;
        font-size: large;
        margin-top: -3rem;
        margin-left: -25rem;
    }

    #pain_img {
        z-index: 2;
        width: 500px;
        height: 350px;
        margin-top: -12rem; /* Adjust as needed */
        padding-bottom: 2rem;
        margin-left: -8.5rem;
    }


    #authority_background{
        margin-top: -5rem;
        width: 350%;
        height: 40rem;
        background: linear-gradient(45deg, #fb8184, #fe70a0);
    }

    #authority{
        margin-left: 50%;
    }

    #authority_text_1{
        font-size: xx-large;
        margin-left: -14rem;
        padding-top: 5rem;
        color: #ffffff;
    }

    #authority_text_2{
        font-size: large;
        margin-top: -3rem;
        margin-left: -17.5rem;
        color: #ffffff;
    }

    #authority_img{
        filter: invert(1) brightness(2);
        width: 350px;
        height: 350px;
        margin-left: -10rem;
    }


    #action_background{
        color: white;
        width: 350%;
    }
    #action{
        margin-left: 50%;
    }

    #action_text_1{
        margin-left: -16.99rem;
        margin-top: 3rem;
        font-size: xx-large;
        color: #ff9cb5;
    }

    #action_text_2{
        font-size: large;
        margin-top: -2rem;
        margin-left: -14.99999rem;
        color: #ff9cb5;
    }


    #foot_note{
        width: 350%;
        height: 10rem;
        background: linear-gradient(45deg, #efc6b2, #f1e3cd);
    }

    #foot_note_div{
        margin-left: 50%;
    }

    #foot_note_text{
        margin-left: -10rem;
    }

    /* Calculator*/
    #calculator_main_body{
        width: 350%;
    }



    /* Calendar */
    /*The calendar has its own menu, because it is too fat*/
    #calendar_main_menu_background{
        margin-top: -2rem;
        width: 350%;
        height: 8rem;
        background: linear-gradient(to right, #efc6b2, #f1e3cd);
    }
    #calendar_background{
        width: 350%;
    }
    #calendar {
        border-collapse: collapse;
        margin: 2rem auto;
        text-align: center;
    }

    #calendar th,
    #calendar td {
        border: 5px solid #ffffff;
        padding: 0.5rem;
    }

    #description,
    #main_heading {
        text-align: center;
        margin: 1rem auto;
        color: #E91E63;
    }

#green_cube,
#orange_cube {
    width: 10px;
    height: 10px;
}

#green_cube {
    background-color: #4CAF50;
}

#orange_cube {
    background-color: orange;
}

.national_holiday {
    background-color: #4CAF50;
    color: white;
}

/* Name Generator */
#name_generator_body{
    width: 350%;
}

#name_generator_body, #name_generator_body td{
    display: flex;
    justify-content: center;
    text-align: center;
    border: 5px solid #ffffff;
}



#start_name_search {
    width: 160px;
    height: 60px;
    cursor: pointer;
    font-size: xx-large;
}

#start_name_search:active {
    background-color: #535051;
}

#out_put_for_name {
    width: 90%;
    max-width: 500px;
    height: 400px;
    border: 1px solid black;
    background-color: #ffffff;
    margin-top: 1rem;
    padding: 1rem;
    overflow: auto;
}

}