.container{margin-top:2rem;padding-left:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;height:24rem;gap:1rem;border-bottom:1px solid black}.container_video{border:none;margin-top:.6rem;height:60%;width:100%}.container_title{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem}.container_title_rating{display:flex;gap:1rem}.container_btns{position:relative;display:flex;width:100%;justify-content:right;gap:1rem}.container_btns_delbtn{--border: 5px;--slant: .7em;--color: #0f0d0dc6;padding:.4rem 1.2rem;border:none;cursor:pointer;font-weight:700;color:var(--color);background:linear-gradient(to bottom left,var(--color) 50%,rgba(0,0,0,0) 50.1%) top right,linear-gradient(to top right,var(--color) 50%,rgba(0,0,0,0) 50.1%) bottom left;background-size:calc(var(--slant) + 1.3 * var(--border)) calc(var(--slant) + 1.3 * var(--border));background-repeat:no-repeat;box-shadow:0 0 0 200px inset var(--s, rgba(0, 0, 0, 0)),0 0 0 var(--border) inset var(--color);clip-path:polygon(0 0,calc(100% - var(--slant)) 0,100% var(--slant),100% 100%,var(--slant) 100%,0 calc(100% - var(--slant)));transition:color var(--t, .3s),background-size .3s}.container_btns_delbtn:hover{background-size:100% 100%;color:#fff;--t: .2s .1s}.container_btns_time{position:absolute;top:.5rem;left:0}.container_btns_thumb-box{cursor:pointer;display:flex;gap:1rem;justify-content:center;align-items:center;padding:.7rem 1rem;border-radius:2rem;background-color:#86797727}.container_btns_thumb-box_thumb{color:#000000c0;transition:1s ease-in}.container_btns_thumb-box:hover,.container_btns_thumb-box:active{color:#fff;background-color:#9d655a}@media (max-width: 500px){.container{padding-left:0;font-size:1em;height:auto}.container_btns{flex-wrap:wrap}}@media (max-width: 500px) and (max-width: 768px){.container_btns_thumb-box{flex-direction:column}.container_btns_thumb-box p{display:none}}.form{height:10rem;background:#000;display:flex;gap:2rem;justify-content:center;align-items:center}.form__label{color:#000;display:flex;gap:1rem;justify-content:center;align-items:center}.form__input{height:2.5rem;padding:1rem;width:18rem;border-radius:.2rem;border:none}.form__btn{--border: 5px;--slant: .7em;--color: white;padding:.7em 1.9em;border:none;cursor:pointer;font-weight:700;color:var(--color);background:linear-gradient(to bottom left,var(--color) 50%,rgba(0,0,0,0) 50.1%) top right,linear-gradient(to top right,var(--color) 50%,rgba(0,0,0,0) 50.1%) bottom left;background-size:calc(var(--slant) + 1.3 * var(--border)) calc(var(--slant) + 1.3 * var(--border));background-repeat:no-repeat;box-shadow:0 0 0 200px inset var(--s, rgba(0, 0, 0, 0)),0 0 0 var(--border) inset var(--color);clip-path:polygon(0 0,calc(100% - var(--slant)) 0,100% var(--slant),100% 100%,var(--slant) 100%,0 calc(100% - var(--slant)));transition:color var(--t, .3s),background-size .3s}.form__btn:hover{background-size:100% 100%;color:#000;--t: .2s .1s}@media (max-width: 800px){.form{height:auto;flex-wrap:wrap;padding:1rem}.form__input{width:auto}}@font-face{src:url(/assets/Play-Regular-CKeI4xp0.ttf);font-family:play;font-weight:400}body{font-family:play;display:grid}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}.header h1{margin-top:0}.sort{display:flex;justify-content:center;align-items:center;height:3rem;gap:1rem}.sort_btn{--border: 5px;--slant: .7em;--color: #0f0d0dc6;padding:.4rem 1.2rem;border:none;cursor:pointer;font-weight:700;color:var(--color);background:linear-gradient(to bottom left,var(--color) 50%,rgba(0,0,0,0) 50.1%) top right,linear-gradient(to top right,var(--color) 50%,rgba(0,0,0,0) 50.1%) bottom left;background-size:calc(var(--slant) + 1.3 * var(--border)) calc(var(--slant) + 1.3 * var(--border));background-repeat:no-repeat;box-shadow:0 0 0 200px inset var(--s, rgba(0, 0, 0, 0)),0 0 0 var(--border) inset var(--color);clip-path:polygon(0 0,calc(100% - var(--slant)) 0,100% var(--slant),100% 100%,var(--slant) 100%,0 calc(100% - var(--slant)));transition:color var(--t, .3s),background-size .3s}.sort_btn:hover{background-size:100% 100%;color:#fff;--t: .2s .1s}.container-box{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;justify-items:center;align-content:center;padding-block:3rem;color:#000}.form-box{width:100%;margin-top:1rem}@media (max-width: 850px){.header{height:auto;flex-direction:column;gap:2rem}.container-box{font-size:.7rem;grid-template-columns:1fr}.sort__btns{gap:.4rem;padding:.3rem}}*{padding:0;margin:0;box-sizing:border-box}body{background-color:#f1f7ed;color:#000}h1{text-align:center;margin-top:1.4rem}
