index.css

html,
body {
    width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #faf7f7;
    position: relative;
}

footer.footer {
    background: #ebe8e8;
}

.columns.main {
    margin: 0 5%;
}

#canvas {
    display: none;
}

#canvas-clone {
    width: 100%;
    border: 3px dashed #888;
}

@media screen and (min-width: 769px), print {
    .canvas-column {
        position: sticky;
        top: 1rem;
    }
}

.class-card > .card-content {
    display: block;
}

.class-card .closed-icon {
    display: none;
}

.class-card .open-icon {
    display: inline-flex;
}

.class-card.is-closed > .card-content {
    display: none;
}

.class-card.is-closed .closed-icon {
    display: inline-flex;
}

.class-card.is-closed .open-icon {
    display: none;
}

.class-card .card-header {
    cursor: pointer;
}

.class-card.dummy {
    display: none;
}

.divider {
    width: 90%;
    background: #ccc;
    height: 1px;
    margin: 1.5rem 5%;
}