*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}body{background-color:teal}a{text-decoration:none;color:#000}.header{max-width:1040px;height:80px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.header__nav__list{display:flex;-moz-column-gap:40px;column-gap:40px;list-style:none;font-size:20px;padding-left:0;color:#fff}.header__nav__font{color:#fff;font-weight:700}.container{max-width:1040px;margin:0 auto;padding:40px 20px}.movies{color:#fff;margin-bottom:20px}.movies__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.movie{width:100%;padding:16px 24px;border-radius:10px;box-shadow:0 3px 6px #000;background-color:#fff}@media screen and (min-width: 768px){.movie{width:320px}}.movie__title{font-size:18px}.movie__title.limit{line-height:1.5rem;height:3rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.movie__rate{margin-bottom:10px}.movie__img{margin:0 auto 10px}.movie__img img{width:480px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;margin:0 auto}.movie__instructor,.movie__comment,.movie__complete{margin-bottom:10px}.movie__instructor__title,.movie__comment__title,.movie__complete__title{font-weight:700;font-size:16px}.movie__instructor__body,.movie__comment__body,.movie__complete__body{font-size:14px}.movie__instructor__body.limit,.movie__comment__body.limit,.movie__complete__body.limit{line-height:1rem;height:3rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.detail{margin:0 auto 20px;padding:24px;width:100%;max-width:600px;background-color:#cce6e6;border-radius:10px}.detail .movie__title{text-align:start;font-size:22px;margin-bottom:20px}.detail .movie__img{margin:0 auto 20px}.action-area{padding:20px;display:flex;justify-content:space-around}.go-home{text-align:center}.loading{display:flex;justify-content:center;align-items:center;padding:60px 0;font-size:40px;color:#fff}.loading.end{font-size:24px}.btn{padding:8px 40px;font-size:24px;border-radius:5px;box-shadow:2px 4px 3px #0000004d;border:none;transition:transform .2s ease;cursor:pointer}.btn:hover{transform:translate(2px,2px);box-shadow:1px 2px 3px #0000004d}.btn.green{background-color:green;color:#fff}.btn.red{background-color:red;color:#fff}.btn.gray{background-color:gray;color:#fff}.form .movie__title{text-align:center;font-size:22px;margin-bottom:20px}.form .alert{text-align:center;font-weight:700;color:red}.form .formpart{display:flex;row-gap:10px;flex-direction:column;margin-bottom:20px}.form .form-img{margin-bottom:20px}.form .label__title,.form .label__instructor,.form .label__comment,.form .label__rating,.form .label__complete,.form .label__img{font-size:14px;font-weight:700}.form .label__img{margin-bottom:20px}.form .input__title,.form .input__instructor{padding:16px;width:100%;font-size:16px;color:#fff;background-color:teal;border-radius:5px;border:solid 2px darkslategray}.form .input__title::-moz-placeholder,.form .input__instructor::-moz-placeholder{color:#fff}.form .input__title::placeholder,.form .input__instructor::placeholder{color:#fff}.form .input__complete{width:150px;color:#fff;background-color:teal;border-radius:5px;border:solid 2px darkslategray;cursor:pointer}.form .textarea__comment{padding:16px;width:100%;font-size:16px;color:#fff;background-color:teal;border-radius:5px;border:solid 2px darkslategray}.form .textarea__comment::-moz-placeholder{color:#fff}.form .textarea__comment::placeholder{color:#fff}.modal-container{position:fixed;top:0;right:0;left:0;z-index:100;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center}.modal-container .modal{padding:24px;margin:0 auto;max-width:600px;width:90%;background-color:#cce6e6}.small-container{display:flex;justify-content:center}.small-container .form{width:600px;color:#cce6e6}.small-container .form .movie__title{color:#fff;font-size:30px}.small-container .form .input__title,.small-container .form .input__instructor{color:#000;background-color:#cce6e6;border-radius:10px;border:solid 4px darkslategray}.small-container .form .input__title::-moz-placeholder,.small-container .form .input__instructor::-moz-placeholder{color:#2f4f4f}.small-container .form .input__title::placeholder,.small-container .form .input__instructor::placeholder{color:#2f4f4f}.small-container .form .input__complete{color:#000;width:150px;background-color:#cce6e6;border-radius:5px;border:solid 2px darkslategray;cursor:pointer}.small-container .form .textarea__comment{color:#000;background-color:#cce6e6;border-radius:10px;border:solid 4px darkslategray}.small-container .form .textarea__comment::-moz-placeholder{color:#2f4f4f}.small-container .form .textarea__comment::placeholder{color:#2f4f4f}.small-container .form .label__rating{margin-bottom:10px}.small-container .form .label__icon>span svg{width:33px;height:33px}label{display:block}.error-msg{color:red}.analytics{display:flex;flex-direction:column;align-items:center}.topic{display:flex;flex-wrap:wrap;-moz-column-gap:20px;column-gap:20px;row-gap:20px;justify-content:center;margin-bottom:40px}.topic .card{background-color:#cce6e6;width:235px;height:100px;padding:20px;border-radius:10px}.topic .card__number{font-size:30px}.chart{width:100%;padding:40px;border-radius:10px;background-color:#cce6e6;box-shadow:0 4px 4px #0003;margin-bottom:40px}.chart__title{text-align:center;font-size:24px;margin-bottom:20px}.show-movies{font-size:16px;padding:10px 40px;border-radius:10px}