:root {
    --outer-space: 1.5rem;
    --bg-color: pink;
    --other-color: cornflowerblue;
}
body {
    background: url('/assets/smcc-doodle.png');
    background-size: auto;
    font-size: 18px;
    cursor: url(/assets/cursor.png) 2 2, auto;
    font-family: 'Fira Code';
}

figure {
    max-width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin: 1.4rem auto 1.4rem auto;
}

/* figure.event.banner svg { */
/*     width: 100px; */
/* } */

figcaption {
    font-style: italic;
    font-size: 0.9rem;
}

img {
    max-width: 100%;
}

main {
    height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: var(--outer-space);
    padding-bottom: 10rem;
}

header h1 {
    font-family: var(--mono);
    font-size: 4rem;
    border: 1px var(--other-color) solid;
    text-align: center;
    color: var(--other-color);
    background: var(--bg-color);
    -webkit-text-stroke: unset;
    padding: 1rem;
    margin: 0;
    max-width: 50vw;
}

section {
    background: var(--bg-color);
    padding: 2rem; /* Root Em-unit */
    margin-top: var(--outer-space);
    margin-bottom: var(--outer-space);
    max-width: 50vw;
    border: 1px var(--other-color) solid;
}
section p {
    max-width: 44rem;
    margin: auto;
    margin-bottom: 1.4rem;
}

div.details {
    font-size: 1.5rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

div.details p {
    margin-bottom: 1rem;
}



 p.song-player {
     text-align: center; /* This would make any inline boxes centered within their Block-level box. */
}

section#radio figure {
    max-width: 50%;
    margin: auto;
}

a {
    text-decoration: none;
}

a:not(.anchor){
    background: cornflowerblue;
    color: white;
}