body {
    --faded-text: #FFF8;
}

h1 {
    display: block;
}

a {
    color: #C88;
}

.flexContainer {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: auto;
}


img {
    margin-left: 3vw;
    float: left;
    height: 100%;
}

.song-direct-link a {
    font-family: 'Philosopher', sans-serif;
    font-size: 8pt;
    color: var(--faded-text);
    text-decoration: none;
}

.song-purchase-link a {
    font-family: 'Philosopher', sans-serif;
    font-size: 8pt;
    color: #0CACD7;
    text-decoration: none;
}

@media screen and (width <=1000px) {
    #songList {
        --song-width: calc(100vw - 100px);
        width: calc(100vw - 100px);

        --desc-width: calc(100vw - 160px);
    }
}

@media screen and (width > 1000px) {
    #songList {
        --song-width: calc(900px);
        width: calc(900px);

        --desc-width: 840px;
    }
}


.indent {
    margin-left: 1em;
    margin-right: 1em;
    border-left: 1px solid white;
    padding-left: 1em;
    padding-right: 1em;

    border-right: 1px solid #FFF8;

    width: var(--desc-width);
}

.indent p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.song {
    background-color: #400;
    padding: 1em;
    padding-left: 2em;
    width: 100%;

    margin-bottom: 2vh;
    border-radius: 1em;
}


.song-number {
    font-family: 'Philosopher', sans-serif;
    display: inline-block;
    font-size: 1.75em;
    margin-right: 1em;
    color: var(--faded-text);
} 
.song-date { 
    position: relative;
    font-family: 'Philosopher', sans-serif;
    font-size: 1.15em; 
    top: -1em;
    display:inline-block;
    color: var(--faded-text);
}


.song-header {
    display: inline-block;
    width: calc(var(--song-width) - 80px);
}

.song-header * {
    font-family: 'Philosopher', sans-serif;
    border-bottom: 1px solid var(--faded-text);
}

h2 * {
    border-bottom: none !important;
}

rt {
    color: var(--faded-text);
}

.engtitle {
    border-bottom: none !important;
    margin-left: 1em;
    font-size: 75%;
    color: var(--faded-text);
    float: right;
    margin-top: inherit;
}

.jptitle {
    border-bottom: none !important;
    margin-left: 1em;
    font-size: 75%;
    color: var(--faded-text);
    float: right;
}

.tag-container {
    font-size: 0.75em;
}

.tag {
    border-radius: 1em;
    background-color: #FFF5;
    display: inline-block;
    padding: 0.5em;
    margin-right: 0.5em;
}

.celestial-dissent {
    background-color: #400606;
    border: 2px solid red;
    color: red;
    text-shadow: 0 0 4px red;
    text-shadow: 0 0 4px red;
    font-weight: bolder;
}

z {
    color: #FDD;
}

y {
    color: #CCC;
}