body {
    background-color: #222;
    overflow: hidden;
    font-family: Verdana;
}

.main-grid {
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-auto-flow: row;
    grid-gap: 5vh;
    width: 60vw;
}

    .main-grid > div {
        position: relative;
    }

    .main-grid > div > img {
        position: relative;
        width: 100%;
        height: auto;
        user-select: none;
        vertical-align: top;
    }

    .main-grid > audio {
        width: 100%;
        height: 5vh;
    }

.play-bar {
    position: absolute;
    height: 100%;
    top: 0;
    border-left: 2px solid red;
    transition: .1s;
    z-index: 2;
}

.switch-option {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-gap: .5vw;
    width: fit-content;
}

    .switch-option > div {
        display: flex;
    }

        .switch-option > div > div {
            color: white;
            margin: auto;
            white-space: nowrap;
            font-size: 1.2vw;
        }

.options-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    height: 7vh;
    padding-left: 2vw;
}

.options {
    display: grid;
    grid-auto-flow: column;
    column-gap: 1vw;
    width: fit-content;
}

    .options > div {
        margin: 1vh;
        height: 5vh;
        width: 5vh;
        display: flex;
        border-radius: .8vh;
        transition: .3s;
        cursor: pointer;
    }

        .options > div:hover {
            transform: scale(1.1);
        }

        .options > div > img {
            height: 90%;
            width: auto;
            margin: auto;
            filter: invert();
        }

.selected {
    background-color: #444;
}

.labels-section {
    position: absolute;
    top: 7vh;
    left: 0;
    width: 12vw;
    bottom: 0;
    background-color: black;
    overflow-y: auto;
}

.labels {
    display: grid;
    grid-auto-flow: row;
    row-gap: 2vh;
    padding: 5vh 1vw 5vh 1vw;
}

    .labels > div {
        color: white;
        white-space: nowrap;
    }

    .labels > label > input[type=text] {
        width: calc(94% - 1.2vw);
        outline: none;
        background-color: transparent;
        color: white;
        border: none;
        border-bottom: 1px solid white;
        font-size: 1.1vw;
        padding-right: 3%;
        position: absolute;
        top: 100%;
    }

.boxes-section {
    position: absolute;
    top: 7vh;
    left: 12vw;
    width: 12vw;
    bottom: 0;
    background-color: #111;
    overflow-y: auto;
}

.boxes {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    padding: 3vh 1vw 3vh 1vw;
}

    .boxes > div {
        position: relative;
        font-size: 1.1vw;
        color: white;
        white-space: nowrap;
        cursor: pointer;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 2vh;
        border-bottom: 1px solid white;
        transition: .3s;
    }

    .boxes > div > div {
        position: absolute;
        transition: .3s;
        opacity: 0;
        height: 4vh;
        line-height: 4vh;
        padding-left: 1vh;
        font-size: .9vw;
        color: #aaa;
        pointer-events: none;
    }

        .boxes > div > div:hover {
            color: white;
        }

.main-section {
    position: absolute;
    top: 7vh;
    left: 24vw;
    right: 0;
    bottom: 0;
}

.bounding-box {
    position: absolute;
    background-color: #aaa5;
    outline: 2px solid #aaa;
    transition: box-shadow .3s, outline .3s, opacity .3s, z-index .3s;
}














[data-color="-1"] {
    background-color: #aaa5;
    outline-color: #aaa;
    color: #aaa;
}

[data-color="0"] {
    background-color: #00f5;
    outline-color: #00f;
    color: #00f;
}

[data-color="1"] {
    background-color: #0f05;
    outline-color: #0f0;
    color: #0f0;
}

[data-color="2"] {
    background-color: #f005;
    outline-color: #f00;
    color: #f00;
}

[data-color="3"] {
    background-color: #f0f5;
    outline-color: #f0f;
    color: #f0f;
}

[data-color="4"] {
    background-color: #ff05;
    outline-color: #ff0;
    color: #ff0;
}

[data-color="5"] {
    background-color: #0ff5;
    outline-color: #0ff;
    color: #0ff;
}

[data-color="6"] {
    background-color: #88f5;
    outline-color: #88f;
    color: #88f;
}

[data-color="7"] {
    background-color: #8f85;
    outline-color: #8f8;
    color: #8f8;
}

[data-color="8"] {
    background-color: #f885;
    outline-color: #f88;
    color: #f88;
}








/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 3vw;
    height: 1.8vw;
    margin: auto;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.2vw;
        width: 1.2vw;
        left: .3vw;
        bottom: .3vw;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(1.2vw);
    -ms-transform: translateX(1.2vw);
    transform: translateX(1.2vw);
}



/* Customize the label (the container) */
.container {
    display: flex;
    position: relative;
    padding-left: 1.5vw;
    cursor: pointer;
    font-size: 1.1vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: white;
}

    /* Hide the browser's default radio button */
    .container input[type=radio] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.2vw;
    width: 1.2vw;
    background-color: #eee;
    border-radius: 50%;
    margin: auto;
}

/* On mouse-over, add a grey background color */
.container:hover input[type=radio] ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input[type=radio]:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input[type=radio]:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: .4vw;
    left: .4vw;
    width: .4vw;
    height: .4vw;
    border-radius: 50%;
    background: white;
}