body {
    background-color: #101010;
    color: white;
}

.content {
    align-items: center;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

table {
    background-color: #202020;
    border: 2px solid white;
    border-collapse: collapse;
    cursor: default;
}

th, td {
    border: 1px solid white;
    margin: 0;
    padding: 2px;
    text-align: center;
}

td.empty {
    border: none;
}

td.lecture {
    background-color: #602020;
}

td.class {
    background-color: #204060;
}

th:hover {
    background-color: #604080;
}

td:hover {
    background-color: #403050;
}

td.lecture:hover, td.lecture.highlight {
    background-color: #a02020;
}

td.class:hover, td.class.highlight {
    background-color: 2060a0;
}

tr {
    height: 2em;
    transition: height 0.5s, background-color 0.5s;
}

tr:not(.header):hover, tr:has(td.highlight) {
    height: 3em;
    background-color: #302535;
    transition: height 0.5s, background-color 0.5s;
}

.location {
    opacity: 0%;
    font-size: 0em;
    transition: opacity 0.5s, font-size 0.5s;
}

td:hover span.location, td.highlight span.location {
    opacity: 100%;
    font-size: 0.8em;
    transition: opacity 0.5s, font-size 0.5s;
}

h2 button {
    vertical-align: text-top;
}

.dialogueBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #00000040;
}

.dialogue {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #202020;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #404040;
}

.hidden {
    display: none;
}

h2 {
    margin: 0px 0px 0.5em;
}