LED-web/css/spotlight.css

#spotlightContainer {
    display: grid;
    grid-row: 2/-1;
    grid-column: 2/-1;
    margin: 10px 10px;
    height: 100%;

    grid-template-rows: 10vh auto 10vh;
    grid-template-columns: 1fr 30vw;
}

#spotlightContainer h2 {
    grid-column: 1/-1;
    grid-row: 1/2;

    color: white;
    font-size: 50px;
    align-self: center;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

#shelfButtonContainer {
    grid-row: 2/3;
    grid-column: 1/2;

    display: grid;
    grid-template-columns: repeat(3, calc(26vh));
    grid-template-rows: 0 0.5fr 1fr 1fr 0.5fr;

    justify-content: center;
}

#b0 {
    grid-column: 1/2;
    grid-row: 5/6;
    border: none;
}
#b1 {
    grid-column: 1/2;
    grid-row: 4/5;
    border: #a8a9b4 solid 3px;
}
#b2 {
    grid-column: 1/2;
    grid-row: 3/4;
    border: #a8a9b4 solid 3px;
}
#b3 {
    grid-column: 1/2;
    grid-row: 2/3;
    border: none;
}
#b4 {
    grid-column: 2/3;
    grid-row: 5/6;
    border: none;
}
#b5 {
    grid-column: 2/3;
    grid-row: 4/5;
    border: #a8a9b4 solid 3px;
}
#b6 {
    grid-column: 2/3;
    grid-row: 3/4;
    border: none;
}
#b7 {
    grid-column: 3/4;
    grid-row: 5/6;
    border: none;
}
#b8 {
    grid-column: 3/4;
    grid-row: 4/5;
    border: #a8a9b4 solid 3px;
}
#b9 {
    grid-column: 3/4;
    grid-row: 3/4;
    border: none;
}

#makeCluster {
    grid-row: 1/2;
    grid-column: 3/4;
    border: none;
    padding: 10px;
    height: min-content;
    font-size: 1.5vw;
    color: white;
    background-color: #252531;
    border-radius: 10px;
}

#makeCluster:hover {
    background-color: #2f2f3d;
}

.shelfButton {
    background-color: #2c2c36;
    font-size: 1.5vw;
    color: white;
    font-family: 'Raleway', sans-serif;
}

.shelfButton:hover {
    background-color: #2f2f3d;
    border-radius: 10px;
}

.selected {
    background-color: #a8a9b4 !important;
    margin: 5px;
    border-radius: 10px;
}


#spotlightSettingsContainer {
    background-color: #252531;
    grid-column: -2/-1;
    grid-row: 2/-2;
    margin-left: 2vw;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 10vh 1fr 1fr 1fr 1fr 1fr auto;
    grid-gap: 1vw;
    padding: 0 1vw;
}

.var1Input {
    grid-row: 4/5;
    grid-column: 1/2;
}

.var2Input {
    grid-row: 4/5;
    grid-column: 2/3;
}

.var3Input {
    grid-row: 5/6;
    grid-column: 1/2;
}

.var4Input {
    grid-row: 5/6;
    grid-column: 2/3;
}

.speedInput {
    grid-row: 6/7;
    grid-column: 1/2;
}

#spotlightAnimations {
    grid-row: 3/4;
    grid-column: 1/3;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 0.2vw;
}

#spotlightSettingsContainer input {
    height: 20%;
    margin-top: auto;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#spotlightSettingsContainer p {
    color: white;
    font-size: 1.5vw;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    margin: auto;
}

#spotlightSettingsContainer button {
    background-color: #1b1b26;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.5vw;
    font-family: 'Raleway', sans-serif;
}

#spotlightSettingsContainer button:hover {
    background-color: #2f2f3d;
}

#deleteCluster {
    grid-column: 2/3;
    grid-row: 6/7;
    height: min-content;
    width: min-content;
    padding: 10px;
    background-color: #ff4b48 !important;
    margin-left: auto;
    margin-top: auto;
}

#deleteCluster:hover {
    background-color: #ff6e6b !important;
}

.material-symbols-outlined {
    font-size: 40px !important;
     font-variation-settings:
             'FILL' 0,
             'wght' 400,
             'GRAD' 0,
             'opsz' 48
}

#clusters {
    grid-column: 1/-1;
    grid-row: 7/8;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 0.2vw;
}