@font-face {
    src: url("./assets/ibmplexsans-regular.woff2") format("woff2");
    font-family: "IBM Plex Sans";
}

@font-face {
    src: url("./assets/ibmplexsans-bold.woff2") format("woff2");
    font-family: "IBM Plex Sans";
    font-weight: bold;
}

:root {
    --citd-bg: #282c34;
    --citd-fg: #fff;
    --citd-button-bg: #c77b20;
    --citd-button-fg: #fff;
    --citd-name-bg: #b71540;
    --citd-name-fg: #fff;
    --citd-popover-bg: rgba(255, 255, 255, 0.3);
    --citd-popover-fg: #fff;
    --citd-instructions-bg: rgba(204, 204, 204, 0.7);
    --citd-instructions-fg: #000;
}

html,
body,
button {
    background: var(--citd-bg);
    font-family: 'IBM Plex Sans', sans-serif;
}

label {
    color: var(--citd-fg);
}

#bottom-buttons {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.bottom-right-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.backdrop {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0.1;
    filter: drop-shadow(2px 4px 6px black);
    width: 20%;
    pointer-events: none;
}