@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

:root {
    --backgroundColor: rgb(255, 255, 255);
    --answerFontSize: 9vw;
    --overlaySize: "20%";
}

body {
    
    background-color:var(--backgroundColor);
    font-family: 'Montserrat', sans-serif;
    /*font-family: Arial;*/

}

body, html {

    margin: 0;
    padding: 0;

}





.index {
    
    text-align: left;

}

.div_text {

    text-align: center;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

}

.p_question {

    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    /*font-size: clamp(24px, 4.5vw, 40px);*/
    font-size: 50px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0px;
    margin-bottom: 0px;
    
}

.p_answer {

    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    font-size: clamp(50px ,var(--answerFontSize), 80px);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    margin-bottom: 0px;

}

.p_holiday {

    font-weight: 400;
    font-size: clamp(16px ,1.2vw, 22px);
    color: rgba(255, 255, 255, 0.45);
    margin-top: 12px;
    margin-bottom: 0px;

}





.listMonth, .listMonthHidden {

    color: rgba(0, 0, 0, 0.764);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    transform: translateX(3px);

}

.listHoliday {

    color: rgba(0, 0, 0, 0.778);
    list-style-type: none;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 400;

}

.listMonthNumber {

    color: rgba(0, 0, 0, 0.635);
    list-style-type: none;
    padding-left: 10px;
    transform: translateX(-8px);
    font-weight: 600;
    font-size: 18px;

}

.listFlexContainer {

    display: flex;
    justify-content: center;
    margin-left: 90px;

}

.listHolidayDiv {

    flex: 0.2 0 auto;
    transform: translateX(-90px);

}

.listCurrentDayDiv {

    margin-right: 8px;

}

.notRedItem {

    color: rgba(0, 0, 0, 0.725);
    margin-bottom: 4px;

}

.belowList {

    margin-top: 32px;
    margin: 0 auto;
    max-width: 600px;

}

.listExplanation {

    color: rgba(0, 0, 0, 0.69);
    text-align: center;
    font-weight: 500;
    font-style: italic;
    margin-top: 30px;

}

.listInformation {

    color: rgba(0, 0, 0, 0.69);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 400;

}

a:link {

    color: rgb(0, 0, 0);

}

a:visited {

    color: rgba(0, 0, 0, 0.69);

}

a:hover {

    color: rgba(0, 0, 0, 0.433);

}

a:active {

    color: rgba(255, 255, 255, 0.317);

}

.listTitleDiv {

    margin-left: 0px;
    color: rgba(0, 0, 0, 0.778);
    text-align: center;

}

.listTitle {

    margin-bottom: 0px;
    font-size: clamp(26px, 32px, 34px);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;

}

.listUnderTitle {

    margin-top: 8px;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.651);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin-left: 5%;
    margin-right: 5%;

}

.listMonthNumberItem {

    margin-bottom: 4px;

}

.listMonthNumberItem span {

    background-color: rgba(255, 255, 255, 0.297);
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    text-align: center;
    line-height: 1.6;

}

.notRedItem span, .redHolidayItem span{

    background-color: rgba(255, 255, 255, 0.097);
    display: block;
    height: 28px;
    border-radius: 6px;
    line-height: 1.6;
    padding-left: 8px;

}

.notRedItem span {

    font-style: italic;

}

.redHolidayItem {

    color: rgba(0, 0, 0, 0.725);
    margin-bottom: 4px;

}

.listHolidayTodayNumber span {
    
    background-color: rgba(255, 255, 255, 0.482);
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 4px;

}

.listHolidayToday span {
    
    background-color: rgba(255, 255, 255, 0.482);
    display: block;
    height: 28px;
    border-radius: 6px;
    line-height: 1.6;
    padding-left: 8px;
    margin-bottom: 4px;

}

.listHolidayTodayOrange span {
    
    background-color: rgba(255, 255, 255, 0.482);
    display: block;
    height: 28px;
    border-radius: 6px;
    line-height: 1.6;
    padding-left: 8px;
    margin-bottom: 4px;
    font-style: italic;

}



.overlay {

    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-x: hidden;
    transition: width 0.5s, backdrop-filter 0.5s;
    backdrop-filter: blur(8px);

}

.overlay-content {

    font-family: 'Montserrat', sans-serif;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    transition: font-size 0.5s, opacity 0.3s;
    opacity: 0;
    font-size: 0;

}

.overlaySeparator {

    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    width: 0vw;
    transition: width 0.5s

}

.overlay.open .overlay-content {
    opacity: 1;
    font-size: 22px;
}

.overlay.open .overlaySeparator {
    width: 13vw;
}

.overlay a {

    padding: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    transition: color 0.3s;

}

.overlay a:hover {

    color: rgb(255, 255, 255);

}

.overlay a:focus {

    color: rgba(255, 255, 255, 0.6);

}

.overlay .closebtn {

    position: absolute;
    top: 0px;
    right: 25px;
    font-size: 60px;

}



.aboutSeparator {

    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    width: 30vw;

}

.aboutParagraph {

    text-align: center;
    margin-left: 30%;
    margin-right: 30%;

}

#footer_Absolute {

    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2rem;
    font-size: 14px;

}

#footer_Fixed {

    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2rem;
    font-size: 14px;

}

.privacyBody {

    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 40px;
    padding: 20px;

}

@media screen and (max-height: 450px) {

    .overlay a {font-size:20px;}
    .overlay .closebtn {

        font-size: 40px;
        top: 15px;
        right: 35px;

    }
}

@media screen and (max-width: 900px) {
    
    .overlaySeparator {width: clamp(150px, 50vw, 250px);}
    .p_question {font-size: 7vw}
    .aboutParagraph {
        margin-left: 10%;
        margin-right: 10%;
    }
    .aboutSeparator {width: 55vw}
    footer {font-size: 12px;}
    .privacyBody {
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }

}

.topMenu {

    text-align: right;
    padding-top: 10px;
    padding-right: 10px;

}

.openNavBtn {

    display: inline-flex;
    padding: 0;
    margin-top: 6px;
    margin-right: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    color: rgb(255, 255, 255);
    opacity: 0.5;

}

.openNavBtn:hover {

    color: rgb(255, 255, 255);
    opacity: 0.8;
    transition: 0.3s;

}

.openNavBtn:active {

    color: rgb(255, 255, 255);
    opacity: 0.7;
    transition: 0.3s;

}

.navBtnText, .navBtnIcon {

    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    
}



#page-container {

    position: relative;
    min-height: 100vh;

}

#content-wrap {

    padding-bottom: 2rem;

}

#privacy_Link {

    padding-left: 12px;

}