body{color:#fff;background-color:#181818;margin:0;padding:0;font-family:Open Sans,sans-serif}header{background-color:#202020;justify-content:space-between;align-items:center;padding:15px;display:flex}.logo{align-items:center;display:flex}.logo h1{margin:0;font-size:24px}main{padding:20px}#videoGrid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}@media (width<=600px){#videoGrid{grid-template-columns:repeat(1,1fr)}}@media (width>=601px) and (width<=960px){#videoGrid{grid-template-columns:repeat(2,1fr)}}.videoItem{text-align:center;cursor:pointer;background-color:#202020;border-radius:4px;flex-direction:column;align-items:center;padding:15px;transition:transform .3s;display:flex;box-shadow:0 2px 4px #0000001a}.videoItem:hover{transform:translateY(-5px)}.thumbnail{width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden}.thumbnail img{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.dateOverlay{color:#fff;background-color:#00000080;border-radius:3px;padding:2px 5px;font-size:12px;position:absolute;bottom:5px;left:5px}.timeOverlay{color:#fff;background-color:#00000080;border-radius:3px;padding:2px 5px;font-size:12px;position:absolute;bottom:5px;right:5px}.checkOverlay{box-sizing:border-box;border-radius:3px;width:24px;height:24px;padding:2px 5px;font-size:12px;position:absolute;bottom:5px;left:5px}h3{margin-top:10px;font-size:16px}p{color:#999;margin-top:5px;font-size:14px}.playIcon{opacity:0;background-color:#0009;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:opacity .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.videoItem:hover .playIcon{opacity:1}a{color:#fff;text-decoration:none}a:hover{color:#fff}.horizontal-modal{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.vertical-modal{flex-flow:column wrap;justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.modal{text-align:center;background-color:#202020;flex-direction:column;justify-content:center;align-items:center;width:800px;padding:20px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #0003}@media (width<=600px){.modal{width:300px}}@media (width>=601px) and (width<=960px){.modal{width:450px}}.vaplayer{width:640px;height:360px}@media (width<=600px){.vaplayer{width:390px}}#close-button{color:#fff;cursor:pointer;background-color:#686868;border:none;border-radius:2px;margin-left:10px;padding:8px 15px;transition:background-color .3s}#close-button:hover{background-color:#5a5a5a}img.emoji{vertical-align:-.1em;width:1em;height:1em;margin:0 .05em 0 .1em}