#container {
    text-align: left;
    padding-top: 3rem;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
}

.rainbow-underline {
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff;
    background-size:  100% 15%;
    background-repeat: repeat-x;
    background-position: left 0% bottom -5%;
    background-image: linear-gradient(
        90deg,
        hsl(284,91%,69%) 0%,
        hsl(284,91%,69%) 12.5%,
        hsl(329,91%,69%) 12.5%,
        hsl(329,91%,69%) 25%,
        hsl(14,91%,69%) 25%,
        hsl(14,91%,69%) 37.5%,
        hsl(59,91%,69%) 37.5%,
        hsl(59,91%,69%) 50%,
        hsl(104,91%,69%) 50%,
        hsl(104,91%,69%) 62.5%,
        hsl(149,91%,69%) 62.5%,
        hsl(149,91%,69%) 75%,
        hsl(194,91%,69%) 75%,
        hsl(194,91%,69%) 87.5%,
        hsl(239,91%,69%) 87.5%,
        hsl(239,91%,69%) 100%
    );
}

a.rainbow-underline {
    text-decoration: none;
}
a.rainbow-underline:hover {
    text-decoration: none;
}


.subtitle {
    font-style: italic;
}

header {
    padding: 1em;
    margin-bottom: 2em;

    background-color: hsl(194,91%,98%);
    border-bottom: 4px solid hsl(194,91%,85%);

    .subtitle {
        font-size: 1.2em;
    }
}