* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; overflow: hidden; }

body { position: relative; color: var(--main-text-color); font-family: monospace; }

.interface { position: absolute; width: 48px; height: 48px; padding: 4px; background-color: var(--main-bg-color); border-radius: 2px; user-select: none; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }

.interface-button > * { width: 100%; height: 100%; padding: 6px; cursor: pointer; fill: var(--main-text-color); }
.interface-button > * * { width: 100%; height: 100%; }

.interface-button:active { animation: 100ms linear alternate wriggle; background-color: var(--secondary-bg-color);  }


.interface-border-all { border: 1px solid var(--main-bg-color);; }

/* width of 320px minus the margins (8px) */
#interface-bg-top { left: calc( 50vw - (160px - 8px) ); top: 8px; width: calc( 320px - (8px * 2) ); height: calc( 48px + (8px * 2) ); background-color: var(--secondary-bg-color); }

#interface-name { left: calc( 50vw - 144px ); top: calc( 16px ); width: 176px; justify-content: flex-start; white-space: nowrap; padding-left: 6px; font-size: 1.5em; }
#interface-info { right: calc( 50vw - ((160px - 8px) - (48px + 16px)) ); top: calc( 16px ); }
#interface-list { right: calc( 50vw - 144px ); top: calc( 16px ); }

#interface-left { left: calc( 50vw - (160px - 64px) ); bottom: 16px; }
#interface-right { right: calc( 50vw - (160px - 64px) ); bottom: 16px; }

#interface-pause { left: calc( 50vw - (48px / 2) ); bottom: 16px; }
#interface-pause.toggle { background-color: var(--main-text-color); border-color: var(--main-bg-color); }
#interface-pause.toggle svg { transform: rotateY( 180deg ); fill: var(--main-bg-color); }

@keyframes wriggle {
    0% { transform: rotateZ( 0deg ); }
    33% { transform: rotateZ( 5.625deg ); }
    66% { transform: rotateZ( -5.625deg ); }
    100% { transform: rotateZ( 0deg ); }
}

@media screen and ( min-width: 940px ) {
    
    
    .interface-border-tablet { border: 1px solid var(--main-bg-color);; }
    
    #interface-bg-top { left: calc( 50vw - (470px - 8px) ); width: calc( 470px - (8px * 2) ); }
    
    #interface-name { left: calc( 50vw - (470px - 16px) ); width: calc( 470px - (16px * 2) ); }
    #interface-info { right: calc( 50vw - ((470px - 8px) - (48px + 16px)) ); }
    #interface-list { right: calc( 50vw - (470px - 16px) ); }
    
    #interface-left { left: calc( 50vw - (240px - 64px) ); }
    #interface-right { right: calc( 50vw - (240px - 64px) ); }
        
}

@media screen and ( min-height: 960px ) {
    
    #interface-bg-top { top: calc( 50vh - (470px - (32px - 8px))); }
    #interface-name { top: calc( 50vh - (470px - 32px)); }
    #interface-info { top: calc( 50vh - (470px - 32px)); }
    #interface-list { top: calc( 50vh - (470px - 32px)); }
    
    #interface-left { bottom: calc( 50vh - (470px - 32px)); }
    #interface-right { bottom: calc( 50vh - (470px - 32px)); }
    
    #interface-pause { bottom: calc( 50vh - (470px - 32px)); }
    
}