body {
    padding: 0;
    margin-left: 10%;
    margin-top: 5%;
    height: 80%;
    width: 80%;
    background-color: white;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 5fr;
    grid-template-areas:
            "month"
            "week"
            "body";
}

p {
    font-family: "Fredoka", sans-serif;
    font-size: 4.5vw;
    margin: 0;
    padding: 0;
}

.this_month {
    color: #764855;
}

.other_month {
    color: gray;
}

#month {
    grid-area: month;

    color: #764855;

    display: flex;
    justify-content: center;

    > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

#week {
    grid-area: week;

    background-color: #FFCFDA;
    color: #764855;

    display: flex;
    text-align: center;

    > div {
        flex-grow: 1;

        display: flex;
        flex-direction: row;
        justify-content: center;


        > p {
            flex-grow: 1;

            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}

#body {
    grid-area: body;

    display: flex;
    flex-direction: column;

    > div {
        flex-grow: 1;

        display: flex;
        flex-direction: row;
        justify-content: center;

        > div {
            flex-grow: 1;

            display: flex;
            flex-direction: row;
            justify-content: center;

            > p {
                width: 1vw;
                flex-grow: 1;

                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        }

    }
}

#today {
    color: #FCA7BB;
}