*{padding:0;margin:0;box-sizing:border-box}body{font-family:sans-serif;color:#343a40;line-height:1}.accordion{width:700px;margin:100px auto;display:flex;flex-direction:column;gap:24px;background-color:w}.item{background-color:#fff;box-shadow:0 0 30px #0000001a;padding:20px 48px 20px 24px;cursor:pointer;border-top:4px solid #fff;border-bottom:4px solid #fff;display:grid;grid-template-columns:auto 1fr auto;column-gap:24px;row-gap:32px;align-items:center}.number{font-size:24px;font-weight:500;color:#ced4da}.title,.icon{font-size:24px;font-weight:500}.content-box{grid-column:2 / -1;padding-bottom:16px;line-height:1.6}.content-box ul{color:#868e96;margin-left:16px;margin-top:16px;display:flex;flex-direction:column;gap:12px}.open{border-top:4px solid #087f5b}.open .number,.open .title{color:#087f5b}:root{--color-theme: #1098ad;--color-accent: #ffa94d}.btn-option.correct{background-color:var(--color-theme);border:2px solid var(--color-theme);color:var(--color-light)}.btn-option.wrong{background-color:var(--color-accent);border:2px solid var(--color-accent);color:var(--color-darkest)}.start{display:flex;flex-direction:column;align-items:center}.btn{display:block;font-family:inherit;color:inherit;font-size:2rem;border:2px solid var(--color-grey-800);background-color:var(--color-grey-100);color:var(--color-grey-800);padding:1.2rem 2.4rem;cursor:pointer;border-radius:100px;transition:.3s;border:solid 1px}.btn:not([disabled]):hover{background-color:var(--color-grey-300)}.btn-option:not([disabled]):hover{transform:translate(1.2rem)}.btn[disabled]:hover{cursor:not-allowed}.btn-ui{float:right}.options{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:3.2rem}.btn-option{width:100%;text-align:left}.answer{transform:translate(2rem)}.result{background-color:var(--color-theme);color:var(--color-light);border-radius:100px;text-align:center;padding:2rem 0;font-size:2rem;font-weight:500;margin-bottom:1.6rem}.result span{font-size:2.2rem;margin-right:4px}.highscore{font-size:1.8rem;text-align:center;margin-bottom:4.8rem}.loader-container{display:flex;flex-direction:column;align-items:center;margin-top:4rem;gap:1.6rem;color:var(--color-medium);font-size:1.4rem}.loader{width:50px;height:24px;background:radial-gradient(circle closest-side,currentColor 90%,#0000) 0% 50%,radial-gradient(circle closest-side,currentColor 90%,#0000) 50% 50%,radial-gradient(circle closest-side,currentColor 90%,#0000) 100% 50%;background-size:calc(100% / 3) 12px;background-repeat:no-repeat;animation:loader 1s infinite linear}@keyframes loader{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}