:root{--color-darkest: #030712;--color-dark: #050c20;--color-dark2: #0d172b;--color-medium: #152238;--color-light: #81a0b4;--color-white: #eff4f8;--color-highlight: #7bdee6;--color-highlight-darker: #3099b1;--color-highlight2: #ff8f71;--color-highlight2-darker: #d35137;--color-logo2: #c1f2f7;background-color:var(--color-dark);color:var(--color-white);font-family:Sora,sans-serif;font-weight:400;line-height:1;--button-border-rad: 6px}#root{margin:0 auto;text-align:center}a{font-weight:500;color:var(--color-highlight);text-decoration:inherit}a:hover{color:var(--color-highlight-darker)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-family:inherit;cursor:pointer;transition:border-color .25s;background-color:var(--color-highlight);color:var(--color-dark);font-weight:600;transition:.2s ease-in}button:hover{background-color:var(--color-highlight-darker)}.content-page{padding:100px 0 0;width:10v0w;display:flex}footer{height:20em}.landing-page-container{text-align:center;padding:40px}.landing-page-container{text-align:center;padding:0;position:relative;overflow:hidden;height:100vh;width:100vw}.username-input{display:flex;gap:.8em;margin:2em 0 4em}.landing-page-container input{border-radius:6px;outline:none;border:none;flex:3}.landing-page-container button{border:none;background-color:var(--color-highlight);color:var(--color-dark);flex:1}.landing-page-container button:hover{background-color:var(--color-highlight-darker)}.input-field{padding:.5em .7em;font-size:1.4em}.background-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-1;transform:translate(-50%,-50%);object-fit:cover;opacity:.3;filter:hue-rotate(-15deg) saturate(.7)}.landing-content{position:relative;z-index:1;text-align:center;width:50%;min-width:400px;margin:12vh auto 0;padding:40px}.landing-content p{margin-bottom:6em}#video-list-container{display:flex;flex-direction:column;gap:2em;margin-top:3em;padding:0 1em}.list-page-container{padding:2em;margin:0 auto;width:100%;max-width:900px;display:flex;flex-direction:column}.list-page-container h1{max-width:70%;margin:0 auto;padding:0 0 1em;line-height:1.4em}.listed-video{display:flex;height:20vw;min-width:400px;transition:.3s ease-in-out}.listed-video:hover{cursor:pointer;transform:scale(1.03)}.listed-video:hover h2,.listed-video:hover h3,.listed-video:hover h4{color:var(--color-light)}.info-panel{flex-grow:1;text-align:left}.info-panel h2,.info-panel h3,.info-panel h4{padding-left:6%;margin:.5em 0;font-weight:400;transition:.3s ease-in}.info-panel h2{margin-top:.6em;color:var(--color-white);font-weight:700;font-size:1.3em}.info-panel h3{color:var(--color-light);font-size:.9em;margin-bottom:1.4em}.info-panel h4{color:var(--color-white);font-size:.9em}.video-thumb{background-color:var(--color-light);border-radius:8px;aspect-ratio:3/2;height:100%;background-image:url(./thumbnail.png);background-position:center;background-size:cover}#vid-list-buttons{display:flex;justify-content:space-between;gap:1em;position:sticky;top:4em;background-color:var(--color-dark);z-index:300;padding:2em 1em}#vid-list-buttons button{flex-grow:1;border-radius:var(--button-border-rad);background-color:transparent;outline:3px solid var(--color-highlight);color:var(--color-highlight)}#vid-list-buttons button:hover{background-color:var(--color-highlight-darker);color:var(--color-dark);outline:3px solid var(--color-highlight-darker)}#vid-list-buttons .filter-btn{background-color:var(--color-light);flex:.2;outline:3px solid var(--color-light);color:var(--color-dark)}#vid-list-buttons .active-vid-btn{background-color:var(--color-highlight);color:var(--color-dark)}.watch-container{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;overflow-y:hidden;overflow-x:hidden;gap:1em}.watch-container video{width:100%;margin-top:5em;aspect-ratio:16/9;object-fit:cover;background-color:var(--color-medium);border-radius:8px}.left-pane,.right-pane{flex:1;overflow-y:scroll;padding:30px;text-align:left;scrollbar-width:none;-ms-overflow-style:none}.left-pane::-webkit-scrollbar,.right-pane::-webkit-scrollbar{display:none}.left-pane{flex:1.6}.existing-comments{display:flex;flex-direction:column;gap:.4em;margin-top:.4em;margin-bottom:2em;background-color:var(--color-dark2);padding:.6em;border-radius:12px;font-size:.8em}.single-comment{background-color:var(--color-medium);padding:1em;border-radius:8px;display:flex;align-items:center}.single-comment p{margin:0}.comment-content{flex:1;flex-grow:1}.comment-username{color:var(--color-light);padding-bottom:.5em}.comment-text{color:var(--color-white);font-size:1em}.comment-like{width:min-content;cursor:pointer}.comment-like i{color:var(--color-light);opacity:.5;transition:.1s ease-out}.comment-like .active-like{color:var(--color-highlight2);opacity:1}.watch-container h2{font-size:1.8em;font-weight:800;margin:.5em 0 .2em}.watch-container h3{font-size:1.2em;font-weight:500;margin:.4em 0;color:var(--color-light)}.watch-container .left-pane p{font-size:.9em;font-weight:300;margin:1.2em 0}.watch-container .right-pane h2{font-size:1.4em;font-weight:600;margin:1.4em 0 1em}.new-comment-container{position:sticky;bottom:-3em;display:flex;padding:1.8em 0 3.6em;background-color:var(--color-dark);z-index:200;gap:.5em;flex:1}.new-comment-container input{flex:1;padding:10px;background-color:var(--color-medium);border-radius:8px;border:none;outline:none}.new-comment-container input::placeholder{color:var(--color-white);opacity:.25}.new-comment-container button{padding:5px 10px;border-radius:8px;border:none}.sticky-comment-header{position:sticky;top:0;background-color:var(--color-dark);padding:5em 0 .01em;z-index:100}.custom-video-controls{position:absolute;bottom:0;left:0;right:0;justify-content:center;align-items:center;gap:10px;background:linear-gradient(to top,#000c,#0000);padding:6px 8px 8px;transition:.1s ease-in;display:flex;flex-direction:column;opacity:0}.video-container:hover .custom-video-controls{opacity:1}.upper-controls,.lower-controls{width:100%}.upper-controls{display:flex;align-items:center}.custom-video-controls button,.vid-icon{background-color:transparent;color:var(--color-highlight);font-size:1.1em}.custom-video-controls input{-webkit-appearance:none;border-radius:0;outline:none;margin:0;background-color:#ffffff3a;cursor:pointer}.custom-video-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--color-highlight);border-radius:50%;border:none;opacity:1}.upper-controls input{width:100%;height:5px;outline:none;margin:0}.lower-controls{display:flex;align-items:center;transition:.2s ease-in-out;justify-content:space-between;padding:4px 0 8px}.lower-controls button{height:1.4em;padding:0;aspect-ratio:1.5}.lower-controls select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;padding:0 12px;color:var(--color-highlight);border-radius:4px;font-size:1rem;cursor:pointer;font-weight:600;outline:none}.lower-controls select:hover{color:var(--color-highlight-darker)}.lower-controls select option{background-color:var(--color-dark2);outline:none;border:none;color:var(--color-highlight)}.lower-controls select option:hover{background-color:var(--color-highlight)!important;color:var(--color-dark)!important}.video-container .lower-controls input{width:80%;height:5px;border-radius:100px}.volume-label{display:flex;gap:.5em;align-items:center}@media (max-width: 768px){.watch-container{flex-direction:column;overflow-y:scroll;overflow-x:hidden}.left-pane,.right-pane{display:block;overflow-y:visible;padding-bottom:0}.sticky-comment-header{position:relative;padding:0}}nav{display:flex;align-items:center;justify-content:space-around;position:fixed;top:0;left:0;width:100%;padding:1.2em 0;background-color:var(--color-darkest);z-index:500}#logo-button{font-weight:700;font-size:1.2rem;transition:.2s ease-in}#logo-button span{transition:.2s ease-in}#logo-button:hover span{color:var(--color-highlight-darker)!important}#logo-button:hover,#create-video-button:hover{transform:scale(1.1)}#profile-button{font-size:1.7rem;color:var(--color-light);transition:.2s ease-in}#profile-button:hover{color:var(--color-highlight);transform:scale(1.1)}.nav-button{cursor:pointer;padding:0 20px}.center-container{flex:.8;display:flex;justify-content:center}#search-bar{width:100%;max-width:800px;height:2.5em;border-radius:300px;border:none;background-color:#ffffff1f}#search-bar input{width:94%;height:100%;background-color:transparent;border:none;outline:none;font-size:1rem;color:var(--color-white);opacity:1}#search-bar input::placeholder{color:var(--color-white);opacity:.25}#create-video-button{display:flex;align-items:center;color:var(--color-light);transition:.2s ease-in}#create-video-button:hover{color:var(--color-highlight)!important}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1d1d1da8;display:flex;justify-content:center;align-items:center;z-index:2000}.popup-content{background:var(--color-medium);padding:30px;border-radius:20px;text-align:center;max-width:300px;box-shadow:0 0 1000px #07080ab0}.popup-content p{margin-bottom:20px;color:var(--color-light);line-height:1.3em;padding:0 .6em}.popup-content button{background-color:var(--color-highlight);width:100%}.create-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#1d1d1da8;justify-content:center;align-items:center;z-index:2000;display:flex;flex-direction:column}.create-popup-content{background:var(--color-medium);padding:30px;border-radius:20px;text-align:center;max-width:600px;box-shadow:0 0 1000px #07080ab0}.create-popup-content p{margin-bottom:20px;color:var(--color-light);line-height:1.3em;padding:0 .6em}#popup-message{color:var(--color-white);font-size:1.8em;margin:1.2em 0}.create-popup-content button{background-color:var(--color-highlight);width:100%}.create-popup-overlay button{border:var(--color-highlight) 4px solid;margin:2.4em .8em 0;transition:.2s ease-in;font-size:1.4em;padding:.4em;font-weight:700;max-width:200px}.create-popup-overlay button:hover{background-color:var(--color-highlight-darker);border:var(--color-highlight-darker) 4px solid;color:var(--color-dark);transform:scale(1.05)}.create-popup-overlay .cancel-button{background-color:transparent;color:var(--color-highlight);margin-top:1em}.create-popup-overlay input,textarea{width:90%;background-color:var(--color-dark2);border-radius:8px;padding:12px 16px;margin:.4em auto;border:none;outline:none;font-size:1rem;color:var(--color-white);opacity:1;font-family:inherit;outline:var(--color-dark) 4px solid}.create-popup-overlay textarea{resize:"vertical"}.create-popup-overlay input::placeholder,textarea::placeholder{color:var(--color-light)}.create-popup-overlay .description{height:5em;white-space:wrap}