.app{margin-top:28px;height:calc(100vh - 28px);color:#fff;text-align:center;background-size:cover}button,input{font-family:inherit}.app-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:2px 10px;height:24px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;color:#fff;text-align:center;font-size:16px}.header-container{flex-grow:1;width:33%}#header-container-ghlink{text-align:left}#header-container-homelink{text-align:center}#header-container-user{display:flex;text-align:right;justify-content:right;justify-items:right}.link{color:#fff;text-decoration:none}.link:hover{text-decoration:underline}#github-link{float:left;display:flex;align-items:center}#github-icon{padding-right:2px}#home{height:100%;padding:10px;overflow:auto}#home-control-bar{justify-content:space-between}.control-container{width:33%;justify-content:center;align-items:center}#sort-select-box{width:33%}.control-container button{height:45px;width:200px;font-size:26px;transition-duration:.1s;border:none;border-radius:8px}.control-container button:hover{transition-duration:.1s;background-color:#23aca0}.clip-rows{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.clip-card-container{margin:10px;height:400px;width:400px;overflow:hidden;border-radius:4px}.clip-link,.clip-card{position:relative;height:100%;width:100%;background-color:#000}.clip-card img{z-index:1;position:absolute;left:0;width:100%;height:100%;object-fit:scale-down}.clip-card-body{z-index:2;position:absolute;height:20%;width:100%;top:0;background:linear-gradient(180deg,#fff,#fff 80%,#0000);display:flex;flex-direction:row;font-size:22px}.clip-title{position:absolute;margin:5px 15px;top:0;left:0}.clip-stats{position:absolute;margin:5px 15px;top:35px;left:0;font-size:14px;color:#555}.time-since-upload{z-index:2;position:absolute;height:30px;width:100px;left:-3px;bottom:-3px;background-color:#000;border-radius:4px;display:flex;flex-direction:column;justify-content:center;color:#fff;text-align:center;font-size:10px}.clip-duration{z-index:2;position:absolute;height:30px;width:70px;right:-3px;bottom:-3px;background-color:#000;border-radius:4px;display:flex;flex-direction:column;justify-content:center;color:#fff;text-align:center;font-size:16px}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move;box-shadow:0 0 0 9999em #00000080}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}.ReactCrop__crop-selection:focus{outline:none;border-color:#00f;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle:after{position:absolute;content:"";display:block;width:10px;height:10px;background-color:#0003;border:1px solid rgba(255,255,255,.7);outline:1px solid transparent}.ReactCrop__drag-handle:focus:after{border-color:#00f;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw:after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n:after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne:after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e:after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se:after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s:after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw:after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w:after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}#aspect-ratio-wrapper{position:relative;padding-top:56.25%}#paused-button{height:100px;width:100px;z-index:1;position:absolute;font-size:128px;top:calc(50% - 64px);left:calc(50% - 64px)}#video{position:absolute;top:0;left:0;background-color:#000}#controller{width:100%;border-radius:0 0 4px 4px}#controller-stack{display:flex;margin:10px}#slider-stack{flex-grow:1;display:flex;font-size:14px}#slider-container{flex-grow:1;display:grid}#seeker{grid-column:1;grid-row:1}#volume-slider{width:50px}#player{height:100%;display:flex;flex-direction:row}#clip-container{width:calc(75% - 40px);margin:10px;border-radius:4px;display:flex;flex-direction:column}#title{padding:0 0 0 20px;text-align:left}#sidebar{height:calc(100% - 20px);width:25%;margin:10px;display:flex;flex-direction:column}#details-container{max-height:30%;padding:10px;color:#000;border-radius:4px;font-size:16px}#description-container{max-height:100px;padding:10px;color:#000;white-space:pre-line;border-radius:4px;text-align:left;font-size:14px;overflow:auto}#comments-container{min-height:calc(70% - 50px);padding:10px;margin:10px 0 0;color:#000;flex:1;border-radius:4px;text-align:center;font-size:16px}@media only screen and (max-width: 1024px){#player{flex-direction:column}#clip-container,#sidebar{width:calc(100% - 20px)}#details-container{max-height:100%}}#comments-box{height:100%;margin:10px 0 0;border-radius:4px;overflow:auto}#add-comment-container{height:140px;min-height:100px;width:calc(100% - 8px);display:flex;flex-direction:column;align-items:center;padding:4px}#add-comment-button{height:70px;width:70%;border-radius:8px;margin:10px 0;background-color:#23aca0;color:#374153;font-size:32px}#add-comment-button:hover:enabled{transition-duration:.1s;background-color:#21cea3;color:#37635a}#adding-comment-container{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#comment-box{width:95%;height:calc(70% - 6px);margin-block:3px}#adding-comment-control{width:95%;height:calc(30% - 6px);display:flex;flex-direction:row;justify-content:right;padding:3px}#adding-comment-control button{width:20%;margin:0 4px}.comment{color:#eee6ed}.comment .header{padding:4px 8px;font-weight:500}.comment .options{height:22px;display:flex;flex-direction:row;justify-content:right}.comment .options button{height:22px;background-color:#37635a;font-size:20px}.comment .options button:hover{background-color:#37635a;color:#67b1a8;transition-duration:.1s}.comment .gear{width:22px;padding:0;margin:0 4px}.comment .options-buttons{display:flex;flex-direction:row;justify-content:right}.comment .close{width:22px;padding:0;margin:0 4px 0 0}.comment .posted-at{margin-left:10px;font-weight:200}.comment .separator{margin:2px 12px;border-top:0px}.comment .text{padding:8px 20px 10px;text-align:left;white-space:pre-line;font-weight:350;color:#eee6ed}#file-selector{margin:20px;display:flex;justify-content:center}#file-selector-form{height:26vh;width:30vw;max-width:100%;text-align:center;position:relative;border-style:dashed;transition:.25s ease;border-color:#282c34;background-color:#f8fafc;border-width:4px;border-radius:1rem}#file-selector-form:hover{transition:.25s ease;background-color:#21cea3}#file-selector-input{display:none}#drag-drop-label{height:100%;display:flex;align-items:center;justify-content:center;color:#000;border-width:2px;border-radius:1rem;font-size:28px}#click-label{font-size:16px}#file-selector-button{position:absolute;height:100%;width:100%;cursor:pointer;border:none;background-color:transparent;width:calc(100% + 8px);height:calc(100% + 8px);border-radius:1rem;top:-4px;left:-4px}#drag-file-element{position:absolute;background-color:#21cea3;transition:.25s ease;opacity:.35;width:calc(100% + 8px);height:calc(100% + 8px);border-radius:1rem;top:-4px;left:-4px;bottom:0;right:0}#thumbnail-container{border-radius:4px;padding:10px;justify-content:center;align-items:center}#thumbnail-container button{width:100%;padding:4px}#thumbnail-button-container{margin:5px 0 0;width:100%}#capture-frame-button{height:100%}#thumbnail-filename-field{background-color:#949494;padding:2px;margin:5px 0}#thumbnail-filename-field::placeholder{opacity:1}#cropping-overlay{z-index:2;position:fixed;background-color:#000000e6;width:100vw;height:100vh;padding:0;margin:0;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#cropping-overlay-element-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}#cropping-close-button{position:absolute;top:2%;left:90%;height:80px;width:80px;max-height:80px;max-width:80px;border-radius:50%}#cropping-button-grid-container{width:100%;display:flex;justify-content:center;margin:20px 0}#cropping-button-grid-container button{height:30px;font-size:20px}#cropping-button-grid{width:50%}.react-crop{max-height:800px}#crop-instruct{position:absolute;height:30px;left:0;right:0;margin-left:auto;margin-right:auto;top:calc(50% - 15px);background-color:#00000080;color:#fff}#cropping-canvas{max-height:800px}#form-container{max-width:100%;height:calc(85% - 26px)}#form-fields-container{max-width:100%}#submit-button{height:calc(15% - 10px);width:100%;font-size:32px}#submit-button{width:100%;font-size:32px;border:none;outline:none;color:#fff;background:#111;cursor:pointer;position:relative;z-index:0;border-radius:10px}#submit-button:before{content:"";background:linear-gradient(45deg,#40ff50,#40f1d4,#00b7ff,#3844eb,#d400ff,#3844eb,#00b7ff,#40f1d4);position:absolute;top:-2px;left:-2px;background-size:400%;z-index:-1;filter:blur(5px);width:calc(100% + 4px);height:calc(100% + 4px);animation:glowing 20s linear infinite;opacity:0;transition:opacity .3s ease-in-out;border-radius:10px}#submit-button:active{color:#000}#submit-button:active:after{background:transparent}#submit-button:hover:before{opacity:1}#submit-button:after{z-index:-1;content:"";position:absolute;width:100%;height:100%;background:#111;left:0;top:0;border-radius:10px}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}#previewer{height:100%;display:flex;flex-direction:row}#video-component{width:calc(75% - 40px);margin:10px;border-radius:4px;display:flex;flex-direction:column}#clip-details-form{height:calc(100% - 20px);width:25%;margin:10px;display:flex;flex-direction:column;font-size:20px}#trimmer{grid-column:1;grid-row:1}#upload-progress{height:100%;align-items:center}#upload-progress-subchild{display:flex;flex-direction:column;justify-content:center;align-items:center;height:600px;width:60%;min-width:620px;background-color:#23aca0;color:#000}#info-line{margin:10px}#upload-log-container{width:calc(100% - 40px);flex:1;margin:0 10px;border-radius:2px;background-color:#418378;overflow-y:auto}#upload-log-lines-container{display:flex;flex-direction:column}.upload-log-line-icon{width:40px;display:flex;justify-content:center}.upload-log-line{margin:5px;height:24px;color:#3b3b3b;float:left;display:flex;align-items:center;text-align:left}#upload-log-current-line{bottom:0%;color:#000;font-weight:700}#wrapup-buttons{width:640px;display:flex}.wrapup-button-link{width:300px;height:50px;margin:10px;border:none;border-radius:8px}.wrapup-button{height:101%;width:101%;color:#000;font-size:26px;transition-duration:.1s;border:none;border-radius:8px}#go-clip:hover:enabled,#go-home:hover:enabled{background-color:#418378}.wrapup-button:disabled{border:1px solid #999999;background-color:#c4c4c4;color:#858585}#uploader{height:100%}button{color:#272727;border:0px;border-radius:2px;cursor:pointer;width:max-content;transition:.25s ease}button:hover:enabled{background-color:#23aca0}button:hover:disabled{cursor:default}@font-face{font-family:NotoSansMono;src:local("NotoSansMono"),url(/assets/NotoSansMono-xFPL79Q2.ttf) format("truetype")}body{margin:0;font-family:NotoSansMono;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#374153}