:root {
    --border-radius: .5rem;
}

html{
    width: fit-content;
    font-family: 'Courier New', Courier, monospace;
}

body {
    margin: 0;
    padding: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: auto;
    background: cornsilk;
}

#year-grid {
    box-sizing: border-box;
    padding: 1rem;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(36, minmax(3rem, 1fr));
    grid-template-rows: 3rem repeat(12, minmax(5rem, min-content));
    gap: .5rem;
}
@media screen and (min-width: 1920px) {
    #year-grid { width: 100%; }
}

#weekday-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(36, minmax(3rem, 1fr));
    grid-template-rows: 3rem 1fr;
    gap: .5rem;
    grid-column: 1 / span 36;
    grid-row: 1 / span 13;
}
#day-labels {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(36, minmax(3rem, 1fr));
    gap: .5rem;
    grid-column: 1 / span 36;
    grid-row: 1;
}
.day-label {
    width: 100%;
    text-align: center;
}

.weekday {
    margin: 0;
    padding: .5rem;
    background: #eee;
    border-radius: var(--border-radius);
}
.weekend { 
    background: #ccc;
}

.month-grid {
    box-sizing: border-box;
    padding: .5rem;
    min-height: 100%;
    height: fit-content;
    display: grid;
    gap: .5rem;
    z-index: 1;
    border: black solid 2px;
    border-radius: var(--border-radius);
}
.month-label {
    margin: .5rem auto;
    padding: .2rem;
    width: 4rem;
    height: fit-content;
    text-align: center;
    grid-column: 1;
    z-index: 100;
    background: #eee;
    border-radius: var(--border-radius);
}

#dec, #jan, #feb { background: rgba(224, 255, 255, 0.5); }
#mar, #apr, #may { background: rgba(250, 250, 210, 0.5); }
#jun, #jul, #aug { background: rgba(255, 160, 122, 0.5); }
#sep, #oct, #nov { background: rgba(211, 211, 211, 0.5); }

#jan-label { grid-row: 2; }
#jan { 
    grid-row-start: 2;
    grid-column: 3 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#feb-label { grid-row: 3; }
#feb {
    grid-row-start: 3;
    grid-column: 6 / span 28;
    grid-template-columns: repeat(28, minmax(0, 1fr));
}
#mar-label { grid-row: 4; }
#mar {
    grid-row-start: 4;
    grid-column: 6 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#apr-label { grid-row: 5; }
#apr {
    grid-row-start: 5;
    grid-column: 2 / span 30;
    grid-template-columns: repeat(30, minmax(0, 1fr));
}
#may-label { grid-row: 6; }
#may {
    grid-row-start: 6;
    grid-column: 4 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#jun-label { grid-row: 7; }
#jun {
    grid-row-start: 7;
    grid-column: 7 / span 30;
    grid-template-columns: repeat(30, minmax(0, 1fr));
}
#jul-label { grid-row: 8; }
#jul {
    grid-row-start: 8;
    grid-column: 2 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#aug-label { grid-row: 9; }
#aug {
    grid-row-start: 9;
    grid-column: 5 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#sep-label { grid-row: 10; }
#sep {
    grid-row-start: 10;
    grid-column: 1 / span 30;
    grid-template-columns: repeat(30, minmax(0, 1fr));
}
#oct-label { grid-row: 11; }
#oct {
    grid-row-start: 11;
    grid-column: 3 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}
#nov-label { grid-row: 12; }
#nov {
    grid-row-start: 12;
    grid-column: 6 / span 30;
    grid-template-columns: repeat(30, minmax(0, 1fr));
}
#dec-label { grid-row: 13; }
#dec {
    grid-row-start: 13;
    grid-column: 1 / span 31;
    grid-template-columns: repeat(31, minmax(0, 1fr));
}

.white {
    background-color: white;
    grid-row: 1;
}
.green {
    background-color: palegreen;
    grid-row: 2;
}
.blue {
    background: lightskyblue;
    grid-row: 2;
}
.yellow {
    background: yellow;
    grid-row: 3;
}
.orange {
    background: orange;
    grid-row: 4;
}

.event {
    display: inline;
    padding: .5rem;
    height: fit-content;
    transition: height 2s;
    z-index: 10;
    border: lightslategray solid 1px;
    border-radius: var(--border-radius);
}
.event:hover { cursor: pointer; }
.event-title {
    margin: 0;
    padding-right: .2rem;
    width: fit-content;
    max-width: max(200px, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: inherit;
    border-radius: var(--border-radius);
}
.event-desc { 
    margin: 0;
    padding: .2rem .2rem .2rem 0;
    display: none;
    width: clamp(400px, 90vw, 100%);
    background: inherit;
    border-radius: var(--border-radius);
}
.event-desc span {
    display: block;
    font-weight: bold;
}
.event-date::before { content: '📅 '; }
.event-location::before { content: '📍 '; }
.event-leute::before { content: '👤 '; }
.event-help::before { content: 'ℹ️ '; }

.unfolded { z-index: 20 !important; }
.unfolded .event-title {
    min-width: min(400px, 90vw);
    white-space: unset;
}
.unfolded .event-desc { display: block; }

.month-end {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.month-start {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#info-container {
    padding: 1rem;
}

.container {
    padding: 0 1rem;
    border: solid 2px black;
    border-radius: 8px;
}