body{font-family:sans-serif;line-height:1.6}.app{display:flex;gap:2rem}.overlay{position:fixed;height:100vh;width:100vw;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1}a{color:inherit;text-decoration:none}.nav{margin:2rem;display:flex;flex-direction:column;gap:2rem;min-width:10%}.nav>a{display:flex;align-items:center;gap:10px;font-size:larger}.active{color:#509ecf;font-weight:700}.categories{flex:1}.categories-container{display:flex;flex-wrap:wrap;gap:2rem}.category-card{display:flex;flex-direction:column;gap:10px}.video-listing{flex:1}.video-container{display:flex;flex-wrap:wrap;gap:1rem}.video-card{display:flex;flex-direction:column;gap:10px;position:relative}.video-card{width:300px;cursor:pointer}.video-info{display:flex;gap:5px}.profile-pic{height:40px;width:40px;border-radius:100%}.watch-later-cta{position:absolute;right:0;color:#509ecf;background-color:#fff;padding:5px;border-bottom-left-radius:15px;z-index:2;cursor:pointer}.single-video-container{flex:1}.video-wrapper{display:flex;flex-direction:column}.video-details{display:flex;justify-content:space-between}.video-details>*{display:flex;align-items:center;gap:15px}.video-details svg{cursor:pointer}.single-video-container hr{margin:20px 0}.video-page{display:flex;gap:1rem;margin-top:1rem}.suggestion-vid h4{margin-top:0}.suggestion-vid img{width:200px}.horizontal-card{display:flex;margin-bottom:1rem;gap:1rem;color:#509ecf}.playlist-btn{position:relative}.notes-container{display:flex;flex-direction:column}.note{display:flex;justify-content:space-between}.note svg{margin-left:1rem;cursor:pointer}.note-actions{position:relative}.addToPlaylistModal{position:absolute;right:0;box-shadow:#959da533 0 8px 24px;padding:10px;background:white}.addToPlaylistModal>form{display:flex;flex-direction:column;gap:1rem}.addToPlaylistModal>form>button{padding:5px 10px;background:#509ecf;border:none;color:#fff;border-radius:10px;cursor:pointer}.playlist-name{cursor:pointer}.addNoteModal{position:absolute;right:0;box-shadow:#959da533 0 8px 24px;padding:10px;background:white}.addNoteModal>form>button{padding:5px 10px;background:#509ecf;border:none;color:#fff;border-radius:10px;cursor:pointer}.addNoteModal>form{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.addNoteModal>form>input{padding:5px}#editNoteModal{top:50%;left:50%;transform:translate(-50%,-50%);width:30rem}.watch-later-container{display:flex;flex-wrap:wrap;gap:1rem}.explore{flex:1}.search{width:90%;text-align:center;padding:10px;border-radius:1rem;border:none;box-shadow:#959da533 0 8px 24px;font-weight:bolder}.explore-vid-container{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}.playlist{flex:1}.close-btn{position:absolute;top:3px;right:3px;margin:0;line-height:1;cursor:pointer}.playlist-container{display:flex;gap:1rem;flex-wrap:wrap}.add-playlist{display:flex;align-items:center;justify-content:center;width:200px;height:200px}.add-playlist svg{cursor:pointer}.addPlaylistModal{z-index:2;position:absolute;background-color:#fff;padding:1rem;top:40%;left:50%;transform:translate(-50%,-50%);border-radius:1rem;min-width:20rem}.addPlaylistModal>form{display:flex;flex-direction:column;gap:1rem}.addPlaylistModal>form>input{padding:10px}.addPlaylistModal>form>button{padding:10px 20px;background:#509ecf;border:none;color:#fff;border-radius:10px;cursor:pointer}