*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;font-family:sans-serif}body{font-size:1.6rem}a{text-decoration:none;color:#5a5a5a}img{cursor:pointer}.flex-div{display:flex;align-items:center}nav{padding:1.6rem 2%;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;height:5.6rem}.nav-left .menu-icon{width:2.2rem;margin-right:2.5rem}.nav-left .logo{width:10rem}.nav-right img{width:2.5rem;margin-right:2.5rem}.nav-right .user-icon{width:3.5rem;border-radius:50%}.nav-right .create-btn{display:flex;background:#f2f2f2;padding:1rem 1.2rem;border-radius:1.8rem;margin-right:2.5rem;cursor:pointer}.create-btn:hover{background:#e5e5e5}.create-btn img{margin-right:1rem;width:2rem}.create-btn span{font-weight:600}@media (max-width: 70rem){.nav-middle .search-box{max-width:25rem}.nav-middle .search-box input{font-size:1.4rem;padding:.4rem}}@media (max-width: 48rem){.nav-middle .search-box{max-width:18rem}.nav-middle .search-box input{font-size:1.2rem;padding:.3rem}}.nav-middle .search-box{border:1px solid #ccc;margin-right:1.5rem;padding:.8rem 1.2rem;border-radius:2.5rem}.nav-middle .search-box input{ouline:0;border:0;width:40rem;background:transparent}.search-box img{width:1.5rem}.search-box button{border:none;outline:none;background:none}.search-box input:focus{border:none;outline:none}.nav-middle .voice-search{background:#f2f2f2;padding:1rem;border-radius:50%;cursor:pointer}.voice-search:hover{background:#e5e5e5}.nav-middle .voice-search img{width:2rem}.feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-column-gap:16px;grid-row-gap:30px;margin-top:15px}.spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar{background:#fff;width:15%;height:100vh;position:fixed;top:0;padding-left:1%;padding-top:8rem;box-sizing:border-box}.sidebar:hover{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ccc transparent}.shortcut-links img{width:2rem;margin-right:2rem;font-siz}.side-link{display:flex;align-items:center;margin-bottom:2rem;flex-wrap:wrap;cursor:pointer;padding:0 1rem}.sidebar hr{border:0;height:1px;background:#ccc;width:85%}.subscribed-list h3{font-size:13px;margin:2rem 0;color:#5a5a5a}.subscribed-list img{width:2.5rem;border-radius:50%;margin-right:2rem}.small-sidebar{width:5%}.small-sidebar p,.small-sidebar h3{display:none}.small-sidebar hr{width:50%;margin-bottom:2.5rem}.side-link.active,.side-link:hover{background:#f8f6f6;width:85%;border-radius:.5rem;padding:.6rem 1rem;transition:.2s}.container{background:#fff;padding-left:17%;padding-right:2%;padding-top:1rem;padding-bottom:2rem}.large-container{padding-left:7%}@media (max-width: 1366px){.container{padding-left:19%;padding-right:1%}}.recommended{flex-basis:30%}.side-video-list{display:flex;justify-content:space-between;margin-bottom:.8rem}.side-video-list img{flex-basis:49%;width:45%;border-radius:1rem}.vid-info{flex-basis:49%}.vid-info h4{font-size:1.4rem;margin-bottom:.5rem}.vid-info p{color:#606060;font-size:1.2rem;margin-bottom:.5rem}.search-feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-column-gap:16px;grid-row-gap:30px;margin-top:15px;padding:0 2rem}.card img{width:100%;border-radius:5px}.card h2{font-size:1.6rem;font-weight:600;color:#0f0f0f;margin:5px 0}.card h3{font-size:1.4rem;font-weight:500;color:#606060;margin:6px 0}.card p{font-size:1.4rem}.play-container{background:#fff;padding-left:2%;padding-right:2%;padding-top:2rem;padding-bottom:2rem;display:flex;justify-content:space-between;flex-wrap:wrap}.play-video{flex-basis:69%}.play-video iframe{width:100%;height:35vw;border-radius:1.5rem}.play-video h3{margin-top:1rem;font-weight:600;font-size:2.2rem}.play-video-info{display:flex;align-items:center;flex-wrap:wrap;font-size:1.4rem;color:#000;font-weight:600}.play-video hr{border:0;height:1px;background:#ccc;margin:1rem 0}.publisher-controller{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:1rem}.publisher{display:flex;align-items:center;margin-top:1rem}.publisher div{line-height:1.8rem;margin-right:3rem}.publisher img{width:4rem;border-radius:50%;margin-right:1.5rem}.publisher div p{color:#000;font-weight:600;font-size:1.8rem}.publisher div span{color:#606060;font-size:1.3rem}.publisher button{background:#000;color:#fff;padding:1.2rem 2rem;border:0;outline:0;border-radius:2rem;cursor:pointer;font-weight:600}.controller{display:flex;align-items:center;flex-wrap:wrap;margin-top:1rem;gap:1rem}.controller span{display:inline-flex;align-items:center;margin-left:1.5rem}.controller img{font-size:2rem;width:2rem;margin-right:1rem}.controller div{display:flex;align-items:center;cursor:pointer;background:#f2f2f2}.like-btn{display:flex;align-items:center;padding:1rem .8rem 1rem 0rem;border-radius:1.8rem}.like-btn span{display:flex;align-items:center;cursor:pointer}.share-btn{padding:1rem .8rem 1rem 0rem;border-radius:1.8rem}.divider{height:100%;color:#ccc}.controller div:hover{background-color:#e5e5e5;transition:background-color .3s ease,opacity .3s ease}.options-btn{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f2f2f2;cursor:pointer;transition:background-color .3s ease}.options-btn img{object-fit:contain;padding-right:.5rem}.vid-description{margin:1.5rem 0}.vid-description p{font-size:1.4rem;margin-bottom:.5rem;color:#606060}.vid-description p.collapsed{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;max-height:3rem;line-height:1.5rem}.vid-description p.expanded{display:block}.description{background:#f2f2f2;padding:1rem;border-radius:1rem}.toggle-description{background:none;border:none;color:#000;font-weight:600;cursor:pointer;margin-top:.5rem}.vid-description h4{font-size:2rem;color:#000;margin-top:1.5rem}.comment{display:flex;align-items:flex-start;margin:2rem 0}.comment img{width:3.5rem;border-radius:50%;margin-right:1.5rem}.comment h3{font-size:1.4rem;margin-bottom:.2rem}.comment span{font-size:1.2rem;color:#606060;font-weight:500;margin-left:.8rem}.comment-action{display:flex;align-items:center;margin:.8rem 0;font-size:1.4rem}.comment-action img{border-radius:0;width:2rem;margin-right:.5rem}.comment-action span{margin-right:2rem;color:#606060}