#content {
    overflow-x: hidden;
}

.content > p {
    text-align: center;
    margin: 10vh 0;
}

.content > p.lyric {
    font-size: 2rem;
    line-height: 7.5;
    text-align: right;
    width: 10%;
    float: right;
    height: 0;
    overflow: visible;
    z-index: 999;
    position: relative;
    margin: 0 200px 0 0;
}

.content > p.lyric.wide {
    width: 20%;
}

.content > p.lyric > em {
    background: #000;
    padding: 5px;
}

.content > p.musicnote {
    font-size: 0.75rem;
    margin-top: 0;
}

.content {
    background-color: black;
    color: white;
    width: 90%;
    position: relative;
}

.content img {
    margin: 0;
    height: 100%;
    max-height: none;
    object-fit: fill;
}

.content > p {
    display: flex;
    justify-content: center;
}

.content .hs img {
    width: 50vw;
}

.content .ts img {
    width: 75vw;
}

/* yep this is hacky lol */
.content .fs img {
    width: 100vw;
}

.content .bumper {
    margin-bottom: 60vh;
}

hr {
    border-color: white;
}

body {
    padding: 0;
    overflow-x: hidden;
}

h2 {
    margin: 75vh 200px;
    font-style: italic;
    font-weight: lighter;
}

h2.left {
    text-align: left;
}

h2.right {
    text-align: right;
}

h3.center {
    text-align: center;
}

h1.titleheader {
    margin-bottom: 0;
}

@media only screen and (orientation: portrait) {
    blockquote.warn {
        margin: 400px 0;
    }

    .content > p.lyric {
        width: 50%;
    }

    .content .beh {
        height: 100vh;
    }

    .content .big {
        height: 125vh;
    }

    .content .bigger {
        height: 150vh;
    }

    .content .b img {
        width: auto;
        max-height: none;
        object-fit: fill;
    }
  }