@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
* {
    font-family: 'Nunito';
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y;

}
/* dark theme */
:root {
    --background-lower:    hsl(0, 0%, 3%);
    --background-mid:      hsl(0, 0%, 10%);
    --background-high:     hsl(0, 0%, 20%);
    --background-highlight:hsl(0, 0%, 30%);
    --login-shadow:          rgba(0,0,0,.3);
    
    --text: hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 73%);

    --f: invert(0%);

    --transition-time: .2s;
    --transitions: 
        color var(--transition-time), 
        background var(--transition-time), 
        box-shadow var(--transition-time), 
        transform  var(--transition-time)
    ;
}
/* light theme */
body.light {
    --background-lower:    hsl(0, 0%, 70%);
    --background-mid:      hsl(0, 0%, 90%);
    --background-high:     hsl(0, 0%, 100%);
    --background-highlight:hsl(0, 0%, 80%);
    --login-shadow:        rgba(0,0,0,.1);
    
    --text:       hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 30%);
    --f: invert(100%);
}
body.light img.icon {
    filter: invert();
}

body {
    height: 100dvh;
    margin: 0;
    background: var(--background-lower);
    transition: var(--transitions);
}
.icon {
    border-radius: 100vw;
    cursor: pointer;
    padding: .2vw;
    transition: var(--transitions);
} .icon:hover {
    background: hsl(0, 0%, 30%);
} .icon:active {
    transform: scale(.9);
}

.tabs {
    background: var(--background-high);
    border-radius: 100vw;
    display: flex;
    height: min-content;
} .tabs > span {
    cursor: pointer;
    border-radius: 100vw;
    padding: .1vw .7vw;
    font-size: 1.7vw;
    cursor: pointer;
    color: var(--text-muted);

    transition: var(--transitions) ;
} 
.tabs > span:hover {
    background: var(--background-highlight);
    color: var(--text);
} 
.tabs > span:active {
    transform: scale(.95);
}
.tabs > span.active {
    background: var(--text);
    color: var(--background-high);
    box-shadow: var(--background-high) 0px 0px 1vw .2vw;
} 

.hidden {
    visibility: hidden !important;
    display: none !important;
}

#test {
    position: fixed;
    /* height: 10vw; */
    width: 12vw;
    background-color: #fff;
    right: 9.5vw;
    top: calc(50dvh + 17vw);
    gap: .5vw;
    padding: .7vw .5vw .5vw;
    display: flex;
    flex-direction: column;
    background: var(--background-mid);
    box-shadow: var(--login-shadow) 0px 0px 1vw 1vw;
    border-radius: 0 0 1.3vw 1.3vw;
    transition: transform .5s ease;
}
#test > div {
    background: var(--background-high);
    color: var(--text);
    /* padding: .5vw .7vw; */
    border-radius: 10vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    cursor: pointer;
    padding: .2vw .5vw;

    transition: var(--transitions);
} #test > div > span {
    font-size: 1.1vw;
    font-weight: 600;
} #test > div > svg {
    fill: var(--text) !important;
    height: 1.3vw;
    width: 1.3vw;
}
#test > div:hover {
    background: var(--background-highlight);
}

#test > div:active {
    transform: scale(.96);
}
#test > div.selected {
    background: var(--text);
    color: var(--background-high);

}
#test > div.selected > svg {
    fill: var(--background-high) !important;
}
#test.t_hidden {
    transform: translateY(-100%);
}


#qr {
    display: flex;
    position: fixed;
    z-index: 10;
    backdrop-filter: blur(3vw);
    border-radius: 1.5vw;
    top:   8vw;
    left:  8vw;
    
} #qr > img {
    width: 15vw;
    border-radius: 1.5vw;
    transition: var(--transitions) ;
}