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