/****************************************************************************
 * Fonts
 ****************************************************************************/
 @font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Bold.woff2') format('woff2'),
        url('../fonts/Jost-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Regular.woff2') format('woff2'),
        url('../fonts/Jost-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-SemiBold.woff2') format('woff2'),
        url('../fonts/Jost-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



/****************************************************************************
 * Wrapper
 ****************************************************************************/
html {line-height: 1.15;-webkit-text-size-adjust: 100%;}
body {
    font-family: 'Jost';
    font-weight: 400;
    font-style: normal;
    margin: 0;
    background-color: #FFFFFF;
}
body:not(.initialize) > * {
    opacity: 0;
}

a { color: inherit;}
p {line-height: 1.6;}

/****************************************************************************
 * Wrapper
 ****************************************************************************/
.qr_wrapper {
    position: relative;
    width: 100svw;
    height: 100svh; 
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
}
.active_playlist .qr_wrapper {
    opacity: 0;
}

/****************************************************************************
 * Buttons
 ****************************************************************************/
.button {
    outline: none;
    border: 2px solid currentColor;
    padding: 0.75rem 1.5rem; text-align: left;
    cursor: pointer; position: relative;
    font-size: 1.125rem; transition: all .25s ease;
}

/****************************************************************************
 * Time | Buttons
 ****************************************************************************/
.button em {
    font-style: normal;
    font-size: 1.125rem; display: inline-block;
    border-radius: 0.375em; position: absolute;
    top: 50%; right: 0.25rem; transform: translate(0,-50%);
    background-color: rgba(0,0,0,0.3); vertical-align: middle;
    color: #FFFFFF; padding: 0.25em 0.375em 0.75em 1.375em;
    min-width: 1.375em; text-align: right;
}
.button em:after {
    content: 'min'; position: absolute;
    bottom: 0.25em; right: 0.375em;
    font-size: 0.625em;
    text-transform: lowercase;
}
.button em:before {
    content: ''; position: absolute;
    left: 0.25em; top: 50%;
    width: 0.875em; height: 0.875em;
    transform: translate(0,-50%);
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d="M256 0c-8.8 0-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-79.4C388.2 40.8 480 137.7 480 256c0 123.7-100.3 224-224 224S32 379.7 32 256c0-61.9 25.1-117.8 65.6-158.4c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0C28.7 121.3 0 185.3 0 256C0 397.4 114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM171.3 148.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l96 96c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-96-96z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d="M256 0c-8.8 0-16 7.2-16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-79.4C388.2 40.8 480 137.7 480 256c0 123.7-100.3 224-224 224S32 379.7 32 256c0-61.9 25.1-117.8 65.6-158.4c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0C28.7 121.3 0 185.3 0 256C0 397.4 114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM171.3 148.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l96 96c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-96-96z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}


/****************************************************************************
 * Area
 ****************************************************************************/
.area_content {
    width: 80%;
    max-width: 20rem;
    margin: 0 auto;
}
.qr_buttons {
    padding-top: 1rem;
}
/*.area_top,
.area_bottom {
    min-height: 12rem;
}*/

.area_content img {
    max-width: 100%;
}

.area_content .button {
    margin: 0.5rem 0;
    display: block;
    width: 100%;
}

/****************************************************************************
 * Level Title
 ****************************************************************************/
.level_title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    display: block;
}


/****************************************************************************
 * Language Switch
 ****************************************************************************/
.language_switch ul {
    margin: 1rem -0.25rem;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.language_switch ul li {
    list-style: none;
    flex: 0 0 auto;
    padding: 0.25rem;
}
.language_switch ul li span {
    cursor: pointer;
    font-size: 1.125rem;
}
.language_switch ul li span.active {
    font-weight: 600;
    cursor: auto;
}

/****************************************************************************
 * QR Trainer Logo
 ****************************************************************************/
.qr_trainer_logo {
    width: 5.5rem; display: block;
    position: absolute; height: 3rem;
    bottom: 2.25rem; left: 50%;
    transform:translate(-50%,0);
}

/****************************************************************************
 * Back Button
 ****************************************************************************/
.back_button {
    position: fixed; display: inline-block;
    top: 1.5rem; left: 1rem;
    outline: none; border: none;
    width: 2.5rem; height: 2.5rem;
    background-color: transparent;
    border-radius: 50%; overflow: hidden;
    color: #FFFFFF;
}
.back_button:after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; 
    /*background-color: rgba(255,255,255,0.7);
    filter: blur(1.5rem);
    -webkit-filter: blur(1.5rem);*/
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.back_button svg {
    width: 1.5rem; height: 1.5rem; pointer-events: none;
    -webkit-filter: drop-shadow( 0 0 0.25rem rgba(0,0,0,.7));
    filter: drop-shadow( 0 0 0.25rem rgba(0,0,0,.7));
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}
.back_button svg path {
    fill: #FFFFFF;
}

/****************************************************************************
 * Overlay Toggle
 ****************************************************************************/
.qr_overlay_toggle {
    position: absolute;
    bottom: 1rem;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
}
/****************************************************************************
 * Overlay
 ****************************************************************************/
.qr_overlay {
    box-sizing: border-box;
    position: fixed;
    top: 0; left: 0;
    width: 100svw; height: 100svh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 100;
}
.qr_overlay.hidden {
    display: none;
}

.qr_overlay .qr_overlay_inner {
    flex: 0 0 100%; overflow: auto;
    box-sizing: border-box;
    max-height: 100%;
    max-width: 25rem;
}
.qr_overlay.hidden .close {
    display: none;
}
.qr_overlay .close {
    position: absolute; top: 1rem; right: 1rem;
    width: 2rem; height: 2rem; cursor: pointer;
    background-color: #FFFFFF;
    -webkit-mask-image: url('data:image/svg+xml,<svg fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.5 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.5 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.qr_overlay .close svg {
    position: absolute;
    top: 50%; left: 50%;
    width: 1.5rem; height: 1.5rem;
    transform: translate(-50%,-50%);
}
.qr_overlay .close svg path{
    fill: currentColor;
}