layout.css

html {
    font-family:'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif';
    overscroll-behavior: none;
    overflow: auto;
    height: 100svh;
}

body {
    background-color: #1A1A1A;
    margin: 0px;
    height: 100svh;
    overscroll-behavior: none;
    overflow: auto;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.2svh;
}

.upper-half {
    display: flex;
    height: 37svh;
    width: 96svw;
    margin: 2svh 2svw;
}

.lower-half {
    display: flex;
    height: 57svh;
    width: 96svw;
    margin: 2svh 2svw;
}

.upper-left {
    height: 37svh;
    width: 48svw;
    margin-right: 1svw;
}

.upper-middle {
    height: 37svh;
    width: 35svw;
    margin-right: 1svw;
}

.upper-right {
    display: flex;
    height: 37svh;
    width: 13svw;
}

.lower-left {
    display: flex;
    height: 57svh;
    width: 80svw;
    margin-right: 1svw;
}

.lower-right {
    height: 57svh;
    width: 16svw;
}

.panel {
    background-color: #2C2829;
    border-radius: 1svh;
    padding: 1svh;
}

.panel-head {
    height: 7svh;
    flex-grow: 1;
    margin-bottom: 1svh;
    margin-right: 1svh;
    color: white;
    text-align: center;
    align-content: center;
}

.panel-usb {
    height: 7svh;
    width: 6svw;
    margin-bottom: 1svh;
}

.panel-preamp {
    height: 14svh;
    width: 14svw;
    margin-bottom: 1svh;
    margin-right: 1svh;
}

.panel-gate {
    height: 14svh;
    flex-grow: 1;
    margin-right: 1svh;
}

.panel-dynamics {
    height: 14svh;
    flex-grow: 1;
    margin-bottom: 1svh;
    margin-right: 1svh;
}

.panel-eq {
    height: 29svh;
    flex-grow: 1;
    margin-right: 1svh;
}

.panel-bus-sends {
    height: 29svh;
    width: 9svw;
    margin-right: 1svh;
}

.panel-main-bus {
    height: 29svh;
    width: 6svw;
}

.screen {
    background-color: #2C2829;
    border-radius: 2svh;
}

.panel-monitor {
    flex-grow: 1;
    margin-right: 1svh;
}

.panel-talkback {
    flex-grow: 1;
}

.panel-channel-control {
    flex-grow: 1;
    margin-right: 1svh;
}

.channel {
    flex-grow: 1;
    margin: 0.35svh 0.2svh;
    outline: #2C2829 solid 0.35svh;
}

.panel-sends-control {
    flex-grow: 1;
    margin-left: 1svw;
    margin-right: 1svh;
}

.channel-main {
    flex-grow: 1;
    margin-left: 1svw;
}

.panel-scenes {
    height: 7svh;
    width: 16svw;
    margin-bottom: 1svh;
}

.panel-assign {
    height: 30svh;
    width: 16svw;
    margin-bottom: 1svh;
}

.panel-mute-groups {
    height: 18svh;
    width: 7svw;
}