body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body{height:100%}.clavid-header{background-color:#8c00c9;color:#faebd7;grid-area:header}.clavid-header-left{float:left;padding:5px}.clavid-header-right{float:right;margin-right:20px}.clavid-input:hover{background-color:#383838}.clavid-input:focus{background-color:#383838;outline:none}.clavid-input{color:#faebd7;background-color:#282828;border:4px solid #0e0e0e;border-right:0;border-bottom:0;border-radius:10px;padding:10px;margin:5px}.clavid-button:hover{background-color:#b817ff}.clavid-button{cursor:pointer;color:#faebd7;background-color:#8c00c9;border:4px solid #4C0069;border-left-width:1px;border-top-width:1px;border-radius:10px;padding:5px 15px;margin:5px 15px 5px 5px;position:relative;font-size:1.1em}.clavid-button:active{border-right-width:1px;border-bottom-width:1px;margin-left:8px;top:2px;left:2px}.clavid-header-link{cursor:pointer;color:#faebd7;text-decoration:none}.clavid-header-link:hover{text-decoration:underline}.clavid-mozaique{display:flex;flex-wrap:wrap;justify-content:center;-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll;background-color:#282828;border:4px solid #0e0e0e;border-right:0;border-bottom:0;border-radius:10px;margin:10px}.clavid-mozaique::-webkit-scrollbar{display:none}@media(orientation:landscape){.clavid-mozaique>div{width:48%}}@media(orientation:portrait){.clavid-mozaique>div{width:99%}}.clavid-videoitem{cursor:pointer;overflow:hidden;box-sizing:border-box;scrollbar-width:none;background-color:#2a2a2a;border:4px solid #0e0e0e;border-left-width:1px;border-top-width:1px;border-radius:10px;margin:10px 5px;display:grid;color:#faebd7;grid:"mignature title title" auto "mignature tag tag" 1fr "mignature duration date" auto / 45% 1fr auto}.clavid-videoitem-mignature{grid-area:mignature;box-sizing:border-box;width:100%;background-color:#000}.clavid-videoitem:hover{background-color:#383838}.clavid-videoitem:hover .clavid-videoitem-mignature{filter:brightness(1.15)}.clavid-tag-list{grid-area:tag;box-sizing:border-box;padding:2px 5px}.clavid-tag:hover{background-color:#383838}.clavid-tag:hover.matching{background-color:#b817ff}.clavid-tag{cursor:pointer;color:#faebd7;background-color:#282828;border:4px solid #0e0e0e;border-left-width:1px;border-top-width:1px;border-radius:7px;padding:2px;margin:2px;font-size:.6em}.clavid-tag.matching{background-color:#8c00c9;border-color:#4c0069}.clavid-duration{grid-area:duration;background-color:#0e0e0e;width:min-content;padding:2px 5px;border-top-right-radius:12px}.clavid-video-title{grid-area:title;font-size:1em;padding:2px 5px}.clavid-video-date{grid-area:date;font-size:.7em;background-color:#0e0e0e;box-sizing:border-box;padding:5px 10px;border-top-left-radius:12px}.hidden{display:none}.player-wrapper{grid-area:video;position:relative;padding-top:56.25%;background-color:#000}.react-player{position:absolute;top:0;left:0}:focus{outline:none}.clavid-recomendation{grid-area:recomendation;box-sizing:border-box;width:35vw;-ms-overflow-style:none;scrollbar-width:none;overflow:scroll;flex-direction:row;align-content:stretch;background-color:#282828;border:4px solid #0e0e0e;border-right:0;border-bottom:0;border-radius:10px;padding:5px;margin:10px}.clavid-recomendation::-webkit-scrollbar{display:none}@media(orientation:landscape){.clavid-recomendation{width:35vw}}@media(orientation:portrait){.clavid-recomendation{width:auto}}.clavid-description{grid-area:description;display:flex;box-sizing:border-box;min-height:15vh;-ms-overflow-style:none;scrollbar-width:none;overflow:auto;color:#faebd7;flex-direction:column;align-content:stretch;background-color:#282828;border:4px solid #0e0e0e;border-right:0;border-bottom:0;border-radius:10px;padding:5px;margin:10px}.clavid-description::-webkit-scrollbar{display:none}@media(orientation:landscape){.clavid-specontrols{margin-right:0}}.clavid-title{font-size:1.5em;font-weight:700;margin:0 0 5px 5px}.clavid-specontrols{grid-area:specontrols;display:flex;flex-direction:column;justify-content:center;align-items:center}@media(orientation:portrait){.clavid-specontrols{margin-right:5px}}.clavid-specontrols-button{cursor:pointer;color:#faebd7;background-color:#282828;border:4px solid #0e0e0e;border-left-width:1px;border-top-width:1px;border-radius:10px;padding:5px;position:relative;font-size:1.3em}.clavid-specontrols-button.toggled{background-color:#8c00c9;border:4px solid #4C0069;border-left-width:1px;border-top-width:1px}.clavid-specontrols-button:hover{background-color:#383838}.clavid-specontrols-button:hover.toggled{background-color:#b817ff}.clavid-specontrols-button:active{border-right-width:1px;border-bottom-width:1px;margin-top:3px;top:2px}.App{background-color:#181818;height:100vh;width:100vw;display:grid}@media(orientation:landscape){.App{grid:"header header header"auto "video specontrols recomendation"auto "description description recomendation"1fr / 1fr auto auto}}@media(orientation:portrait){.App{grid:"header header"auto "video specontrols"auto "description description"auto "recomendation recomendation"1fr / 1fr auto}}