:root {
    /* Fonts */
    --font-text: 'Abel', sans-serif;
    --font-title: 'Cormorant Garamond', Garamond, serif;
    /* Colors */
    --oxford-blue: #00002B;
    --army-green: #444420;
    --lemon-curry: #DDAA00;
    --opera-mauve: #B38CB4;
    --salmon-pink: #EF959D;
    --nadeshiko-pink: #EDADC7;
    --misty-rose: #FAE3E3;
    --vermilion: #D84727;
    --celadon: #8DDC4A;
    --dark-sea-green: #78C091;
    --ocean-green: #5FBB97;
    --screaming-green: #87FF65;
    --xanadu: #808F85;
    --ebony: #596157; /* rgba(89, 97, 87, 1); */
    --opal: #A7CECB;
    --opal2: #9DC7C8;
    --maximum-blue: #5EB1BF;
    --metallic-seaweed: #388697;
    --green-blue: #2364AA;
    --fluorescent-blue: #54F2F2;
    /* PUBLIC logo colors */
    --public-dark: var(--oxford-blue);
    --public-medium: var(--army-green);
    --public-clear: var(--lemon-curry);
    /* Composite colors */
    --footer-bg-color: rgba(89, 97, 87, 0.8);

}

html {
    border-style: border-box;
    /* https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages */
    font-size: 1rem;
}

body {
    display: flexbox;
    background-color: var(--xanadu);
    color: var(--public-dark);
    line-height: 1.2;
    font-size: 1.1em;
    font-family: var(--font-text);
    padding:
        env(safe-area-inset-top, 2rem)
        env(safe-area-inset-right, 2rem)
        env(safe-area-inset-bottom, 0.5vh)
        env(safe-area-inset-left, 2rem);
}

:link {
    color: var(--ocean-green);
}
a:active {
    color: var(--celadon);
}
a:hover, a:focus {
    color: var(--screaming-green);
}
a:visited {
    color: var(--dark-sea-green);
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
}

body>header {
    text-align: center;
    min-height: 100vh;
}

body>header>h1 {
    background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat;
    line-height: 15rem;
    color: transparent; /* Only show the background image */
    font-size: 3em;
}

body>header>h2 {
    font-size: 2.5rem;
    font-weight: normal;
}
h2>span {
    display: block;
}

body>header {
    padding-bottom: 1.5rem;
}

.tagline {
    font-size: 2.1em;
    text-align: left;
    padding-left: 0.8em;
}

main, article {
    font-size: 2rem;
}

main {
}

main>article {
    display: flex;
    flex-flow: row wrap;
}
main>article>section {
    border: 1rem solid var(--green-blue);
    padding: 2rem;
    text-align: center;
    width: 100vw;
    min-height: calc(100vh - 8.5rem);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}
main>article>section>h2 {
}
main>article>section>p {
    text-align: left;
    min-height: 20rem; /* Ensure buttons below are aligned. */
}
main nav {
}
main nav a {
    background-color: var(--vermilion);
    border: none;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: relative;
    bottom: 0;
}
main>aside {
    margin: 1rem;
}

nav>ul {
    list-style: none;
    margin: 0.1rem;
    padding: 0;
    display: flex;
    flex-start:
}
nav li {
    flex-grow: 1;
    padding: 0 1rem;
    text-align: center;
}
nav li a {
    display: block;
    position: relative;
    padding: 0.5rem;
    height: 100%;
    width: 100%;
}
#pitch nav {
    text-align: center;
}

aside>header>p {
    background-color: var(--public-dark);
    color: var(--xanadu);
    font-size: 2em;
    padding: 0.5em 1em;
    padding-bottom: 0;
    border-radius: 1em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-width: 10em;
    margin: 0 auto;
}
aside>header p:after {
    position: relative;
    bottom: 0;
    left: -1em;
    display: block;
    background: url(curvy-l.png) top left/1em no-repeat, url(quoty.png) 3em top/1em no-repeat, url(curvy-r.png) top right/1em no-repeat, url(filly.png) top left/1em repeat-x, var(--xanadu);
    width: calc(100% + 2em);
    height: 1em;
    content: ' ';
    margin: 0 auto;
    max-width: 12em;
    padding-top: 1em;
}

aside>section {
    margin: 3rem auto;
}

body>footer {
    margin: 0;
    padding: 0;
    position: fixed;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background-color: var(--misty-rose);
    text-align: center;
    box-shadow: 0 2px 1px inset var(--ebony);
}
body>footer>p {
    font-size: 0.75em;
    display: none;
}
body>footer:hover {
    height: auto;
}
body>footer:hover p {
    display: block;
}

body>footer a,
body>footer a:link,
body>footer a:visited {
    color: var(--public-dark);
    text-decoration: none;
    font-weight: bold;
}

/* Display Discourse comments a bit larger */
.topics-list iframe {
    width: 96vw; /* good for a single category */
    height: 55vh; /* with font-size: 1.5em in iframe body */
}

/**
 * On the desktop, try and make each section a whole screen by itself.
 **/

@media screen and (min-width: 960px) {
    body>header {
        height: 100vh;
        font-size: 3rem;
        display: flex;
        flex-flow: column wrap;
    }

    .tagline {
        font-size: 1em;
        text-align: center;
        padding-top: 2em;
    }

    body > header:hover .tagline {

    }
    body > header:hover:before {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 14rem;
        content: attr(title);
        font-weight: bold;
        color: var(--public-clear);
        filter: drop-shadow(0.1rem 0.4rem 0.1rem var(--public-medium));
    }

    main > article {
        flex-wrap: nowrap;
    }

    body>aside {
        display: block;
        margin-bottom: 25vh;
    }

    #pitch {
        max-width: 64rem;
    }

    body>aside {
        display: flex;
        flex-flow: row wrap;
        padding-bottom: 25vh;
    }

    body>aside>header {
        flex: 1;
    }
    body>aside>article {
        flex: 2;
    }

    .topics-list iframe {
        width: 50vw; /* good for a single category */
    }
}