.login-container{background-color:#fff;width:100%;max-width:400px;margin:50px auto 0;padding:20px;border-radius:5px;box-shadow:0 0 10px #0003;box-sizing:border-box}h1{margin-top:0}.form-group{margin-bottom:20px}label{display:block;margin-bottom:5px}input[type=email],input[type=password]{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box}button{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.or-separator{margin:20px 0;font-weight:700}.google-login-button{background-color:#dd4b39;color:#fff;border:none;border-radius:5px;padding:10px;width:100%;cursor:pointer}@media (max-width: 600px){.login-container{padding:10px}}.or-separator{margin:20px 0;font-weight:700;text-align:center;display:flex;justify-content:center}input{width:100%;padding:5px;margin-bottom:5px;border:1px solid #ccc;border-radius:5px}.App{font-family:sans-serif;background-color:#fff;overflow:hidden}.App-header{display:flex;align-items:center;justify-content:space-between;padding:20px;background-color:#fff;border-bottom:1px solid #ccc}.App-header img{width:150px;height:50px}.App-search{display:flex;align-items:center}.App-search input{padding:10px;border:1px solid #ccc;border-radius:4px;flex:1}.App-search button{padding:10px;background-color:red;color:#fff;border:none;border-radius:4px;cursor:pointer}.App-account{display:flex;align-items:center;cursor:pointer}.App-account img{width:30px;height:30px;border-radius:50%;margin-right:10px}.App-main{display:flex}.App-sidebar button{padding:10px;background-color:red;color:#fff;border:none;border-radius:4px;cursor:pointer;display:block;margin-bottom:10px}.App-videos{flex:1}.App-videos h2{font-size:24px;font-weight:700;margin-bottom:20px}.App-videos-filters{display:flex;justify-content:space-between;margin-bottom:20px}.App-videos-filters select{padding:10px;border:1px solid #ccc;border-radius:4px}.App-videos-gridy{display:flex;flex-wrap:wrap;justify-content:baseline;gap:5px;max-height:70vh;overflow-y:auto}@media (max-width: 900px){.App-sidebar{max-width:100%}}@media (max-width: 600px){.App-sidebar{padding:10px 5px}.App-subscription{flex-direction:column;align-items:flex-start}.App-subscription img{margin-right:0;margin-bottom:10px}}.faint-text{opacity:.5}.App-video{width:calc(33.33% - 10px);margin-bottom:20px;cursor:pointer;display:flex;flex-direction:column}.App-video img{width:100%;height:auto}.App-video-info{padding:10px;border:1px solid #ccc;border-radius:4px}.App-video-info .channel-details{display:flex;align-items:center}.App-video-info .channel-details .channel-avatar{border-radius:50%;width:50px;height:50px;margin-right:10px}.App-video-info h3{font-size:16px;font-weight:700;margin-bottom:5px}.App-video-info p{font-size:14px;margin-bottom:0}@media (max-width: 1200px){.App-video{width:calc(25% - 10px)}}@media (max-width: 900px){.App-video{width:calc(33.33% - 10px)}}@media (max-width: 600px){.App-video{width:calc(50% - 10px)}}@media (max-width: 400px){.App-video{width:100%}}.App-video{width:250px;height:300px;margin-bottom:20px;cursor:pointer;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:4px}.App-video img{width:100%;height:70%;object-fit:cover;border-top-left-radius:4px;border-top-right-radius:4px}.Sidebar-button{display:block;margin-bottom:10px}.App-sidebar{width:100%;max-width:250px;margin-right:20px;border-right:1px solid #ccc;padding:10px;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto}.App-sidebar h2{font-size:18px;font-weight:700;margin-bottom:10px}.App-sidebar ul{list-style:none;padding-left:20px}.App-sidebar li a{color:#000;text-decoration:none}.App-sidebar li a:hover{text-decoration:underline}.App-sidebar-button{padding:10px;background-color:red;color:#fff;border:none;border-radius:4px;cursor:pointer;display:block;margin-bottom:10px}.App-videos-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;max-height:70vh;overflow-y:auto}.App-subscriptions-list{max-height:30vh;overflow-y:auto}.App-subscription{display:flex;align-items:center;padding:10px;border:1px solid #ccc;border-radius:4px;margin-bottom:10px;overflow:hidden}.App-subscription img{width:50px;height:50px;border-radius:50%;margin-right:10px}.App-subscription-info{flex:1}.App-subscription-info h3{font-size:16px;margin-bottom:5px}.container{max-width:1200px;margin:0 auto;padding:20px}.video-container{max-width:800px;margin:0 auto}.video-frame{position:relative;width:100%;padding-top:56.25%;overflow:hidden}.video-player{position:absolute;width:100%;height:100%;top:0;left:0;bottom:0;right:0;outline:none}.channel-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding:10px;border:1px solid #ccc;border-radius:5px}.channel-avatar{width:50px;height:50px;border-radius:50%;margin-right:15px}.channel-details{display:flex;align-items:center}.buttons{display:flex;margin-top:10px}.subscribe-button,.download-button{margin-right:10px}.interactions{margin-bottom:20px}.stats span.faint{color:#777}.reaction-buttons{display:flex}.reaction-buttons button{padding:8px 20px;position:relative;display:flex;align-items:center;margin-right:10px}.reaction-buttons button:last-child{margin-right:0}.reaction-buttons button .reaction-text{flex:1}.reaction-buttons button .count{font-weight:700;opacity:.7}.video-description{margin-bottom:20px}.comments{margin-top:30px}.comment{display:flex;margin-bottom:15px}.user-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.new-comment{margin-top:15px;display:flex;align-items:center}.new-comment input{flex:1;margin-right:10px}.border{border:1px solid #ccc;border-radius:5px}.channel-info,.interactions,.video-description,.comments{border-bottom:none}.video-title h2{margin:0}.faint{color:#777}.tags-container{display:flex;flex-wrap:wrap;gap:10px}.tags-link{text-decoration:none;color:#333;border-bottom:2px solid blue;padding-bottom:2px;margin-right:10px}.comments-container{display:flex;flex-direction:column}.comment{display:flex;margin-bottom:20px}.comment-details{flex:1;max-width:80%}.faint-font{color:#999}@media (max-width: 768px){.comment{flex-direction:column}.comment-details{max-width:100%}}button{padding:8px 12px;background-color:tomato;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}button:hover{background-color:#ff3e27}.App-videos-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-height:70vh;overflow-y:auto}.App-videos-grid{display:flex;flex-wrap:wrap;justify-content:baseline;gap:20px;max-height:70vh;overflow-y:auto}.App-videos-gridy{display:flex;flex-wrap:wrap;justify-content:baseline;gap:20px;max-height:70vh;overflow-y:auto}.round-image-container{overflow:hidden;width:80px;height:80px;border-radius:50%;margin:0 auto}.round-image{width:100%;height:100%;object-fit:cover}*{margin:0;padding:0;box-sizing:border-box}.navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background-color:#fff;box-shadow:0 2px 5px #0000001a}.youtube-logo{font-size:24px;font-weight:700;color:red}.search-bar{width:300px;height:30px;border:1px solid #ccc;border-radius:5px;padding:5px}.btn-primary{background-color:red;color:#fff;border:none;border-radius:5px;padding:5px 10px;cursor:pointer}.round-image{width:40px;height:40px;border-radius:50%}.create-video-btn{background-color:red;color:#fff;border:none;border-radius:5px;padding:5px 15px;cursor:pointer}.channel-avatar{border-radius:50%;width:50px;height:50px;margin-right:10px}.channel-avatar:hover{transform:scale(1.1);transition:transform .3s ease}