* { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } body { font-family: sans-serif; font-size: 18px; background-color: #0b0035; color: #fff; } a { color: #5799ff; } h1 { padding: 2rem; } table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 1.2rem; } table th { cursor: pointer; } table th, table td { padding: 0.5rem; } table a { display: block; } table tr:nth-child(2n) { background-color: #09002b; } .btn-back { background-color: #001153 !important; } .btn-back a { text-decoration: none; } .btn-back #back-arrow { width: 16px; height: 16px; margin-right: 0.5rem; } .wrapper { display: flex; flex-direction: column; min-height: 100%; } .inner { width: 80vw; margin: auto; background-color: #070022; flex-grow: 1; } .highlight { padding: 1rem; } .enhanced a { display: flex; flex-direction: row; } .enhanced a { text-decoration: none; } .enhanced a:hover .movie-title { text-decoration: underline; } .enhanced a .thumbnail { max-width: 180px; margin-right: 1rem; flex-shrink: 0; height: max-content; } .meta-wrap { display: flex; flex-direction: column; } .movie-title { font-size: 1.2rem; } .movie-description { color: #fff; } .form { padding: 1rem; color: #999; } .form label { margin-left: 1rem; cursor: pointer; } .movie-buttons a, button { position: relative; background-color: #001a80; color: #5799ff; border: 0; padding: 0.25rem 1rem; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 1rem; } .movie-buttons a:hover, button:hover { background-color: #001b88; } .movie-buttons a:active, button:active { background-color: #001466; } button .tooltip { position: absolute; left: 100%; top: 0; background-color: #001153; padding: 0.25rem; margin-left: 0.25rem; pointer-events: none; } .movie-buttons { display: flex; flex-direction: row; margin-top: auto; } .movie-buttons a { margin-right: 0.5rem; } @media screen and (max-width: 1200px) { .inner { width: 100%; } }