| .header { | |
| margin: 1rem; | |
| padding-bottom: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| font-family: 'Roboto Mono', monospace; | |
| border-bottom: 2px solid var(--color-primary-fill-color); | |
| } | |
| .header-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .header-title p { | |
| margin: 0; | |
| color: var(--color-primary-text); | |
| font-size: 1rem; | |
| } | |
| .header-title a { | |
| font-size: var(--text-size-header-label); | |
| opacity: var(--text-opacity); | |
| color: var(--color-primary-text); | |
| } | |
| .header-title .reddit-logo { | |
| width: 2rem; | |
| height: 2rem; | |
| background: #FF4500; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.25rem; | |
| } | |
| .header-info { | |
| display: flex; | |
| gap: 3rem; | |
| color: var(--color-primary-text); | |
| } | |
| .header-info div { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .header-info .label { | |
| font-size: var(--text-size-header-label); | |
| opacity: 0.6; | |
| } | |
| .header-info .value { | |
| font-size: var(--text-size-header-value); | |
| } | |
| @media (max-width: 1090px) { | |
| .header { | |
| padding: 0; | |
| flex-direction: column; | |
| justify-items: space-around; | |
| } | |
| .header-info { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header { | |
| gap: .5rem; | |
| text-align: center; | |
| } | |
| .header-info { | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .header { | |
| margin: .5rem; | |
| } | |
| .header-info { | |
| margin: .5rem; | |
| } | |
| } |