body { color: #fff; background-color: #181818; margin: 0; padding: 0; font-family: Open Sans, sans-serif; } header { z-index: 1000; background-color: #202020; justify-content: space-between; align-items: center; padding: 15px; display: flex; } @media (width <= 600px) { header { position: fixed; } .spacer { height: 125px; } } .spacer { height: 0; } .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); } } #searchResults { grid-template-columns: repeat(4, 1fr); gap: 20px; display: grid; } @media (width <= 600px) { #searchResults { grid-template-columns: repeat(1, 1fr); } } @media (width >= 601px) and (width <= 960px) { #searchResults { 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%; max-width: 100%; height: 0; padding-bottom: 150%; position: relative; overflow: hidden; } .thumbnail img { object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .cam, .tor, .torright { background-color: #00000080; border-radius: 3px; align-items: center; padding: 2px 5px; display: flex; position: absolute; top: 5px; } .cam { right: 5px; } .tor { left: 50%; transform: translate(-50%); } .torright { right: 5px; } .cam a, .tor a, .torright a { color: #fff; font-size: 12px; } .dateOverlay, .trailerOverlay, .ratingOverlay { color: #fff; background-color: #00000080; border-radius: 3px; padding: 2px 5px; font-size: 12px; position: absolute; } .dateOverlay { bottom: 5px; left: 5px; } .trailerOverlay { bottom: 5px; right: 5px; } .ratingOverlay { top: 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; } #more { color: #fff; text-align: center; cursor: pointer; background-color: #202020; border-radius: 4px; flex-direction: column; align-items: center; width: 100%; padding: 15px; font-weight: 700; transition: transform 0.3s; display: flex; box-shadow: 0 2px 4px #0000001a; } .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; } 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; } @media (width <= 600px) { .vaplayer { width: 100%; height: auto; } } img.emoji { vertical-align: -0.1em; width: 1em; height: 1em; margin: 0 0.05em 0 0.1em; } #search-container { gap: 0.2rem; margin-top: 0.2rem; display: flex; } #search-input-container > input { color: #fffc; background-color: #373737; border: none; font-size: 1rem; } #search-container > button { cursor: pointer; border-radius: 0.2rem; width: 3.5rem; } #search-container > #image-button { border-bottom-right-radius: 0.5rem; } #search-input-container { background-color: #373737; border-radius: 0.2rem 0.2rem 0.2rem 0.5rem; flex-grow: 1; align-items: center; gap: 0.75rem; padding-left: 1rem; display: flex; } #search-input-container > img { height: 1.5rem; } #search-input-container > input { background-color: transparent; width: 100%; height: 1.25rem; padding: 1rem 1rem 1rem 0; }