body {
    text-align      : center;
    background-color: #404040;
    margin          : 0;
}

.row,
.row-5,
.row-6,
.row-last {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size  : 1.5rem;
}

.main {
    border          : none;
    width           : 40%;
    margin          : 0 auto;
    background-color: white;
}

header {
    align-items        : center;
    text-align         : center;
    padding-bottom     : 1rem;
    /* background-color: orange; */
    width              : auto;
    border             : none;
}

.year-header {
    font-size: 28px;
    margin   : 0 auto;
    width    : auto;
}

.month-header {
    font-size: 40px;
    margin   : 0 auto;
    width    : auto;
}

h1 {
    padding-top  : 3rem;
    margin-top   : 0;
    margin-bottom: 1rem;
    font-family  : "Kreon", Arial, Helvetica, sans-serif;
    font-weight  : 600;
    font-size    : 5rem;
}

h2 {
    margin        : 0;
    font-family   : "Roboto", Arial, Helvetica, sans-serif;
    font-weight   : 500;
    font-size     : 2.5rem;
    padding-bottom: 1rem;

}

.number-button {
    min-height        : 40px;
    min-width         : 40px;
    display           : inline-block;
    padding           : 15px 15px;
    font-size         : 20px;
    /* text-align     : center; */
    align-items       : center;
    /* Center vertically */
    justify-content   : center;
    /* Center horizontally */
    text-decoration   : none;
    border            : 2px solid #828282;
    border-radius     : 100%;
    color             : #828282;
    cursor            : pointer;
    transition        : background-color 0.3s ease;
    margin            : 1.5%;
}

.number-button:hover {
    background-color: #D9D9D9;
    color           : #fff;
}

.number-button-row-5,
.number-button-row-6,
.number-button-row-7 {
    min-height        : 40px;
    min-width         : 40px;
    display           : inline-block;
    padding           : 15px 15px;
    font-size         : 20px;
    /* text-align     : center; */
    align-items       : center;
    /* Center vertically */
    justify-content   : center;
    /* Center horizontally */
    text-decoration   : none;
    border            : 2px solid #D9D9D9;
    border-radius     : 100%;
    color             : #828282;
    cursor            : pointer;
    background-color  : #D9D9D9;
    transition        : background-color 0.3s ease;
    margin            : 1.5%;
}


/* Makes pop up invisible to begin with */
.popup-new-submission {
    visibility         : hidden;
    width              : 36%;
    height             : auto;
    z-index            : 100;
    background-color   : #EDEDED;
    position           : absolute;
    top                : 50%;
    left               : 50%;
    transform          : translate(-50%, -50%);
    margin-top         : 100px;
    padding-top        : 1rem;
    padding-bottom     : 4rem;
    /* border             : 3px solid #D9D9D9; */
    border-radius      : 4px;
    /* border-width    : 7px; */
    font-family        : "Inter", Arial, Helvetica, sans-serif;
}

h3 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size  : 3rem;
}

.calendar {
    border     : none;
    padding-top: 10px;
    width      : auto;
    margin     : 0 auto;
}

#export-to-csv {
    padding-top   : 5rem;
    padding-bottom: 5rem;
}

.popup-mood-rating-fieldset,
.popup-impact-fieldset,
.popup-journal-fieldset {
    border-style  : none;
    padding-bottom: 2rem;
    font-size     : 20px;
}

legend {
    font-size  : 24px;
    font-weight: 500;
}

textarea {
    width           : 100%;
    height          : 150px;
    padding         : 12px 20px;
    box-sizing      : border-box;
    border          : 2px solid white;
    border-radius   : 4px;
    background-color: white;
    font-size       : 16px;
    resize          : none;
}

.popup-cancel-button {
    background-color: white;
    border-radius: 4px;
    font-size: 20px;
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.popup-submit-button {
    background-color: #177FF5;
    border-radius: 4px;
    border-color: #177FF5;
    color: white;
    font-size: 20px;
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
}