@font-face {
    font-family: 'ChicagoFLF';
    src: url('../fonts/ChicagoFLF.ttf') format('truetype');
}

:root {
    --right-pane-width: 350px;
    --bottom-right-pane-height: 250px;
    --bottom-pane-width: 380px;
    --bottom-pane-height: 150px;
    --window-margin: 1rem;
    --demo-height: 2.5rem;
}

body {
    background: black;
    overflow: hidden;
    user-select: none;
}

body, button, input, select {
    font-family: 'ChicagoFLF';
    font-size: 12px
}

main {
    background: url('../images/backgrounds/bg44.png');
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 900px;
    height: 675px;
    
    margin: auto;
    border-radius: 1rem;
    overflow: hidden;
}

#demo {
    background: url(../images/backgrounds/bg.png), blue;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--demo-height);

    font-size: 16px;
    color: white;
    text-transform: uppercase;
}

#viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url('../images/backgrounds/bg.png'), linear-gradient(0deg, #00B3B3 10%, #1AFFFF 100%);
}

#mini-viewport {
    background: url('../images/backgrounds/bg3.png');
    box-shadow: 4px 4px #000000;
    position: absolute;
    
    bottom: 16px;
    right: 16px;
}

#mini-viewport > canvas {
    display: block;
}

#mid-pane {
    position: absolute;
    top: calc(0.5rem + var(--demo-height));
    left: var(--window-margin);
    bottom: calc(var(--bottom-pane-height) + 2 * var(--window-margin));
    right: calc(var(--right-pane-width) + 2 * var(--window-margin));
}

#top-right-pane {
    position: absolute;
    
    top: calc(0.5rem + var(--demo-height));
    right: var(--window-margin);
    bottom: calc(var(--bottom-right-pane-height) + 2 * var(--window-margin));
    width: var(--right-pane-width);
}

#bottom-right-pane {
    position: absolute;
    
    right: var(--window-margin);
    bottom: var(--window-margin);
    width: var(--right-pane-width);
    height: var(--bottom-right-pane-height);
}

#bottom-pane {
    position: absolute;

    left: var(--window-margin);
    right: calc(var(--right-pane-width) + 2 * var(--window-margin));
    bottom: var(--window-margin);
    height: var(--bottom-pane-height);
}

#right-pane > ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#right-pane > ul > li {
    text-align: right;
    margin-bottom: 1rem;
}

.hidden {
    display: none;
}