@font-face {
font-family: "Roboto Mono";
font-style: normal;
font-weight: 400;
src: local(""), url(/site/assets/fonts/roboto-mono-v12-latin-regular.woff2) format("woff2");
font-display: swap;
}

@font-face {
font-family: "Roboto Mono";
font-style: normal;
font-weight: 600;
src: local(""), url(/site/assets/fonts/roboto-mono-v12-latin-600.woff2) format("woff2");
font-display: swap;
}

@font-face {
font-family: "Monoton";
font-style: normal;
font-weight: 400;
src: url(/site/assets/fonts/monoton-v15-latin-regular.woff2) format("woff2");
font-display: swap;
}

:root {
--theme: hsl(0, 57%, 54%);
--dark: #333;
--mid: #626262;
--grey-dark: hsl(0, 0%, 25%);
--grey-mid: hsl(0, 0%, 50%);
--grey-light: hsl(0, 0%, 75%);
--grey-very-light: hsl(0, 0%, 90%);
--grey-very-very-light: hsl(0, 0%, 96.5%);
--blue: #0062ff;
--transition: all 0.3s ease-in-out;
--text-strong: 700;
--font-sans: "Roboto Mono", "Courier New", Courier, monospace;
--heading-font: Monoton, Impact, sans-serif;
}

* {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
}

body {
font-family: var(--font-sans);
font-size: 100%;
line-height: 1.6;
color: var(--dark);
font-weight: 400;
background: url(/site/assets/images/record_spines.webp);
background-size: contain;
background-color: var(--theme);
}

.page-wrapper {
max-width: 1200px;
margin: 0 auto;
background-color: white;
min-height: 100vh;
}

@media (min-width: 1200px) {
.page-wrapper {
margin: 2rem auto 1rem;
}
}

header {
background-color: var(--dark);
padding: 1rem;
}

.site-title {
margin: 0;
padding: 0;
font-family: var(--heading-font);
font-size: clamp(1.5rem, 4vw, 3rem);
color: var(--theme);
line-height: 1.2;
}

main {
padding: 1rem;
}

@media (min-width: 768px) {
main {
padding: 2rem 3rem;
}
}

article {
max-width: 800px;
}

h1 {
font-family: var(--heading-font);
font-size: clamp(1.8rem, 5vw, 3.5rem);
line-height: 1.2;
margin: 0 0 1.5rem 0;
color: var(--dark);
font-weight: 400;
}

h2 {
font-size: 2rem;
font-weight: var(--text-strong);
margin: 2rem 0 1rem 0;
color: var(--dark);
}

h3 {
font-size: 1.3rem;
font-weight: var(--text-strong);
margin: 1.5rem 0 0.75rem 0;
color: var(--dark);
}

p {
margin: 0 0 1rem 0;
line-height: 1.6;
}

a {
color: var(--theme);
text-decoration: underline;
transition: var(--transition);
}

a:hover, a:focus {
color: var(--blue);
transition: var(--transition);
}

.transition-section {
margin: 2rem 0;
padding: 1.5rem 0;
border-top: 1px solid var(--grey-light);
border-bottom: 1px solid var(--grey-light);
}

.links-section {
margin: 2rem 0;
padding: 2rem;
background-color: var(--grey-very-very-light);
border: 2px solid var(--grey-light);
border-radius: 4px;
}

.links-section h3 {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--dark);
font-size: 1.3rem;
}

.links-section h3:first-child {
margin-top: 0;
}

.links-section ul {
list-style-position: inside;
padding-left: 0;
margin: 0 0 1.5rem 0;
column-count: 1;
column-gap: 2rem;
}

@media (min-width: 768px) {
.links-section ul {
column-count: 2;
}
}

.links-section li {
margin-bottom: 0.75rem;
break-inside: avoid;
}

.links-section li a {
color: var(--blue);
text-decoration: underline;
font-weight: 400;
}

.links-section li a:hover {
color: var(--theme);
}

footer {
background-color: white;
padding: 2rem 1rem;
text-align: center;
border-top: 1px solid var(--grey-light);
}

.footer-nav {
padding: 1rem 0.5rem;
font-size: 0.875rem;
font-weight: var(--text-strong);
}

.footer-nav a {
color: var(--theme);
text-decoration: none;
}

.footer-nav a:hover {
color: var(--blue);
text-decoration: underline;
}

.credits {
font-size: 0.75rem;
color: var(--mid);
}

@media (max-width: 767px) {
.links-section {
padding: 1rem;
}
}