.videos{--logo-size:120px;--video-width:320px;--video-height:240px;flex-direction:column;align-items:center;width:100%;height:100vh;max-height:-webkit-fill-available;display:flex}@media only screen and (max-width:1100px){.videos{--logo-size:80px;height:100%}}@media screen and (max-height:940px){.videos{--logo-size:80px}}@media only screen and (min-width:2000px){.videos{--video-width:480px;--video-height:320px}}.videos .logo{height:var(--logo-size);filter:drop-shadow(2px 2px 0px var(--color-terminal-green-50));opacity:.75;margin:auto auto 24px;padding:16px}.videos .logo img{width:auto;height:100%}.videos .logo:hover{opacity:1}.videos .grid{grid-template-columns:repeat(2,var(--video-width));gap:24px;margin:auto;display:grid}@media only screen and (max-width:800px){.videos .grid{grid-template-columns:repeat(1,var(--video-width))}}@media only screen and (min-width:2000px){.videos .grid{gap:48px}}.videos .grid .video{cursor:pointer;border:2px solid var(--color-terminal-green-50);box-shadow:4px 4px 0 var(--color-terminal-green-25);position:relative;overflow:hidden}@media only screen and (max-width:1100px){.videos .grid .video{border:2px solid var(--color-terminal-green);box-shadow:4px 4px 0 var(--color-terminal-green-50)}}.videos .grid .video:hover{border:2px solid var(--color-terminal-green);box-shadow:4px 4px 0 var(--color-terminal-green-50)}.videos .grid .video:hover .static,.videos .grid .video:hover .preview{filter:none}.videos .video:hover .header .title{color:var(--color-white)}.videos .grid .video .static{width:var(--video-width);height:var(--video-height);object-fit:fill;pointer-events:none;filter:brightness(.75)grayscale(.25);opacity:0;position:relative}.videos .grid .video .static.show{opacity:1;z-index:1}.videos .grid .video .preview{width:var(--video-width);height:calc(var(--video-height) + 8px);object-fit:cover;filter:grayscale();z-index:0;position:absolute;top:0;left:0;translate:0 21px}.videos .video .header{background-color:var(--color-terminal-green-5);border-bottom:1px solid var(--color-terminal-green-50);align-items:center;padding:4px;font-size:12px;line-height:1;display:flex}.videos .video .header .status{color:var(--color-terminal-green);margin-left:auto}.videos .video .header .title{color:var(--color-off-white)}.videos .video .header .title span{color:var(--color-orange)}.videos .video .videoFooter{color:color-mix(in srgb,var(--color-red),transparent 50%);border-top:1px solid var(--color-terminal-green-50);text-shadow:2px 2px 0 var(--color-accent-black);background-color:color-mix(in srgb,var(--color-terminal-green),var(--color-black)98%);z-index:1;flex-direction:row;align-items:center;padding:4px;font-size:12px;line-height:1;display:flex;position:relative}.videos .video .videoFooter .timestamp{color:var(--color-off-white);text-align:right;width:80px;margin-left:auto}.videos .video .videoFooter .percent{color:var(--color-off-white);opacity:.5;margin-left:8px}@media only screen and (min-width:2000px){.videos .video .header,.videos .video .videoFooter{font-size:14px}}.videoPlayer{background-color:var(--color-black-50);z-index:3;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;top:50%;left:50%;translate:-50% -50%}.videoPlayer .header{border:2px solid var(--color-terminal-green);background-color:color-mix(in srgb,var(--color-terminal-green)10%,var(--color-black));color:var(--color-terminal-green);width:560px;height:24px;box-shadow:4px 4px 0 var(--color-terminal-green-50);border-bottom:0;align-items:center;display:flex}.videoPlayer .header span{padding:2px 4px}.videoPlayer .header .close{all:unset;cursor:pointer;text-transform:uppercase;color:var(--color-white);text-shadow:2px 2px 0 var(--color-terminal-green-25);margin-left:auto}.videoPlayer .header .close:hover{background-color:var(--color-off-white-10)}.videoPlayer .header .close:before{content:"[ ";color:var(--color-red);text-shadow:2px 2px 0 var(--color-dark-red)}.videoPlayer .header .close:after{content:" ]";color:var(--color-red);text-shadow:2px 2px 0 var(--color-dark-red)}.videoPlayer iframe{border:2px solid var(--color-terminal-green);box-shadow:4px 4px 0 var(--color-terminal-green-50)}@media only screen and (max-width:1100px){.videoPlayer .header{background-color:color-mix(in srgb,var(--color-terminal-green)10%,var(--color-black));width:95vw}.videoPlayer iframe{width:95vw}}.videoPlayerBackdrop{z-index:2;background-color:#0000;width:100%;height:100%;position:fixed;top:0;left:0}
