/* Center footer */
footer {
    text-align: center;
    margin-top: 2rem;
}

/* Reduce gap between nav and homepage intro */
.intro {
    margin-top: 1.5rem;
}

/* Ensure music embed is fully visible only on homepage */
.homepage-intro {
    text-align: center;
    margin: 1.5rem auto 0 auto;
    padding: 0;
}
.homepage-intro iframe {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    width: 100%;
    min-height: 450px;
    height: 450px;
    border: none;
}
.homepage-intro embed, .homepage-intro audio {
    display: block;
    margin: 1rem auto;
    max-width: 600px;
    min-height: 120px;
    height: auto;
    border: none;
}

/* Blog index styles */
.blog-index {
    margin: 2rem auto 0 auto;
    max-width: 700px;
    padding: 0 1rem;
}
/* Center blog index post listing and pagination */
/* Center blog index container, left-align content */
.blog-index {
    margin: 2rem auto 0 auto;
    max-width: 700px;
    padding: 0 1rem;
    text-align: left;
}
.blog-index .post-list {
    margin: 0;
    padding: 0;
    text-align: left;
}
.blog-index .post-preview {
    margin-bottom: 2rem;
    text-align: left;
}
.blog-index h2 {
    margin: 0;
    display: block;
}
.blog-index .post-meta-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
}
.blog-index .pagination {
    text-align: center;
    margin-top: 2rem;
}
.blog-links {
    text-align: center;
    margin-bottom: 2rem;
}

/* Center top-level nav links */
header nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1rem 0;
}

header nav a {
    text-align: center;
    font-size: 1.1rem;
}
@font-face {
    font-family: 'permanent-marker';
    src: url('/static/fonts/Permanent_Marker/PermanentMarker-Regular.ttf')
    format('truetype');
    font-weight: normal;
    font-style: normal;
}

.app-title {
    font-family: 'permanent-marker', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: white;
    margin-top: 0;
}

.color-run {
    color: #f6cb8c;
    text-shadow: 1px -1px hsl(195, 80%, 42%), 2px -2px hsl(195, 80%, 42%),
    3px -3px hsl(195, 80%, 42%), -1px 1px hsl(348, 34%, 35%),
    -2px 2px hsl(195, 80%, 42%), -3px 3px hsl(195, 80%, 42%),
    1px 1px hsl(348, 34%, 35%), 2px 2px hsl(197, 8%, 18%),
    3px 3px hsl(197, 8%, 18%), -4px 4px hsl(197, 8%, 18%),
    5px 5px hsl(195, 80%, 42%), 6px 6px hsl(284, 22%, 36%),
    7px 7px hsl(197, 8%, 18%), -8px 8px hsl(186, 30%, 39%),
    -9px 9px hsl(186, 30%, 39%), -10px 10px hsl(186, 30%, 39%),
    11px 11px hsl(284, 22%, 36%), 12px 12px hsl(284, 22%, 36%),
    -13px 13px hsl(185, 71%, 45%), -14px 14px hsl(185, 71%, 45%),
    -15px 15px hsl(185, 71%, 45%);
}