.hidden {
    display: none !important;
}

.displayFlex {
    display: flex !important;
}

:root {
    --blue: #33beff;
    --white: white;
    --deviceColor: var(--blue);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#container-login {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

#login {
    user-select: none;
    -webkit-user-select: none;
    font-family: "Varela Round", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    background-color: var(--white);
    color: var(--blue);
    border: none;
    cursor: pointer;
    padding: 0.5em 1em;
    border-radius: 1em;

    &.clicked {
        background-color: color-mix(in srgb, var(--white) 95%, var(--blue));
    }
}

#container-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    & > * {
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
        flex: 1 1 0;
        font-family: "Varela Round", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 4em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (min-aspect-ratio: 1/1) {
        flex-direction: row;
    }
}

#open {
    background-color: var(--deviceColor);
    color: var(--white);
    cursor: pointer;

    &.clicked {
        background-color: color-mix(in srgb, var(--deviceColor) 80%, black);
    }
}

#close {
    background-color: var(--white);
    color: var(--deviceColor);
    cursor: pointer;

    &.clicked {
        background-color: color-mix(
            in srgb,
            var(--white) 70%,
            var(--deviceColor)
        );
    }
}

#status {
    position: absolute;
    top: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--white);
}

#devButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 20%;
}

#devStatus {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 4px;
    display: none; /* Changed to display: flex when #devButton is held. */
    align-content: flex-end;
    align-items: center;
    color: var(--blue);
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.1);
    }
    60%,
    100% {
        transform: scale(1);
    }
}

.heartbeat {
    animation: heartbeat 0.8s ease-in-out;
}

#clickGuard {
    /*TODO*/
}

#devices {
    padding: 12px;
    bottom: 8px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    border: 1px solid black;
    position: absolute;
    margin: 0 auto;
    border-radius: 32px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

#devices > * {
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

/* Icons */

.mynaui--panel-top-close-solid {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.367 2.25h5.266c1.092 0 1.958 0 2.655.057c.714.058 1.317.18 1.869.46a4.75 4.75 0 0 1 2.075 2.077c.281.55.403 1.154.461 1.868c.057.697.057 1.563.057 2.655v5.266c0 1.092 0 1.958-.057 2.655c-.058.714-.18 1.317-.46 1.869a4.75 4.75 0 0 1-2.076 2.075c-.552.281-1.155.403-1.869.461c-.697.057-1.563.057-2.655.057H9.367c-1.092 0-1.958 0-2.655-.057c-.714-.058-1.317-.18-1.868-.46a4.75 4.75 0 0 1-2.076-2.076c-.281-.552-.403-1.155-.461-1.869c-.057-.697-.057-1.563-.057-2.655V9.367c0-1.092 0-1.958.057-2.655c.058-.714.18-1.317.46-1.868a4.75 4.75 0 0 1 2.077-2.076c.55-.281 1.154-.403 1.868-.461c.697-.057 1.563-.057 2.655-.057M6.834 3.802c-.62.05-1.005.147-1.31.302a3.25 3.25 0 0 0-1.42 1.42c-.155.305-.251.69-.302 1.31c-.032.392-.044.851-.05 1.416h16.495a20 20 0 0 0-.049-1.416c-.05-.62-.147-1.005-.302-1.31a3.25 3.25 0 0 0-1.42-1.42c-.305-.155-.69-.251-1.31-.302c-.63-.051-1.434-.052-2.566-.052H9.4c-1.132 0-1.937 0-2.566.052m4.636 8.668l-3 3a.75.75 0 1 0 1.06 1.06L12 14.06l2.47 2.47a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mynaui--panel-top-open-solid {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.367 2.25c-1.092 0-1.958 0-2.655.057c-.714.058-1.317.18-1.868.46a4.75 4.75 0 0 0-2.076 2.077c-.281.55-.403 1.154-.461 1.868c-.057.697-.057 1.563-.057 2.655v5.266c0 1.092 0 1.958.057 2.655c.058.714.18 1.317.46 1.869a4.75 4.75 0 0 0 2.077 2.075c.55.281 1.154.403 1.868.461c.697.057 1.563.057 2.655.057h5.266c1.092 0 1.958 0 2.655-.057c.714-.058 1.317-.18 1.869-.46a4.75 4.75 0 0 0 2.075-2.076c.281-.552.403-1.155.461-1.869c.057-.697.057-1.563.057-2.655V9.367c0-1.092 0-1.958-.057-2.655c-.058-.714-.18-1.317-.46-1.868a4.75 4.75 0 0 0-2.076-2.076c-.552-.281-1.155-.403-1.869-.461c-.697-.057-1.563-.057-2.655-.057zM6.834 3.802c.63-.051 1.434-.052 2.566-.052h5.2c1.133 0 1.937 0 2.566.052c.62.05 1.005.147 1.31.302a3.25 3.25 0 0 1 1.42 1.42c.155.305.251.69.302 1.31c.032.392.044.851.05 1.416H3.752c.005-.565.017-1.024.049-1.416c.05-.62.147-1.005.302-1.31a3.25 3.25 0 0 1 1.42-1.42c.305-.155.69-.251 1.31-.302M8.47 13.47a.75.75 0 0 1 1.06 0L12 15.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fluent--live-24-filled {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.343 4.938a1 1 0 0 1 0 1.415a8.003 8.003 0 0 0 0 11.317a1 1 0 1 1-1.414 1.414c-3.907-3.906-3.907-10.24 0-14.146a1 1 0 0 1 1.414 0m12.732 0c3.906 3.907 3.906 10.24 0 14.146a1 1 0 0 1-1.415-1.414a8.003 8.003 0 0 0 0-11.317a1 1 0 0 1 1.415-1.415M9.31 7.812a1 1 0 0 1 0 1.414a3.92 3.92 0 0 0 0 5.544a1 1 0 1 1-1.415 1.414a5.92 5.92 0 0 1 0-8.372a1 1 0 0 1 1.415 0m6.958 0a5.92 5.92 0 0 1 0 8.372a1 1 0 0 1-1.414-1.414a3.92 3.92 0 0 0 0-5.544a1 1 0 0 1 1.414-1.414m-4.186 2.77a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fluent--live-off-24-filled {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.28 2.22a.75.75 0 1 0-1.06 1.06l2.203 2.203c-3.393 3.93-3.224 9.872.506 13.602a1 1 0 0 0 1.414-1.415a8.004 8.004 0 0 1-.501-10.768l1.52 1.52a5.92 5.92 0 0 0 .533 7.763A1 1 0 0 0 9.31 14.77a3.92 3.92 0 0 1-.513-4.913l1.835 1.836a1.503 1.503 0 0 0 1.45 1.889q.201 0 .388-.051l8.25 8.25a.75.75 0 1 0 1.06-1.061zm15.748 13.626l1.462 1.462c2.414-3.861 1.942-9.012-1.415-12.37a1 1 0 1 0-1.415 1.415a8.01 8.01 0 0 1 1.368 9.493m-3.098-3.098l1.591 1.591a5.92 5.92 0 0 0-1.253-6.527a1 1 0 1 0-1.414 1.414a3.92 3.92 0 0 1 1.076 3.522'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}