*{padding:0;margin:0;border:0}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a:focus,a:active{outline:none}nav,footer,header,aside{display:block}html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}input,button,textarea{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer;background:none}button::-moz-focus-inner{padding:0;border:0}a,a:visited{text-decoration:none;color:#000}a:hover{text-decoration:none}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:400}html{font-family:Roboto,sans-serif}html::-webkit-scrollbar{display:none}html[data-theme=dark]{--main-background: #504d4d;--header-gradient: linear-gradient(.25turn, #191c1d, #676966, #582e00);--header-bottom: #fff;--text-color: #fff;--lesson-icon-background: #362e29ce;--card-front-gradient:linear-gradient( #25273ff1, #2f303bf1, #5f2a2af3);--card-back-gradient:linear-gradient(#142a52ee, #7e7522ea);--navigate-button: #12226b;--progress-bar: #208a00}html[data-theme=light]{--main-background:#ffffff;--header-gradient: linear-gradient(.25turn, #3f87a6, #ebf8e1, #f69d3c);--header-bottom: #000;--text-color: #000;--lesson-icon-background: #ffffffe0;--card-front-gradient:linear-gradient( #585c96f1, #57596df1, #9e4b4bf3);--card-back-gradient:linear-gradient(#2d64bdee, #dace50ea);--navigate-button: #2f53f5;--progress-bar: #3cff00}body{background-color:var(--main-background)}.wrapper{position:relative;max-width:400px;margin:0 auto;min-height:100vh;min-height:100dvh;font-size:1rem;color:#fff;background-color:#ddd7d2e0;background-image:url(/assets/lessons-cover.jpg);background-size:contain;border-radius:5px;box-shadow:0 0 15px #00000026}.button-theme{width:40px;height:40px}.button-theme.dark{color:#fff}.header{position:relative;position:sticky;top:0;z-index:99;width:100%;height:60px;padding:10px;color:var(--text-color);display:flex;justify-content:space-around;align-items:center;background:var(--header-gradient);border-bottom:double 4px var(--header-bottom)}.header h1{flex-grow:1;text-align:center;font-size:2rem}.header h2{width:40px;font-size:1.2rem;text-align:center}.header button{width:40px;height:40px;background:none}.header button img{width:40px;height:40px}.header-skeleton{width:40px;font-size:0}.arrow{height:60px;width:60px;transition:.1s}.arrow:hover{height:66px;width:66px}.main{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;height:100svh;background-image:url(/assets/main-cover.jpg);background-size:cover;background-position:center}.main h1{position:absolute;top:20%;right:10px;padding:0 4px;color:#000;font-size:28px;line-height:1.4;background-color:#ffffff80}.main__box{display:flex;justify-content:center;align-items:center;width:100%;min-height:66px;background-color:#ffffff80}.lesson-box{position:relative;display:flex;flex-wrap:wrap;min-height:100%;flex-direction:column;align-items:center;padding:10px}.lesson-icon{width:100%;height:60px;padding:8px;margin-bottom:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 15px #00000026;border-radius:5px;background-color:var(--lesson-icon-background);transition:.4s ease-in-out;transition-property:background-color,height}.lesson-icon h2{font-size:1.3rem;line-height:1.2;color:var(--text-color)}.lesson-icon.active{height:120px;flex-direction:column;justify-content:space-around;align-items:center}.lesson-icon__btn-box{display:flex;justify-content:space-around;width:100%}.button-general{height:30px;min-width:80px;padding:0 4px;color:#fff;background-color:var(--navigate-button);border-radius:6px}.button-general:active{background-color:#82819c}.spinner-cover{position:relative;min-height:calc(100vh - 60px);opacity:.8;background-color:var(--main-background)}.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}[class^=ball-]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all .5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}@keyframes circleRotate{0%{transform:rotate(0)}to{transform:rotate(1440deg)}}.ball-1{z-index:-1;background-color:#07f;animation-timing-function:cubic-bezier(.5,.3,.9,.9)}.ball-2{z-index:-2;background-color:#07f;animation-timing-function:cubic-bezier(.5,.6,.9,.9)}.ball-3{z-index:-3;background-color:#ffd900;animation-timing-function:cubic-bezier(.5,.9,.9,.9)}.ball-4{z-index:-4;background-color:#ffd900;animation-timing-function:cubic-bezier(.5,1.2,.9,.9)}.ball-5{z-index:-5;background-color:coral;animation-timing-function:cubic-bezier(.5,1.5,.9,.9)}.ball-6{z-index:-6;background-color:#8bc34a;animation-timing-function:cubic-bezier(.5,1.8,.9,.9)}.ball-7{z-index:-7;background-color:#cddc39;animation-timing-function:cubic-bezier(.5,2.1,.9,.9)}.ball-8{z-index:-8;background-color:#c8102e;animation-timing-function:cubic-bezier(.5,2.4,.9,.9)}.cover{position:relative;min-height:calc(100vh - 60px);opacity:.9;background-color:var(--main-background)}.error-message{position:absolute;top:50%;left:50%;width:90%;text-align:center;transform:translate(-50%,-50%);color:var(--text-color);font-size:2rem}.card{position:relative;display:flex;justify-content:center;align-items:center;width:80%;height:450px;margin:0 auto 10px;transition:transform .3s cubic-bezier(.2,.85,.4,1.275)}.card__item{width:100%;height:450px;padding:20px 5px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:1px #000 solid;border-radius:10px;background:var(--card-front-gradient);text-align:center;transition:transform .3s cubic-bezier(.4,.85,.4,1.275)}.card__item h2{font-size:2rem;line-height:1.2;font-weight:800;color:#fff}.card__item p{font-size:1.2rem;color:#fff;line-height:1.2}.card__item div{display:flex;flex-direction:column;justify-content:center;align-items:center}.card__item button{margin-bottom:20px}.card__item button:last-child{margin-bottom:0}.card__item.front{backface-visibility:hidden;position:relative;z-index:1}.card__item.front h2:after{content:"";vertical-align:text-top;display:inline-block;width:14px;height:12px;margin-left:4px;border-radius:4px;background-image:url(/assets/speaker.png);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#fff}.card__item.front p:after{content:"";vertical-align:text-top;display:inline-block;width:14px;height:12px;margin-left:4px;border-radius:4px;background-image:url(/assets/speaker.png);background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#fff}.card__item.back{z-index:0;position:absolute;top:0;backface-visibility:hidden;transform:rotateY(-180deg);background:var(--card-back-gradient)}.card__item.back p{margin-bottom:20px}.card__item.back p:last-child{margin-bottom:0}.card__item.back.active{transform:rotateY(0);z-index:1}.card__item.front.active{transform:rotateY(180deg);z-index:0}.progress-bar{position:fixed;bottom:0;width:400px;height:10px;z-index:999;background-color:var(--progress-bar);border-top:1px solid #000}