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 0.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; } .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 0.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; } @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; } } img.emoji { vertical-align: -0.1em; width: 1em; height: 1em; margin: 0 0.05em 0 0.1em; } .tor { background-color: #00000080; border-radius: 3px; align-items: center; padding: 2px 5px; display: flex; position: absolute; top: 5px; right: 5px; } .tor a { color: #fff; font-size: 12px; } .horizontal-modal, .vertical-modal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .horizontal-modal { flex-wrap: wrap; } .vertical-modal { flex-flow: column wrap; } .modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); } @keyframes modalFadeIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .modal { position: fixed; top: 50%; left: 50%; width: 640px; max-width: 90vw; padding: 30px 20px 20px; transform: translate(-50%, -50%); background-color: #202020; color: #fff; border-radius: 12px; display: flex; flex-direction: column; z-index: 1001; box-shadow: 0 0 16px #0008; animation: modalFadeIn 0.3s ease; } #close-button { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #aaa; font-size: 24px; font-weight: bold; cursor: pointer; padding: 5px; transition: color 0.3s; } #close-button:hover { color: #fff; } .videoItem { text-align: center; cursor: pointer; background-color: #202020; border-radius: 4px; flex-direction: column; align-items: center; padding: 15px; transition: transform 0.3s; display: flex; box-shadow: 0 2px 4px #0000001a; } .videoItem:hover { transform: translateY(-5px); } select { appearance: none; background-color: #373737; color: #fff; border: 1px solid #555; padding: 10px 12px; border-radius: 8px; font-size: 14px; max-width: 250px; width: 100%; margin-bottom: 20px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; } select:focus { outline: none; border-color: #888; } .vaplayer { width: 640px; height: 360px; }