@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,blockquote,figure,hr,form,fieldset,legend,button,input,textarea{margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{display:block;max-width:100%;height:auto}.visually-hidden{z-index:-1!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}*[style*=transition],*:before [style*=transition],*:after [style*=transition]{transition-duration:.01ms!important}*[style*=animation],*:before [style*=animation],*:after [style*=animation]{animation-duration:.01ms!important;animation-iteration-count:1!important}}@font-face{font-family:Poppins;src:local(""),url(/jazzy-musicquiz/fonts/poppins-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:100%}@font-face{font-family:Poppins;src:local(""),url(/jazzy-musicquiz/fonts/poppins-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;size-adjust:100%}:root{--background-color: #bcebe5;--background-accent: #feffeb;--text-color: #115f6b;--link-color: #a31860;--link-color-hover: #c94a1c;--button-background: #2e7c88;--button-background-hover: #c83a84;--button-text: #feffeb;--valid-border: #4caf50;--valid-background: #e6f3e6;--valid-text: #2e7c32;--danger-border: #f44336;--danger-background: #ffebee;--danger-text: #cf2d2d;--info-border: #007cf7;--info-background: #e6f2ff;--info-text: #0056b3}.dark-theme{--background-color: #002c37;--background-accent: #115f6b;--text-color: #feffeb;--link-color: #ff8fc9;--link-color-hover: #f27300;--button-background: #2e7c88;--button-background-hover: #c83a84;--button-text: #feffeb;--valid-border: #2ade8a;--valid-background: #063a20;--valid-text: #29d685;--danger-border: #ff5649;--danger-background: #4d0c0c;--danger-text: #ff5649;--info-border: #4da6ff;--info-background: #0c2c4d;--info-text: #4da6ff}:root{--primary-ff: "Poppins";--fs-100: clamp(.64rem, .6152rem + .1104vw, .7035rem);--fs-200: clamp(.8rem, .7461rem + .2395vw, .9377rem);--fs-300: clamp(1rem, .9022rem + .4348vw, 1.25rem);--fs-400: clamp(1.25rem, 1.0871rem + .7239vw, 1.6663rem);--fs-500: clamp(1.5625rem, 1.3048rem + 1.1454vw, 2.2211rem);--fs-600: clamp(1.9531rem, 1.5588rem + 1.7524vw, 2.9607rem);--fs-700: clamp(2.4414rem, 1.8524rem + 2.6178vw, 3.9467rem);--fs-800: clamp(3.0518rem, 2.1873rem + 3.842vw, 5.2609rem);--fs-900: clamp(3.8147rem, 2.5633rem + 5.5619vw, 7.0128rem)}body{font-size:var(--fs-300);font-weight:400;line-height:1.3em}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:400}.title{font-size:var(--fs-700)}body{background-color:var(--background-color);font-family:var(--primary-ff)}.hidden,.svg-symbols{display:none}.container,.container--boxed,.container--narrow,.container--full-width{position:relative;width:100%}.container--full-width{margin-inline:calc(-50% + 50vw)}.container--boxed,.container--narrow{margin-inline:auto;padding-inline:max(3.125%,.75rem)}.container--boxed{max-width:80rem}.container--narrow{max-width:64rem}.header{width:100%}.header__content{padding-block:calc(var(--fs-300) * 1.25);display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:calc(var(--fs-300) * 2.5);color:var(--text-color)}@media screen and (min-width: 720px){.header__content{row-gap:0}}.header__brand{order:2;width:100%;display:flex;justify-content:center}.header__brand-image{display:block;width:calc(var(--fs-400) * 9);height:auto}.header__score,.header__timer{width:50%;display:inline-block;font-size:var(--fs-500);font-weight:700}.header__score{order:0;text-align:left}.header__timer{order:1;text-align:right}.intro{padding:2em 0}.intro__content{margin:0 auto;max-width:calc(var(--fs-300) * 4 + 70ch);padding:calc(var(--fs-300) * 2);background-color:var(--background-accent);color:var(--text-color);border:2px solid var(--text-color);border-radius:calc(var(--fs-300) * .75)}@media screen and (min-width: 720px){.intro__content{padding:calc(var(--fs-300) * 4)}}.intro__title{width:100%;font-size:var(--fs-600);line-height:1.15;font-weight:700;text-align:center;margin-bottom:1.25em}.intro__subtitle{font-size:var(--fs-400);font-weight:700;margin-bottom:.75em}.intro__text{line-height:1.5em}.intro__text+.intro__text{margin-top:1em}.intro__form{position:relative;margin-top:calc(var(--fs-300) * 2);display:grid}@media screen and (min-width: 720px){.intro__form{grid-template-columns:1fr auto;column-gap:2em;align-items:end}}.intro__input-label{position:absolute;top:0;left:0;font-weight:700;font-size:.75em}.intro__input-label+input{width:100%;min-width:0;padding:calc(var(--fs-300) * 1.75) calc(var(--fs-300) * .5) calc(var(--fs-300) * .25);border:none;background-color:inherit;border-bottom:2px solid var(--text-color);color:inherit;font-size:var(--fs-400);font-family:inherit}.intro__input-label+input:focus{border-color:var(--link-color);color:var(--link-color)}.intro__button{font-family:inherit;background-color:var(--button-background);color:var(--button-text);font-size:var(--fs-400);font-weight:700;letter-spacing:.05em;border:0;border-radius:calc(var(--fs-300) * .75);padding:calc(var(--fs-300) * 1) calc(var(--fs-300) * 3);cursor:pointer}.intro__button:hover{background-color:var(--button-background-hover)}.game__question-card{display:flex;flex-direction:column}.game__title{font-size:var(--fs-400);margin-bottom:1.25em;color:var(--text-color);text-align:center}.game__question-title{font-size:var(--fs-500);font-weight:700;line-height:1.25em;margin-bottom:.75em;color:var(--text-color);text-align:center}.game__question{font-size:var(--fs-300);padding-block:1em;line-height:1.5em;margin:0 auto 1.5em}.game__content{position:relative;margin:0 auto;max-width:calc(var(--fs-300) * 4 + 70ch);padding:calc(var(--fs-300) * 2);background-color:var(--background-accent);color:var(--text-color);border:2px solid var(--text-color);border-radius:calc(var(--fs-300) * .75);display:grid;justify-content:stretch}@media screen and (min-width: 720px){.game__content{padding:calc(var(--fs-300) * 4)}}.game__buttons{display:grid;gap:calc(var(--fs-300) * 1.25);grid-auto-rows:1fr;border:none}@media screen and (min-width: 720px){.game__buttons{grid-template-columns:1fr 1fr}.game__buttons :focus-within{outline:3px solid var(--info-border);outline-offset:3px;border-radius:calc(var(--fs-300) * .5)}}.game__answer-button{position:relative;display:flex;justify-content:center;font-family:inherit;background-color:var(--button-background);color:var(--button-text);font-size:var(--fs-300);border:2px solid var(--button-background);border-radius:calc(var(--fs-300) * .5);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center}.game__answer-button input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer}.game__answer-button label{cursor:pointer;text-align:left;width:100%;min-height:4.3em;display:flex;align-items:center;padding-block:calc(var(--fs-300) * 1);padding-inline:calc(var(--fs-300) * 2) calc(var(--fs-300) * 2)}.game__answer-button:not(.valid):not(.invalid):not(:has(input:checked)):hover{background-color:var(--button-background-hover);border-color:var(--button-background-hover)}.game__answer-button:has(input:checked):not(.valid):not(.invalid){background:var(--button-background-hover);border-color:var(--button-background-hover);outline:3px solid var(--info-border);outline-offset:3px}.game__answer-button.valid,.game__answer-button.invalid{outline:0}.game__answer-button.valid label,.game__answer-button.invalid label{padding-inline-end:calc(var(--fs-300) * 5)}.game__answer-button.valid{background-color:var(--valid-background)!important;border:2px solid var(--valid-border)!important;color:var(--valid-text)!important}.game__answer-button.valid .icon{fill:var(--valid-text)!important}.game__answer-button.invalid{background-color:var(--danger-background)!important;border:2px solid var(--danger-border)!important;color:var(--danger-text)!important}.game__answer-button.invalid .icon{fill:var(--danger-text)!important}.game__answer-icon .icon{position:absolute;right:calc(var(--fs-300) * 2);top:50%;translate:0 -50%;width:calc(var(--fs-300) * 2.3);height:calc(var(--fs-300) * 2.3);fill:var(--button-text)}.game__next-button{cursor:pointer;position:relative;margin:calc(var(--fs-300) * 3) auto 0;border:0;border-radius:100px;padding:1.5em 4em;min-width:60%;background-color:var(--button-background);color:var(--button-text);font-family:inherit;font-size:1em;font-weight:700}.game__next-button:hover{background-color:var(--button-background-hover)}.result{padding:2em 0}.result__content{margin:0 auto;max-width:calc(var(--fs-300) * 4 + 70ch);padding:calc(var(--fs-300) * 2);background-color:var(--background-accent);color:var(--text-color);border:2px solid var(--text-color);border-radius:calc(var(--fs-300) * .75)}@media screen and (min-width: 720px){.result__content{padding:calc(var(--fs-300) * 4)}}.result__title{width:100%;font-size:var(--fs-600);line-height:1.15;font-weight:700;text-align:center;margin-bottom:1.25em}.result .row{display:flex;justify-content:center;align-items:baseline;column-gap:1em}.result .row:not(:last-child){margin-bottom:3em}.result__label{font-size:var(--fs-400)}.result__data{font-size:var(--fs-500);font-weight:700}.result__data>span{font-size:var(--fs-500);font-weight:700}.result__data-text{font-size:var(--fs-400);font-weight:400}.result details{margin:3em auto 0;max-width:calc(var(--fs-300) * 4 + 60ch)}.result__buttons{max-width:calc(var(--fs-300) * 4 + 60ch);margin:3em auto 0;display:flex;flex-wrap:nowrap;gap:var(--fs-300)}.result__button{width:100%;max-width:50%;display:flex;justify-content:center;font-family:inherit;background-color:var(--button-background);color:var(--button-text);font-size:var(--fs-300);border:0;border-radius:calc(var(--fs-300) * .75);padding:calc(var(--fs-300) * 1) calc(var(--fs-300) * 3);cursor:pointer;transition:background-color .3s ease;text-align:center}.result__button:hover{background-color:var(--button-background-hover)}.result__modal{background-color:var(--background-accent);border:none;width:calc(var(--fs-300) * 25);border-radius:calc(var(--fs-300) * .75);padding:calc(var(--fs-300) * 2);text-align:center}.result__modal::backdrop{background-color:#000000bf;opacity:.75}.result__modal-title{font-size:var(--fs-400);color:var(--text-color);line-height:1.25;font-weight:700;text-align:center;margin-bottom:1.15em}.result__modal-buttons{max-width:calc(var(--fs-300) * 4 + 60ch);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--fs-300)}@media screen and (min-width: 320px){.result__modal-buttons{flex-direction:row}}.result__modal-button{width:100%;max-width:50%;display:flex;justify-content:center;font-family:inherit;background-color:var(--button-background);color:var(--button-text);font-size:var(--fs-300);border:0;border-radius:calc(var(--fs-300) * .75);padding:calc(var(--fs-300) * 1) calc(var(--fs-300) * 3);cursor:pointer;transition:background-color .3s ease;text-align:center}.result__modal-button:hover{background-color:var(--button-background-hover)}