:root {
    --bg: #420084;
    --day: #8000ff;
    --text: #d7d4cc;
    --today: #a74eff;
    --bg2: #5836a0;
    --event-1: #6d01da;
    --event-2: #6d01da;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 350;
    src: url(./SourceSans3-VariableFont_wght.ttf) format('truetype');
}

body, table, tbody, thead, th, tr, p {
    font-family:'Source Sans 3', sans-serif;
    color: var(--text);
    align-items: center;
}

#rules {
    background: #8000ff99;
    padding: 6px 22px;
    min-height: auto;
    flex: auto;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding: 2rem 1rem;
}

.calendar-wrapper {
    width: 100%;
    max-width: 900px;
    display: flex;
}

.week {
    display: flex;
    flex-direction: row;
    width: 80vw;
    align-items: stretch;
}

#today {
    --text: var(--text);
    background: var(--today);
    color: var(--text);
}
/* 
#today:hover {
    --text: var(--text);
    background: #a74effbb;
    color: var(--text);
} */

.day {
    flex: 1;
    background: var(--day);
    border-radius: 6px;
    margin: 3px;
    padding: 3px;
    min-height: 5vh;
}

.event {
    border-left: var(--text) solid 3px;
    padding: 3px;
    margin: 3px;
}

.day:hover:not(#rules) {
    color: white;
    filter: brightness(1.5);
    /* text-shadow: 3px 3px 1px var(--bg); */
}

.month-9 {
    background: var(--event-1);
}

.month-11 {
    background: var(--event-2);
}

a {
    color: var(--today);
    filter: brightness(1.2);
}

a:hover {
    filter: brightness(1.4);
}

a:active {
    filter: brightness(1.6);
}