h4 {    
    font-weight: 900;
    color: #242424;
}

.calender-container { /* Flere kalendere på samme side skal stå vertikalt */
    display: flex;
    flex-direction: column;
    margin-top: -2%;
}

.month {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* .month baren skal være placeret til højre */
    align-items: center;
    padding-left: 12%;
    padding-right: 12%;
    margin-bottom: -32px; /* Logoet skal være ovenpå kalenderen, så margin under .month baren er blevet sat negativt */
    z-index: 2; /* Billedet/logoet skal være foran kalenderen */
}

.calender-logo {
    width: 90px;
}

.calender {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
    z-index: 1;
}

table {
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    border-collapse: separate; /* For at undgå at der blev to borders, dvs. at borderen blev meget tykkere end den skulle være, måtte jeg bruge separate her, da collapse ikke fungerede som jeg ville have det */ 
    border-spacing: 0; /* Og derefter border-spacing for at undgå at der blev plads mellem borderne og cellerne */
    
}

.calender p {
    font-family: "museo-slab-rounded", sans-serif; /* En undtagelse for p, som normalt bruges til brødtekst, og derfor er Neue Kabel */
    font-weight: 900;
    font-size: 14pt;
    padding-left: 3px;
}

tr {
    background-color: white;
}

th, td {
    font-family: "museo-slab-rounded", sans-serif;
    color: #242424;
    border: 1px solid #F3C846;
    width: 80px;
}

th {
    font-weight: 900;
    font-size: 18pt;
    text-align: center;
    background-color: white;
    height: 77px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

td {
    height: 140px;
    text-align: left;
    vertical-align: top;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.event-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-icon {
    width: 60px;
    padding-bottom: 10px;
}

.event-icon-container span { /* Span og p kunne også være byttet om, men det blev sådan her, så span bruges til minimal tekst i selv kalenderen */
    font-family: "neue kabel", sans-serif;
    font-weight: 400;
    font-size: 9pt;
    color: #242424;
    text-align: center;
}

/* Kalenderen har kun afrundet hjørne over til højre og nederst til venstre, og en 4px solid border hele vejen rundt */

.week-column {
    border-top: 2px solid #F3C846;
}

.week-column2 {
    border-top: 2px solid #F3C846;
    border-right: 2px solid #F3C846;
}

.day-column { 
    border-left: 2px solid #F3C846;
}

.day-column2 {
    border-left: 2px solid #F3C846;
    border-bottom: 2px solid #F3C846;
}

.day-column3 {
    border-right: 2px solid #F3C846;
}

.day-column4 {
    border-bottom: 2px solid #F3C846;
}

.calender-grey1 {
    background-color: #D9D9D9;
    border-left: 2px solid #F3C846;
}

.calender-grey2 {
    background-color: #D9D9D9;
    border-bottom: 2px solid #F3C846;
}

.calender-grey3 {
    background-color: #D9D9D9;
}

.topleft {
    border-radius: 77px 0 0 0; /* Kun den øverste venstre kant skal være rund */
    border-left: 2px solid #F3C846;
    border-top: 2px solid #F3C846;
}

.bottomright {
    border-radius: 0 0 77px 0; /* Kun den nederste højre kant skal være rund */
    border-right: 2px solid #F3C846;
    border-bottom: 2px solid #F3C846;
    background-color: #D9D9D9;
}

@media screen and (max-width: 1000px) { /* Kalenderen begyndte at se funky ud og meget presset ud, så der er tilføjet et ekstra breakpoint */
    .month {
        margin-bottom: -28px; /* Størrelsesforholdene har ændret sig lidt, så negativen skal være mindre */
    }
    
    .calender-logo {
        width: 80px;
    }

    .calender th {
        font-size: 15pt; /* Månedenavnene stak ud over TH, så fontstørrelsen er sat ned */
    }

    .calender td {
        height: 100px; /* Højden på cellerne er sat ned */
    }

    .event-icon {
        width: 45px;
    }

    .event-icon-container span {
        font-size: 8pt; /* Al tekststørrelse i kalenderen er også sat ned */
    }

    .topleft {
        border-radius: 55px 0 0 0; /* Kun den øverste venstre kant skal være rund, men mindre end ved fuld skærm */
        border-left: 2px solid #F3C846;
        border-top: 2px solid #F3C846;
    }
    
    .bottomright {
        border-radius: 0 0 55px 0; /* Kun den nederste højre kant skal være rund, men mindre end ved fuld skærm */
        border-right: 2px solid #F3C846;
        border-bottom: 2px solid #F3C846;
        background-color: #D9D9D9;
    }
}

@media screen and (max-width:768px) { /* Breakpoint vi blev bedt om at lave */
    .month {
        width: 100%;
        display: flex;
        padding-left: 4%; /* Da størrelsesforholdene igen har ændret sig, skal padding være mindre */
        padding-right: 4%;
        margin-bottom: -20px; /* Og det skal margin i negativen også */
    }

    .month h4 { /* Månedenavne skal være mindre i responsive */
        font-family: "museo-slab-rounded", sans-serif;
        font-weight: 900;
        font-size: 18pt;
        color: #242424;
    }
    
    .calender-logo {
        width: 60px;
    }

    .calender {
        width: 100%;
        display: flex;
    }

    .calender table {
        width: 100%;
        padding-left: 6%;
        padding-right: 6%;
    }

    .calender th { /* Ugenavnene skal være mindre i responsive */
        font-size: 13pt;
    }

    .calender td {
        height: 90px;
    }

    .calender p { /* Teksten i cellerne skal være mindre, i dette tilfælde dagenumrene */
        font-size: 10pt;
        padding-left: 3px;
    }

    .event-icon-container span { /* Teksten i cellerne skal være mindre, i dette tilfælde event-tekst */
        font-size: 7pt;
    }
    
    .event-icon {
        width: 30px;
    }

    .topleft {
        border-radius: 42px 0 0 0;
    }
    
    .bottomright {
        border-radius: 0 0 42px 0;
    }
}

@media screen and (max-width:500px) { /* Breakpointet var ikke nødvendigt, men fik lyst til at tilføje det alligevel */
    .calender th {
        font-size: 9pt;
        height: 35px;
    }
    
    .calender td {
        height: 50px;
    }

    .topleft {
        border-radius: 30px 0 0 0;
    }
    
    .bottomright {
        border-radius: 0 0 30px 0;
    }

    .event-icon {
        width: 15px;
    }
}