@font-face {
    font-family: "San Fransisco";
    src: url("Fonts/SF-Pro-Display-Regular.otf");
}

@font-face {
    font-family: "San Fransisco Mono";
    src: url("Fonts/SFMono-Regular.otf");
}

* {
    font-family: "San Fransisco", inter;
}

body {
    background-color: #000000;
    overflow: hidden;
}

svg {
    width: 32px;
    height: 32px;
    stroke: #ffffff;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: none;
}

.button:has(> :not(.removed) ~ :not(.removed)) {
    padding: 8px 12px;
    gap: 12px;
}

#controls {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    z-index: 10;
    height: calc(100dvh - 64px);
    width: calc(100dvw - 64px);
    transition: all 0.25s ease-in-out;
}

#left,
#center,
#right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panels {
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
    width: 100dvw;
    height: 100dvh;

    justify-content: center;
    gap: 16px;
}

#leftPanel,
#rightPanel {
    /* width: 40vw;
  height: 35vw; */
    position: relative;

    /* outline: 1px solid #fff;
  border-radius: 32px;
  overflow: visible; */

    width: calc((100dvw - (64px + 16px)) / 2);
    height: calc(100dvh - 64px);
}

@media (orientation: portrait) {
    .panels {
        flex-direction: column;
    }

    #leftPanel,
    #rightPanel {
        /* width: 35vh;
    height: 40vh; */

        width: calc(100dvw - 64px);
        height: calc((100dvh - (64px + 16px)) / 2);
    }
}