.notebookCover{
    width: 100vw;
    height: 130vh;
    background-color: #111419;
    color: #fff;
    position: absolute;
    z-index: 97;
    text-align: center;
    transform-origin: center;
}
.notebookCover h1{
    font-family: 'Kalam', cursive;
    position: absolute;
    top: 50vh;
    left: 50vw;
    width: fit-content;
    transform: translate(-50%,-50%);
    font-size: 80pt;
}
.notebookCover h2{
    position: absolute;
    font-family: 'Kalam', cursive;
    font-size: 16pt;
    text-align: left;
    color: #8da8db;
    top: 60vh;
    left: 50vw;
    width: 500px;
    transform: translate(-50%,-50%);
    line-height: 10px;
    font-weight: normal;
}
@keyframes openNote {
    0%{
        transform: none;
    }
    33%{
        transform: scaleX(0.5%);
    }
    50%{
        transform: scaleX(0.5%) scaleY(0%);
    }
    100%{
        transform: scaleX(0.5%) scaleY(0%);
    }
}


.containerNotebook{
    position: relative;
    /* background-color: #6c98e799; */
    background-color: #25272b;
    /* background-color: #e1d097; */
    width: 100vw;
    height: 110vh !important;
    overflow: hidden;
    justify-items: center;
    align-items: baseline;
    display: grid;
    grid-template-rows: 20vh 16vh 1fr;
    grid-template-areas: "blank"
    "buttons"
    "nbm";
}
#notebookBlank{
    grid-area: blank;
    width: 100vw;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5vh;
    color: #fff;
    font-size: 16pt;
}
#notebookBlank a{
    color: #fff;
}
.monthButtonContainer{
    grid-area: buttons;
    display: flex;
    height: 16vh;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 90vw;
}

.notebookMonth{
    grid-area: nbm;
    color: #303030;
    display: grid;
    grid-template-columns: 25vw 75vw;
    grid-template-rows: 1fr 8vh 5vh 5vh 5vh 5vh 5vh 1fr;
    grid-template-areas: "mltblank mcontent"
    "mltitle mcontent"
    "mlw1 mcontent"
    "mlw2 mcontent"
    "mlw3 mcontent"
    "mlw4 mcontent"
    "mlw5 mcontent"
    "mlbblank mcontent";
    justify-items: center;
    height: 80vh;
    width: 100vw !important;
    justify-content: space-evenly;
    background-color: #25272b;
    align-items: center;
    position: absolute;
    z-index: -1;
    /* opacity: 0; */
}
#december{
    z-index: 95;
}
.notebookWeekSelectorh2,.notebookWeekSelectorspan1,.notebookWeekSelectorspan2,.notebookWeekSelectorspan3,.notebookWeekSelectorspan4,.notebookWeekSelectorspan5{
    transform: translateX(1vw);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
}
.notebookWeekSelectorspan1:hover,.notebookWeekSelectorspan2:hover,.notebookWeekSelectorspan3:hover,.notebookWeekSelectorspan4:hover,.notebookWeekSelectorspan5:hover{
    font-size: 14pt;
}
.notebookWeekSelectorh2{
    height: 8vh;
    width: 15vw;
    display: flex;
    background-color: #fff4c6;
    color: #c0944a;
    justify-content: center;
    align-items: center;
    grid-area: mltitle;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: normal;
}
.notebookWeekSelectorspan1,.notebookWeekSelectorspan2,.notebookWeekSelectorspan3,.notebookWeekSelectorspan4,.notebookWeekSelectorspan5{
    height: 5vh;
    align-self: baseline;
    width: 15vw;
    font-size: 12pt;
    color: #303030;
    display: flex;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 1px 0 #e1d097;
}
.notebookWeekSelectorspan1{
    grid-area: mlw1;
}
.notebookWeekSelectorspan2{
    grid-area: mlw2;
}
.notebookWeekSelectorspan3{
    grid-area: mlw3;
}
.notebookWeekSelectorspan4{
    grid-area: mlw4;
}
.notebookWeekSelectorspan5{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    grid-area: mlw5;
}

.notebookMonth input{
    display: none;
}
.notebookContent{
    height: 67vh;
    width: 68vw;
    transform: translateX(-3vw);
    transform-origin: left;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    grid-area: mcontent;
}
.notebookContentWeek{
    height: 67vh;
    width: 68vw;
    padding: 25px;
    box-sizing: border-box;
    position: absolute;
    display: none;
    opacity: 0;
    transition: opacity .5s linear;
}
.notebookContentWeek span{
    display: block;
    padding-top: 5%;
    font-size: 14pt;
    height: 80%;
    overflow-y: scroll;
}
.notebookContentWeek img{
    width: 60vw;
    height: auto;
}
/* 只需要默认第一个在最上方就行 */ 
input[name = "december"]:nth-of-type(1):checked ~.notebookContent #week51{
    opacity: 1;
    display: block;
}
input[name = "december"]:nth-of-type(2):checked ~.notebookContent #week52{
    opacity: 1;
    display: block;
}
input[name = "january"]:nth-of-type(1):checked ~.notebookContent #week1{
    opacity: 1;
    display: block;
}
input[name = "january"]:nth-of-type(2):checked ~.notebookContent #week2{
    opacity: 1;
    display: block;
}
input[name = "january"]:nth-of-type(3):checked ~.notebookContent #week3{
    opacity: 1;
    display: block;
}
input[name = "january"]:nth-of-type(4):checked ~.notebookContent #week4{
    opacity: 1;
    display: block;
}
input[name = "january"]:nth-of-type(5):checked ~.notebookContent #week5{
    opacity: 1;
    display: block;
}
input[name = "february"]:nth-of-type(1):checked ~.notebookContent #week6{
    opacity: 1;
    display: block;
}
input[name = "february"]:nth-of-type(2):checked ~.notebookContent #week7-8{
    opacity: 1;
    display: block;
}
input[name = "february"]:nth-of-type(3):checked ~.notebookContent #week9{
    opacity: 1;
    display: block;
}

input[name = "march"]:nth-of-type(1):checked ~.notebookContent #week10-11{
    opacity: 1;
    display: block;
}
input[name = "march"]:nth-of-type(2):checked ~.notebookContent #week12{
    opacity: 1;
    display: block;
}
input[name = "march"]:nth-of-type(3):checked ~.notebookContent #week13{
    opacity: 1;
    display: block;
}
input[name = "april"]:nth-of-type(1):checked ~.notebookContent #week14{
    opacity: 1;
    display: block;
}
input[name = "april"]:nth-of-type(2):checked ~.notebookContent #week15{
    opacity: 1;
    display: block;
}
input[name = "april"]:nth-of-type(3):checked ~.notebookContent #week16{
    opacity: 1;
    display: block;
}
input[name = "april"]:nth-of-type(4):checked ~.notebookContent #week17{
    opacity: 1;
    display: block;
}
input[name = "may"]:nth-of-type(1):checked ~.notebookContent #week18{
    opacity: 1;
    display: block;
}
input[name = "may"]:nth-of-type(2):checked ~.notebookContent #week19{
    opacity: 1;
    display: block;
}
input[name = "may"]:nth-of-type(3):checked ~.notebookContent #week20{
    opacity: 1;
    display: block;
}
input[name = "may"]:nth-of-type(4):checked ~.notebookContent #week21{
    opacity: 1;
    display: block;
}
input[name = "may"]:nth-of-type(5):checked ~.notebookContent #week22{
    opacity: 1;
    display: block;
}
input[name = "june"]:nth-of-type(1):checked ~.notebookContent #week23{
    opacity: 1;
    display: block;
}
input[name = "june"]:nth-of-type(2):checked ~.notebookContent #week24{
    opacity: 1;
    display: block;
}
input[name = "june"]:nth-of-type(3):checked ~.notebookContent #week25{
    opacity: 1;
    display: block;
}
input[name = "june"]:nth-of-type(4):checked ~.notebookContent #week26{
    opacity: 1;
    display: block;
}
input[name = "july"]:nth-of-type(1):checked ~.notebookContent #week27{
    opacity: 1;
    display: block;
}
input[name = "july"]:nth-of-type(2):checked ~.notebookContent #week28{
    opacity: 1;
    display: block;
}
input[name = "july"]:nth-of-type(3):checked ~.notebookContent #week29{
    opacity: 1;
    display: block;
}
input[name = "july"]:nth-of-type(4):checked ~.notebookContent #week30{
    opacity: 1;
    display: block;
}
input[name = "august"]:nth-of-type(1):checked ~.notebookContent #week31{
    opacity: 1;
    display: block;
}
input[name = "august"]:nth-of-type(2):checked ~.notebookContent #week32{
    opacity: 1;
    display: block;
}
input[name = "august"]:nth-of-type(3):checked ~.notebookContent #week33{
    opacity: 1;
    display: block;
}
input[name = "august"]:nth-of-type(4):checked ~.notebookContent #week34{
    opacity: 1;
    display: block;
}
input[name = "august"]:nth-of-type(5):checked ~.notebookContent #week35{
    opacity: 1;
    display: block;
}
input[name = "september"]:nth-of-type(1):checked ~.notebookContent #week36{
    opacity: 1;
    display: block;
}
input[name = "september"]:nth-of-type(2):checked ~.notebookContent #week37{
    opacity: 1;
    display: block;
}
input[name = "september"]:nth-of-type(3):checked ~.notebookContent #week38{
    opacity: 1;
    display: block;
}
input[name = "september"]:nth-of-type(4):checked ~.notebookContent #week39{
    opacity: 1;
    display: block;
}
input[name = "october"]:nth-of-type(1):checked ~.notebookContent #week40{
    opacity: 1;
    display: block;
}
input[name = "october"]:nth-of-type(2):checked ~.notebookContent #week41{
    opacity: 1;
    display: block;
}



/* buttons */
.monthbutton{
    background-color: #bcd0f5;
    /* color: #6c98e7; */
    color: #303030;
    width: 6vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    word-break: break-all;
}

@media screen and (max-width:900px) {
    .containerNotebook{
        grid-template-rows: 15vh 20vh 1fr;
    }
    .notebookCover{
        height: 180vh !important;
    }
    .notebookCover h1{
        width: 80vw;
        height: auto;
        font-size: 40pt;
    }
    .notebookCover h2{
        transform: translate(-25%,-50%);
    }
    .notebookMonth{
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 8vh 8vh 5vh 5vh 5vh 5vh 5vh 1vh 1fr;
        grid-template-areas: "mltblank"
        "mltitle"
        "mlw1"
        "mlw2"
        "mlw3"
        "mlw4"
        "mlw5"
        "mlbblank"
        "mcontent";
        transform: none;
    }
    .notebookWeekSelectorh2{
        height: 6vh;
        width: 75vw;
        align-self: flex-end;
        transform: none;
    }
    .notebookContent{
        transform: none;
    }
    .monthbutton{
        width: fit-content;
    }
    .notebookWeekSelectorspan1,.notebookWeekSelectorspan2,.notebookWeekSelectorspan3,.notebookWeekSelectorspan4,.notebookWeekSelectorspan5{
        width: 75vw;
        transform: none;
    }
    .notebookContent{
        margin-top: 10px;
        width: 80vw;
    }
}
@media screen and (min-width: 1825px) {
    .notebookWeekSelectorspan1,.notebookWeekSelectorspan2,.notebookWeekSelectorspan3,.notebookWeekSelectorspan4,.notebookWeekSelectorspan5{
        font-size: 15pt;
    }
    .notebookContentWeek span{
        font-size: 17pt;
    }
    .notebookWeekSelectorspan1:hover,.notebookWeekSelectorspan2:hover,.notebookWeekSelectorspan3:hover,.notebookWeekSelectorspan4:hover,.notebookWeekSelectorspan5:hover{
        font-size: 17pt;
    }
    #notebookBlank{
        font-size: 20pt;
    }
    .notebookCover h2{
        font-size: 20pt;
    }
    .notebookCover h1{
        font-size: 100pt;
    }
}