content { border: 1px solid #ddd; display: flex; flex-direction: column; flex: flex-grow; flex-basis: 100%; grid-column: 1/3; --sub-color: #999; --title-color: #000; } main { display: flex; flex-direction: column; } header { display: flex; width: 100%; flex-direction: row; } header nav { flex: 1; margin-left: 1rem; margin-right: 1rem; } header nav input { display: flex; flex-grow: 2; margin: 1rem; } header nav logo { font-weight: bold; font-size: 1rem; color: black; } header nav button { background-color: var(--color-bg); color: var(--color); padding: 0.5rem; } hr { margin-top: 0.5rem; margin-bottom: 0.5rem; } figcaption { padding: 1rem; } figcaption a { color: var(--color-secondary); font-size: 0.8em; } figcaption p { font-weight: bold; margin-top: unset; } figcaption video-actions { color: var(--sub-color); font-weight: unset; display: flex; flex-grow: 1; justify-content: space-between; } card { display: flex; margin-top: 0.2rem; margin-bottom: 0.2rem; --img-width: 120px; --img-height: 80px; --font-size: 0.8em; } card img { width: var(--img-width); height: var(--img-height); } card info { display: flex; flex-direction: column; padding: 0.2rem; color: var(--sub-color); font-size: var(--font-size); } card info h4 { font-weight: bold; color: var(--title-color); margin: 0px; } card.small { --img-width: 100px; --img-height: 70px; --font-size: 0.6em; } promotion { display: flex; flex-direction: column; } promotion card { --img-width:4rem; --img-height:4rem; } promotion content { border: unset; padding-left: 4rem; } comments nav { justify-content: left; font-weight: unset; } comments nav sort { color: var(--sub-color); } comments card { color: black; --img-width:4rem; --img-height:4rem; --font-size: 1em; } comments card p { color: black; } comments card reply { color: var(--color); } lower { padding: 1rem; } nav#vote-nav { justify-content: flex-end; } nav a,a:visited,a:active { text-decoration: none; color: var(--color-text); }