*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:#fff;
    font-family:Consolas, monospace;

    width:100vw;
    height:100vh;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* STARFIELD */

#stars{
    position:fixed;
    inset:0;
    z-index:0;
}

/* APP */

.bg{
    position:relative;
    z-index:10;

    width:min(1000px,90vw);

    background:rgba(25,25,25,.75);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 10px 40px rgba(0,0,0,.5);
}

.top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:16px 20px;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.icon-cont{
    display:flex;
    gap:8px;
}

.icon{
    width:14px;
    height:14px;
    border-radius:50%;
}

#red{
    background:#FF605C;
}

#yellow{
    background:#FFBD44;
}

#green{
    background:#00CA4E;
}

.brand{
    color:#aaa;
    font-size:15px;
}

.stats{

    display:flex;
    gap:20px;

    font-size:14px;
    color:#ddd;
}

#text-display{

    padding:40px;

    font-size:36px;

    line-height:1.8;

    min-height:260px;

    user-select:none;

    word-wrap:break-word;
}

.correct{
    color:white;
}

.incorrect{
    color:#ff5555;
}

.pending{
    color:#555;
}

.current{

    background:white;
    color:black;

    animation:blink 1s infinite;
}

@keyframes blink{

    50%{
        opacity:.3;
    }
}

.instructions{

    text-align:center;

    padding:18px;

    color:#666;

    border-top:
    1px solid rgba(255,255,255,.08);
}

#hidden-input{

    position:absolute;

    opacity:0;

    pointer-events:none;
}

#volume-control{

    position:fixed;

    right:20px;
    bottom:20px;

    z-index:99999;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px;

    border-radius:12px;

    background:rgba(15,15,15,.75);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);
}

#volume-icon{

    width:22px;
    height:22px;

    color:white;

    cursor:pointer;

    flex-shrink:0;
}

#volume-slider{

    width:0;

    opacity:0;

    overflow:hidden;

    transition:
        width .25s ease,
        opacity .25s ease;
}

#volume-control:hover #volume-slider{

    width:120px;

    opacity:1;
}

#volume-slider{

    accent-color:white;

    cursor:pointer;
}