*{box-sizing:border-box;margin:0;padding:0}html{font-size:10px}body{min-width:320px;min-height:100vh;margin:50px 0;font-family:"Montserrat",sans-serif;font-size:1.6rem;background:rgba(255,255,255,.75);text-align:center;transition:all 1s ease-in-out}h2{font-style:normal;font-weight:normal;font-size:3.6rem;line-height:4.4rem;color:#603;text-transform:uppercase}h3{font-size:1.4rem;line-height:1.7rem;text-transform:uppercase;color:#603;padding:10px 10px}.link{text-decoration:none;cursor:pointer}.container{max-width:1000px;width:100%;margin:0 auto;display:flex;justify-content:center;flex-direction:column;row-gap:50px;transition:all 1s ease-in-out;overflow:hidden}.category{display:flex;flex-direction:row;justify-content:space-between;column-gap:10px}.card-container{cursor:pointer;width:100%;height:100%}.card{position:relative;display:flex;box-sizing:border-box;width:100%;height:100%;border:1px solid #ccc;border-radius:5px;filter:drop-shadow(-10px 15px 30px rgba(0, 0, 0, 0.25));transition:box-shadow .25s linear,transform .7s,-webkit-transform .7s}.card__front{display:flex;position:absolute;width:100%;height:90%;top:0;justify-content:end;background-size:contain;background-repeat:no-repeat;backface-visibility:hidden;transition:.3s}.card-artists{background-image:url(../assets/img/artists-quiz.png)}.card-pictures{background-image:url(../assets/img/pictures-quiz.png)}.artists,.pictures{max-width:415px;width:100%;height:415px}.card:hover{transform:translateZ(10px)}.card-title{margin-top:360px;padding:0 15px;font-weight:bold;font-size:3.6rem;line-height:4.4rem;text-align:right;text-transform:uppercase;color:#603}.card-title span{font-weight:normal}.settings{display:flex;align-items:center;justify-content:center;gap:5px;width:150px;height:50px;padding:0 8px;font-size:1.8rem;line-height:2.2rem;text-transform:uppercase;background-color:#603;color:#fff;margin:0 auto;border:none;cursor:pointer}.settings .set{background-image:url(../assets/svg/setting.svg)}.settings-icon{display:inline-block;width:45px;height:45px;background-repeat:no-repeat;background-position:center}.home{background-image:url(../assets/svg/score.svg)}.score{background-image:url(../assets/svg/home.svg)}.category{background-image:url(../assets/svg/categories.svg)}.settings-container{display:flex;flex-direction:row;justify-content:space-between;column-gap:5px}.settings-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;max-width:415px;width:100%;height:415px;border:1px solid #ccc;border-radius:5px;filter:drop-shadow(4px 4px 9px rgba(0, 0, 0, 0.25));background:#fff;padding:40px 10px 30px}.settings-card .volume-icon{display:inline-block;width:100px;height:82px;background-image:url(../assets/svg/volume-on.svg);background-repeat:no-repeat;margin-bottom:50px}.settings-card .time-icon{display:inline-block;width:100px;height:100px;background-image:url(../assets/svg/timer-picture.svg);background-position:center;background-repeat:no-repeat;margin-bottom:30px}.settings-card span{font-size:1.8rem;line-height:2.2rem;color:#603}.settings-card .settings-title{font-weight:bold;font-size:3.6rem;line-height:4.4rem;color:#603;text-transform:uppercase}.volumeoff-icon{display:inline-block;width:20px;height:30px;background-image:url(../assets/svg/volume-off.svg);background-repeat:no-repeat;cursor:pointer}.range-container{display:flex;align-items:center;justify-content:center;column-gap:10px;margin-bottom:60px;max-width:280px;width:100%}.progress-volume{background:linear-gradient(to right, #660033 0%, #660033 50%, #E5E5E5 50%, #E5E5E5 100%);width:100%;height:5px;outline:none;transition:450ms ease-in;border:none;transition:background 450ms ease-in;-webkit-appearance:none}.progress-volume::-webkit-slider-thumb{width:10px;height:10px;border-radius:50%;-webkit-appearance:none;cursor:ew-resize;background:#603;border:solid 2px #fff}.check{display:none}.check:checked>.label{background-image:url(../assets/svg/check.svg)}.label{width:30px;height:30px;border:solid 1px #603;cursor:pointer;background-repeat:no-repeat;background-size:contain}.button-container{display:flex;width:100%;flex-flow:wrap;justify-content:center;row-gap:10px}.categories-container{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}.categories-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:184px;height:300px;background:#fff;border:1px solid #ccc;border-radius:5px;cursor:pointer;overflow:hidden;transition:all 2s ease}.categories-card .number{height:100%;font-weight:bold;font-size:7.2rem;line-height:8.8rem;text-transform:uppercase;color:#555;padding:0 10px}.categories-card .card-score{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px}.categories-card .score{font-weight:normal;font-size:1.8rem;line-height:2.2rem;text-align:right;text-transform:uppercase;color:#603}.score-info{position:absolute;display:flex;align-items:center;justify-content:center;top:300px;width:184px;height:50px;color:#fff;font-size:1.8rem;text-align:center;background:#603;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:10;transition:top .5s ease-in-out}.categories-card:hover .score-info{top:250px;transition:top .5s ease-in-out}.active-category-page{opacity:1;transform:scale(1)}.category-image{width:184px;height:200px;background-position:center;background-repeat:no-repeat;background-size:cover}.header-questions{display:flex;align-items:center;justify-content:space-between}.questions img{width:94px;height:60px}.question-title{font-weight:bold;font-size:3rem;line-height:3.7rem;text-transform:uppercase}.timer-container{display:flex;align-items:center;max-width:200px;width:100%}.timer-icon{display:inline-block;width:51px;height:60px;background-image:url(../assets/svg/timer-picture.svg);background-position:center;background-repeat:no-repeat;background-size:contain;margin:0 10px}.timer{display:inline-block;font-weight:normal;font-size:3.6rem;line-height:4.4rem;text-align:right;text-transform:uppercase;color:#603}.question-image{display:flex;justify-content:center;align-items:flex-end;max-width:1000px;width:100%;height:650px;object-fit:cover}.dots-container{display:flex;gap:10px}.dot{display:block;width:15px;height:15px;background:#c4c4c4;border-radius:50%;margin-bottom:1.5rem}.question-author{flex-direction:column;align-items:flex-end;row-gap:10px}.download-button{display:flex;justify-content:center;align-items:center;margin:0}.download-icon{display:inline-block;background-image:url(../assets/svg/download.svg);width:40px;height:40px;background-position:center;background-repeat:no-repeat;background-size:contain}.canvas{opacity:0;visibility:hidden}.answer-container{display:flex;flex-wrap:wrap;max-width:523px;width:100%;height:159px;margin:0 auto}.answer{max-width:260px;width:100%;height:79px;background:#fff;font-style:normal;font-weight:normal;font-size:2.4rem;text-transform:uppercase;color:#603;padding:15px;cursor:pointer}.answer:hover{background:#c4c4c4;transition:all .2s ease-in-out}.answer.match{display:block;color:#fff;background:rgba(0,102,53,.5);transition:all .2s ease-in-out}.answer.unmatch{display:block;color:#fff;background:rgba(102,0,51,.5);transition:all .2s ease-in-out}.answer:first-of-type{border-bottom:1px solid #555}.answer:nth-of-type(2){border-bottom:1px solid #555;border-left:1px solid #555}.answer:last-of-type{border-left:1px solid #555}.modal-container{position:fixed;bottom:80%;display:flex;flex-direction:column;align-items:center;row-gap:2rem;background:#fff;width:582px;height:715px;padding:20px 10px;left:50%;transform:translate(-291px, -80%);z-index:100;transition:bottom .7s ease-in-out}.modal-container span{font-style:normal;font-weight:normal;font-size:1.8rem;line-height:2.2rem;text-align:center;text-transform:uppercase;color:#603}.visible{bottom:1%;transform:translate(-291px, -1%);transition:bottom .7s ease-in-out}.modal-check{margin-top:15px;display:inline-block;width:65px;height:65px;background-position:center;background-repeat:no-repeat;background-size:contain}.modal-image{width:400px;height:400px;background-position:center;background-repeat:no-repeat;background-size:contain}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);z-index:10}.modal-congratulation{padding:50px 50px;position:fixed;display:flex;flex-direction:column;align-items:center;row-gap:2rem;background:#fff;width:582px;height:715px;left:50%;top:50%;transform:translate(-291px, -357.5px);z-index:100}.modal-congratulation .congratulation-title{font-style:normal;font-weight:bold;font-size:9.6rem;line-height:11.7rem;text-align:center;text-transform:uppercase;color:#603;margin-top:50px}.modal-congratulation .congratulation-image{display:inline-block;width:20.6rem;height:17rem;background-image:url(../assets/svg/congrat.jpg);background-position:center;background-repeat:no-repeat;margin:30px 0 100px}.modal-congratulation .button-container{display:flex;column-gap:50px;justify-content:space-between}.score-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:184px;height:234px;background:#fff;border:1px solid #ccc;border-radius:5px;cursor:pointer;transition:all 2s ease;overflow:hidden}.score-card .card-score{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px}.score-card .score-image{width:184px;height:200px;background-position:center;background-repeat:no-repeat;background-size:contain}.score-card .score-title{font-weight:normal;font-size:1.4rem;line-height:1.7rem;text-transform:uppercase;color:#603}.score-info-card{position:absolute;display:flex;flex-direction:column;row-gap:10px;align-items:center;justify-content:center;top:232px;width:184px;height:130px;color:#603;font-size:1.6rem;text-align:center;text-transform:uppercase;background:rgba(255,255,255,.75);border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:10;transition:top .5s ease-in-out}.score-card:hover .score-info-card{top:100px;transition:top .5s ease-in-out}.transition-info{top:100px;transition:top .5s ease-in-out}.grayscale{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.picture-container{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap;max-width:1000px;width:100%;margin:0 auto;gap:10px}.picture-image{display:flex;max-width:495px;width:100%;height:325px;font-size:0;background-position:center;background-repeat:no-repeat;background-size:cover;cursor:pointer}.picture-image.match:after{content:"";display:block;width:100%;height:100%;background:rgba(0,102,53,.5);transition:all .2s ease-in-out}.picture-image.unmatch:after{content:"";display:block;width:100%;height:100%;background:rgba(102,0,51,.5);transition:all .2s ease-in-out}.counter{position:relative;width:146px;height:45px;margin-bottom:20px}.minus{position:absolute;left:0;bottom:0;display:block;width:36px;height:36px;font-size:2.4rem;border:none;border-radius:50%;color:#fff;background:#555;cursor:pointer;z-index:1}.form-counter{position:relative;display:flex;justify-content:center}.number{height:50px;text-align:center;font-size:2.2rem;line-height:2.6rem;border:none;background:transparent}.plus{position:absolute;bottom:0;right:0;display:block;width:36px;height:36px;font-size:2.4rem;border:none;border-radius:50%;color:#fff;background:#555;cursor:pointer;z-index:1}.footer{min-width:320px;width:100%;margin:0 auto;display:flex;justify-content:space-between}.github{margin:0 10px;margin-top:6px;display:block;text-decoration:none;width:120px;height:100%;padding-left:45px;background-image:url(../assets/svg/github.svg);background-size:35px;background-repeat:no-repeat;background-position:left center;line-height:45px;color:#000;transition:.3s}.school{margin:12px 10px;display:block;position:relative;font-family:"Open Sans",sans-serif;width:20px;height:32px;background-image:url(../assets/svg/rs_school.svg);background-size:contain;background-repeat:no-repeat;background-position:left center;padding-right:135px}.school-year{position:absolute;bottom:0;right:0;font-size:21px;letter-spacing:-2px;color:#000;line-height:.9;transition:.3s}@media(max-width: 1000px){.picture-image{max-width:360px;width:100%;height:337px}}@media(max-width: 768px){.container{max-width:750px;width:100%}.card-title{display:flex;justify-content:center}.category{flex-direction:column;justify-content:center;align-items:center;row-gap:40px}.artists,.pictures{max-width:500px;width:100%;height:320px}.card-title{margin-top:265px}.categories-container{row-gap:5px}.header-questions{flex-flow:wrap;justify-content:space-around}.question-title{order:1;margin-top:20px}.settings-container{flex-direction:column;align-items:center;row-gap:20px}.settings-card{max-width:500px;width:100%;height:320px}.range-container,.settings-card .time-icon,.counter{margin-bottom:0}.modal-container,.modal-congratulation{width:482px;height:600px;padding:10px 10px}.visible{bottom:-1%}}@media(max-width: 360px){html{font-size:6px}body{margin-top:10px}.container{max-width:350px;width:100%;row-gap:20px}.logo{margin:0 auto}.logo img{display:block;width:100px;height:33px;object-fit:contain}.card-title{display:flex;justify-content:center}.category{flex-direction:column;justify-content:center;align-items:center;row-gap:15px}.artists,.pictures{max-width:330px;width:100%;height:213px}.card__front{background-size:cover}.card-title{margin-top:185px}.categories-container{gap:2px}.settings-card .volume-icon,.settings-card .time-icon{width:67px;height:52px;background-size:contain;margin-bottom:0}.header-questions{flex-flow:wrap;justify-content:space-around}.question-title{order:1;margin-top:20px}.settings-container{flex-direction:column;align-items:center;row-gap:20px}.settings-card{max-width:336px;width:100%;height:204px;padding:15px 10px}.counter{width:100px}.minus,.plus{width:30px;height:30px}.label{width:20px;height:20px}.button-container{flex-flow:wrap;justify-content:space-around;row-gap:10px}h2{order:1}.categories-card{width:115px;height:179px}.question-image{object-fit:contain;width:360px;height:365px}.answer{max-width:150px;width:100%}.picture-image{width:360px;height:90px}.modal-container,.modal-congratulation{width:340px;height:480px;padding:10px 10px;transform:translate(-170px, -80%)}.visible{bottom:8%;transform:translate(-170px, -8%)}}