body {
    font-family: "Noto Sans", "Helvetica Neue", "Helvetica", sans-serif;
    background-color: rgb(88, 90, 93);
}

#main-container {
    width: 60%;
    margin: auto;
    height: 100vh;
}

@media screen and (max-width: 1500px) {
    #main-container {
        width: 80%;
        margin: auto
    }
}

@media screen and (max-width: 1120px) {
    #main-container {
        width: 95%;
        margin: auto
    }
}



.layer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.layer-contents {
    display: flex;
    column-gap: 8pt;
    padding: 12pt 8pt;
    width: 300pt;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

.layer-controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.layer-contents input[type=range] {
    width: 48pt;
}