*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background-color:#000;font-family:Caveat Brush,serif;color:#fff}.container{display:flex;flex-direction:column;max-width:1000px;height:100vh;padding:10px;margin:0 auto}.top{flex:0 0 10%;display:flex;justify-content:space-between;align-items:center;font-size:2rem}.middle{flex:1;display:flex;justify-content:center;align-items:center;color:#fff;padding:10px;border:5px solid white}.bottom{padding:10px 0}button{font-family:Arial,Helvetica,sans-serif;font-size:1.2rem;cursor:pointer;border:2px solid white;background-color:#000;color:#fff}.configuration-form{display:flex;flex-direction:column;justify-content:space-between;gap:50px;border:2px solid white;padding:50px}@media (max-width: 500px){.configuration-form{padding:20px}}.configuration-form .form-group{text-align:center}.configuration-form .form-group.first{padding-bottom:60px;border-bottom:1px solid white}.configuration-form label{font-size:2rem;display:block;margin-bottom:10px;text-align:center}.input-group{display:flex;align-items:center;justify-content:center}.configuration-form input{width:120px;height:60px;font-size:2rem;text-align:center;border:2px solid white;background-color:#000;color:#fff;padding:0;margin:0 5px}.configuration-form .input-group button{font-size:2rem;width:60px;height:60px}.configuration-form .submit-button{font-size:1.5rem;text-transform:uppercase;width:100%;margin-top:50px;padding:20px 50px}.homepage{margin:0;display:flex;justify-content:center;align-items:center;height:100vh}.homepage h1{font-size:3rem;text-align:center;margin-bottom:10px}@media (max-width: 500px){.homepage h1{font-size:2.5rem}}.homepage-wrapper{width:500px;max-height:100vh}@media (max-width: 500px){.homepage-wrapper{width:94%}}.math-problem{display:flex;justify-content:center;align-items:center;align-content:center;column-gap:30px;overflow:auto;font-size:10rem}@media (max-width: 500px){.math-problem{column-gap:10px;font-size:2.5rem}}.number-buttons button{flex:1 1 0;min-width:0;height:55px}@media (max-width: 600px){.number-buttons button{flex:1 1 calc(20% - 10px)}}.btn-backspace{background-image:url("data:image/svg+xml,%3csvg%20fill='white'%20clip-rule='evenodd'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m22%206.002c0-.552-.448-1-1-1h-12.628c-.437%200-.853.191-1.138.523-1.078%201.256-3.811%204.439-4.993%205.816-.16.187-.241.418-.241.65s.08.464.24.651c1.181%201.38%203.915%204.575%204.994%205.836.285.333.701.524%201.14.524h12.626c.552%200%201-.447%201-1%200-2.577%200-9.423%200-12zm-7.991%204.928%201.71-1.711c.146-.146.339-.219.531-.219.404%200%20.75.324.75.749%200%20.194-.073.385-.219.532l-1.711%201.71%201.728%201.728c.147.147.22.339.22.531%200%20.427-.349.75-.75.75-.192%200-.384-.073-.531-.219l-1.728-1.728-1.728%201.728c-.146.146-.339.219-.531.219-.401%200-.75-.323-.75-.75%200-.192.073-.384.22-.531l1.728-1.728-1.788-1.787c-.146-.147-.219-.338-.219-.531%200-.426.346-.75.751-.75.192%200%20.384.073.53.219z'%20fill-rule='nonzero'/%3e%3c/svg%3e");background-size:50px;background-repeat:no-repeat;background-position:center}.number-buttons{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:10px}.action-buttons{display:flex;gap:20px}.action-buttons button{flex:1 1 calc(50% - 20px);height:55px}.action-buttons .btn-ok{border-color:green}.score-title{font-size:3rem}@media (max-width: 500px){.score-title{font-size:2.5rem}}.score{font-size:1.5rem}.error{margin:0;display:flex;justify-content:center;align-items:center;height:100vh}.error-wrapper{display:flex;flex-direction:column;border:2px solid white;padding:50px;text-align:center}.error-wrapper h1{font-size:3rem;text-align:center;margin-bottom:30px}.error-wrapper a{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1.5rem;text-decoration:none;text-transform:uppercase;color:#fff;padding:10px 30px;border:1px solid white}.grade{display:inline-block;position:relative;font-size:10rem;line-height:10rem;padding:0 25px;margin-bottom:50px}@media (max-width: 500px){.grade{font-size:8rem}}.grade:after{content:"";position:absolute;left:0;right:0;bottom:5px;height:5px;background-color:#fff;box-shadow:0 12px #fff}.examStats{display:flex;gap:10px;justify-content:space-between;border-top:1px solid white;border-bottom:1px solid white;padding:10px 0;margin-bottom:50px}.examStats p{font-size:1.5rem}@media (max-width: 400px){.examStats p{font-size:1.2rem}}.examStats p.correct{color:green}.examStats p.incorrect{color:red}.showExamples{display:inline-block;margin-bottom:50px;font-size:1.2rem;color:#fff}.showExamples:hover{text-decoration:none}.resultExamples{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;padding:0;margin:0 0 40px}.resultExamples li{width:calc(50% - 10px);margin-bottom:10px;font-size:1.2rem}.resultExamples .correct{color:green}.resultExamples .incorrect{color:red}.resultExamples .white{color:#fff}.resultExamples li.incorrect .example{position:relative;color:red}.resultExamples li.incorrect .example:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:red;transform:rotate(-15deg);transform-origin:center}.resultExamples li.incorrect .green{color:green}.result{margin:0;display:flex;justify-content:center;align-items:center;height:100vh}.result h1{font-size:3rem;text-align:center;margin-bottom:10px}@media (max-width: 500px){.result h1{font-size:2.5rem}}.result-wrapper{width:500px;max-height:98vh;text-align:center;overflow:auto}@media (max-width: 500px){.result-wrapper{width:94%}}.result-container{border:2px solid white;padding:30px}.result-container button{font-size:1.5rem;text-transform:uppercase;width:100%;padding:20px 50px}@media (max-width: 500px){.result-container button{font-size:1rem;padding:20px}}