@-webkit-keyframes sidebarShow {
    0% {
        left: -300px
    }

    to {
        left: 0
    }
}

@keyframes sidebarShow {
    0% {
        left: -300px
    }

    to {
        left: 0
    }
}

@-webkit-keyframes sidebarHide {
    0% {
        left: 0
    }

    to {
        left: -300px
    }
}

@keyframes sidebarHide {
    0% {
        left: 0
    }

    to {
        left: -300px
    }
}

@-webkit-keyframes btnShow {
    0% {
        left: 0
    }

    to {
        left: 300px
    }
}

@keyframes btnShow {
    0% {
        left: 0
    }

    to {
        left: 300px
    }
}

@-webkit-keyframes btnHide {
    0% {
        left: 300px
    }

    to {
        left: 0
    }
}

@keyframes btnHide {
    0% {
        left: 300px
    }

    to {
        left: 0
    }
}

@-webkit-keyframes sidebar-back-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes sidebar-back-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes sidebar-back-hide {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes sidebar-back-hide {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.theme {
    --accent: #ec008c; /* Matching physical print */
    --accent2: #ff46b8; /* Web safe (mine) */
    --back: #fff;
    --back-fade: #ffffff80;
    --back-rgba: #00000070;
    --head-rgba: #00000040;
    --btn-rgba: #00000020;
    --font: #000;
    --middle: #888;
    --track: #bbb;
}

body,html {
    height: 100%!important
}

html {
    font-size: 18px;
}

body {
    background-color: var(--back);
    margin: 0
}

#all-body.fixed {
    overflow: hidden!important;
}

@font-face {
    font-family:Mada;src:url(/fonts/Mada.ttf)
}

h1,h2,h3,h4,h5,h6,p,a,span {
    font-family: "Mada";
    color: var(--font)
}

h1 {
    margin: 1em .333333em;
    font-size: 45px;
    text-align: center;
    font-weight: 200;

    @media only screen and (min-width: 700px) {
        letter-spacing: 5px
    }
}

h2 {
    font-size: 25px;
    margin: 1.8em .6em 1em;
    font-weight: 300;
}

h3 {
    font-size: 25px;
    margin: 1em 0;
    font-weight: 300;
}

h6 {
    font-size: 25px;
    font-weight: 300;
}

p {
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5rem;
    font-weight: 400
}

a {
    font-size: 1rem;
    text-decoration: none
}

a,a h2:hover,a p:hover,a:hover,p a {
    color: var(--accent)
}

a p,li,text {
    color: var(--font)
}

a,p,text {
    font-family: "Mada"
}

li {
    font-family: "Mada"
}

a,li,text {
    font-size: 1rem
}

ul {
    padding-left: 1em;
}

button,button:hover {
    text-decoration: none!important
}

button {
    cursor: pointer;
    height: 3em;
    border: solid 1px var(--font);
    font-family: "Mada";
    padding: 0.7em 1em;
    font-size: 0.9rem;
    color: var(--font);
    background: var(--back);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    box-shadow: 0 0 0.8em var(--btn-rgba);
    clip-path: inset(-8em);
    
    a {
        color: var(--font)!important
    }
}

button:hover {
    background: var(--accent);
    border-color: var(--accent);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

.menu-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 2em;
    height: 2em;
    padding: 0;
    border: solid 1px var(--font);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;

    svg {
        width: 2em;
        height: 2em;
        fill: var(--font);
    }
}

.menu-btn:hover {
    background-color: var(--accent);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    cursor: pointer
}



/* SIDEBAR */

#sidebar {
    position: fixed;
    top: 0;
    box-sizing: border-box;
    width: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: var(--accent);
    z-index: 30;
    overflow-y: auto;
    box-shadow: 0 0 15px var(--head-rgba);
    clip-path: inset(0 -15px 0 0);

    .hello {
        box-sizing: border-box;
        width: 300px;
        padding: 15px 15px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 10px;

        a {
            display: flex;

            h2 {
                margin: 20px 0 0 0;
                color: var(--font)
            }

            h4 {
                margin: 23px 5px 0 0;
            }

            img {
                display: block;
                width: 100%
            }
        }
    }

    .dm-div,.logo-div,.logo-div a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .top {
        .logo-div {
            margin-bottom: 1em;

            h3 {
                margin: 1.5em 1.5em 0
            }

            p {
                margin: 1em 1.5em 0
            }
        }
    }

    .dm-div-a {
        margin: 0 1.5em 1em;

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    }

    .dm-div-a.final {
        margin-bottom: 0
    }

    .cutout {
        box-sizing: border-box;
        width: 100%;
        padding: 0 3em;

        img {
            display: block;
            width: 100%
        }
    }

    .bottom {
        .copyright {
            text-align: center;
            margin: 0 1em 1em
        }
    }

    a {
        color: var(--font)!important
    }

    @media only screen and (min-width:1000px) {
        left: 0;
        height: 100vh!important;
    }

    @media only screen and (max-width:1000px) {
        left: -300px;
        min-height: 100%;
        overflow-y: scroll!important;
        display: none;
    }

    @media only screen and (min-height:600px) {
        .border {
            display: none
        }
    }

    @media only screen and (max-height:600px) {
        overflow-y: scroll;

        .border {
            display: block;
            border-top: solid 1px var(--font);
            margin: 10px 25px
        }
    }

    @media only screen and (max-width: 375px) {
        width: 245px;

        .hello {
            width: 245px
        }
    }
}



/* SIDEBAR BUTTON */

#sidebar-btn-div {
    box-sizing: border-box;
    width: 35px;
    height: 35px;
    z-index: 90;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--font);
    background-color: var(--back);
    margin: 15px;
    transition: background-color .2s ease-in-out;

    .sidebar-btn {
        fill: var(--font);
        width: 13px;
        height: 13px
    }

    @media only screen and (min-width:1000px) {
        display: none
    }

    @media only screen and (max-width:1000px) {
        position: absolute
    }
}

#sidebar-btn-div:hover {
    cursor: pointer;
    background-color: var(--accent);
    transition: background-color .2s ease-in-out;
}

/* SIDEBAR ANIMATION */

@media only screen and (max-width:1000px) {
    #sidebar.show {
        display: flex;
        left: 0;
        -webkit-animation-name: sidebarShow;
        animation-name: sidebarShow;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
    }

    #sidebar.hide {
        left: 0;
        -webkit-animation-name: sidebarHide;
        animation-name: sidebarHide;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
    }

    #sidebar-background.show,#sidebar-btn-div.show {
        display: flex;
        -webkit-animation-duration: .3s;
        animation-duration: .3s
    }

    #sidebar-btn-div.show {
        display: flex;
        left: 300px;
        -webkit-animation-name: btnShow;
        animation-name: btnShow;
    }

    #sidebar-btn-div.hide {
        left: 0;
        -webkit-animation-name: btnHide;
        animation-name: btnHide;
    }

    #sidebar-btn-show.show {
        display: none
    }

    #sidebar-btn-hide {
        display: none
    }

    #sidebar-btn-hide.show {
        display: flex
    }

    #sidebar-background {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--back-rgba);
        opacity: 0;
        z-index: 20
    }

    #sidebar-background.show {
        opacity: 1;
        -webkit-animation-name: sidebar-back-show;
        animation-name: sidebar-back-show;
    }

    #sidebar-background.hide {
        opacity: 0;
        -webkit-animation-name: sidebar-back-hide;
        animation-name: sidebar-back-hide;
    }
}

@media only screen and (max-width: 375px) {
    #sidebar-btn-div.show {
        left: 245px;
    }
}

.tonic .dm-div-a.tonic a,.rth .dm-div-a.rth a {
    text-decoration: underline!important;
}

.tonic .dm-div-a.tonic a:hover,.rth .dm-div-a.rth a:hover {
    text-decoration: none!important;
}



/* CONTENT */

#content {
    z-index: 10;
    padding: 60px 0 90px;

    @media only screen and (min-width:1000px) {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

    @media only screen and (max-width:1000px) {
        margin-left: 0;
    }
}

@media only screen and (max-width:1000px) {
    #content.show {
        position: fixed;
        box-sizing: border-box;
        overflow: hidden!important;
        width: 100%
    }
}

.track #content {
    padding-top: 0
}

.drop {
    p {
        display: inline
    }

    p.cap {
        font-size: 23px;
        font-weight: 300
    }
}

/* Site blocks */

.tonic-1 {
    box-sizing: border-box;
    margin: 0 auto 3em;
    padding: 0 1em;
    max-width: 45em;

    h2 {
        margin: 1rem 0
    }

    p.final {
        margin-bottom: 0
    }

    p.note {
        font-size: 0.8rem;
        color: var(--middle);
        margin-top: 1.5em;
    }
}

.tonic-2 {
    display: flex;
    box-sizing: border-box;
    padding: 0 1em;
    width: 100%;
    max-width: 45em;
    margin: auto;

    .album {
        img {
            display: block;
            width: 100%
        }
    }
}

@media only screen and (min-width: 1100px) {
    .tonic-2 {
        align-items: center;
        
        .album {
            max-width: 18em;
        }

        .paragraph {
            margin-left: 2em;

            h3 {
                margin: 0 0 1em
            }
        }
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1100px) {
    .tonic-2 {
        flex-direction: column;
        max-width: 22em;
        margin: auto
    }
}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
    .tonic-2 {
        align-items: center;
        
        .album {
            max-width: 17em;
        }

        .paragraph {
            margin-left: 2em;

            h3 {
                margin: 0 0 1em
            }
        }
    }
}

@media only screen and (max-width: 800px) {
    .tonic-2 {
        flex-direction: column;
        max-width: 22em;
        margin: auto
    }
}

.rth-1 {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 2em;
    width: 100%;

    .paragraph {
        max-width: 45em;

        p.final {
            margin-bottom: 4em;
        }

        .line {
            width: 20%;
            border-bottom: solid 1px var(--font)
        }
    }

    @media only screen and (min-width: 700px) {
        justify-content: center;
    }

    @media only screen and (min-width: 1475px) {
        display: flex;

        .paragraph {
            margin-right: 2em;
        }
    }

    @media only screen and (max-width: 700px) {
        flex-direction: column;
        align-items: center;
    }
}

.covers {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 1em;
    padding: 0 2em 1em;

    .gallery img {
        display: block;
        width: 100%
    }

    @media only screen and (min-width: 700px) {
        max-width: 1160px;
        margin: auto;

        .gallery {
            width: calc(50% - 0.5em);
        }
    }
}

.tracklist {
    box-sizing: border-box;
    max-width: 45em;
    margin: 3em auto;
    padding: 0 2em;

    p,a {
        font-size: 16px;
        margin: 0
    }

    .track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        @media only screen and (min-width: 700px) {
            margin-top: 0.7em;
        }

        @media only screen and (max-width: 700px) {
            margin-top: 1em
        }

        .left-div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
    
            p.left {
                width: 2em;
                color: var(--active)
            }
        }

        .dots {
            flex: 1;
            overflow: hidden;
            font-size: 15px;
            margin: 5px 5px 0;
            letter-spacing: 3px;
            color: var(--accent);
        }
    }

    @media only screen and (max-width: 700px) {
        .track {
            padding: 0;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .dots {
                display: none
            }
    
            .left-div {
                width: calc(100% - 3em);

                p.title {
                    width: calc(100% - 2em)
                }
            }
    
            p.right {
                width: 2em;
                margin-left: 1em
            }
        }
    }
}

.rth-4 {
    display: flex;
    justify-content: center;
    padding: 0 1em;
    
    #wrapper {
        max-width: 60em;
    }
}

.no-show {
    display: none!important
}

.no-indent {
    margin-left: 0
}

.dead-button,.dead-button:hover {
    color: var(--font)!important;
    border-color: var(--font)!important;
    cursor: default;
    border-radius: 0!important;
    text-decoration: none!important
}

.title-container {
    width: calc(100% - 2em);
    margin: 0 1em;

    .title {
        padding: 1em 2em 0.5em;
        margin: 0 auto;
        text-align: center;

        @media only screen and (max-width: 400px) {
            padding: 2em 1em!important;
        }
    }
}

.title.sub {
    padding-bottom: 0.25em
}

.title.up {
    padding-top: 0.5em
}

.subtitle {
    text-align: center;
    margin: 0 0 2em 0;
}

.link-underlines a,a.link-underlines {
    text-decoration: none
}

.link-underlines a:hover,a.link-underlines:hover {
    text-decoration: underline
}

.about .pop-p-about,.behind-the-scenes .pop-p-behind,.films .pop-p-films,.lost-in-the-woods .pop-p-lost,.more .pop-p-more,.norm-memorial .pop-p-norm,.not-a-piano .pop-p-piano,.photography .pop-p-photos,.set-free .pop-p-set,.special-health-service .pop-p-special,.stitches .pop-p-stitches {
    text-decoration: underline !important;
    color: var(--font);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: var(--back)
}

::-webkit-scrollbar-thumb {
    background-color: var(--track);
    border: solid 3px var(--back);
    -webkit-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
    -webkit-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

#crumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1em 1em 0;

    @media only screen and (max-width: 1000px) {
        margin-left: 3.5em;
    }

    @media only screen and (min-width: 1000px) {
        .album {
            position: absolute;
            top: 1em;
            right: calc(50% - 150px - 41px)
        }
    }

    @media only screen and (min-width: 700px) and (max-width: 1000px) {
        .album {
            position: absolute;
            top: 1em;
            right: calc(50% - 41px)
        }
    }

    @media only screen and (max-width: 700px) {
        .text {
            display: none
        }
    }
}

.song {
    box-sizing: border-box;
    max-width: 45em;
    padding: 0 1em;
    margin: 3em auto;

    input[type=range] {
        appearance: none;
        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
        width: 100%; /* Specific width is required for Firefox. */
        background: transparent; /* Otherwise white in Chrome */
    }
      
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }
      
    input[type=range]:focus {
        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
        border: none;
        height: 20px;
        width: 20px;
        background: var(--accent);
        border: solid 1px var(--font);
        border-radius: 0;
        cursor: pointer;
        margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
        border: none;
        height: 20px;
        width: 20px;
        background: var(--accent);
        border: solid 1px var(--font);
        border-radius: 0;
        cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        background-color: var(--back);
        border: solid 1px var(--font);
        border-radius: 5px
    }

    input[type=range]::-moz-range-track {
        width: calc(100% - 2px);
        height: 5px;
        cursor: pointer;
        background-color: var(--back);
        border: solid 1px var(--font);
        border-radius: 5px;
    }

    #listen {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        #play-pause {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            box-sizing: border-box;
            width: 3em;
            height: 3em;
            margin-right: 1em;
            padding: 0;
            border: solid 1px var(--font);

            #play,#pause {
                width: 1em;
                height: 1em;
                fill: var(--font);
            }
    
            #play {
                display: block;
            }
    
            #pause {
                display: none;
            }
        }
        
        #play-pause.play {
            #play {
                display: none;
            }
    
            #pause {
                display: block
            }
        }
    
        #play-pause:hover {
            cursor: pointer
        }

        input {
            width: calc(100% - 175px);
            height: 3em;
            margin: 0;
        }

        .time {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 100px;
            height: 3em;
            margin-left: 1em;

            span {
                margin: 0
            }

            .slash {
                margin: 0 5px
            }
        }
    }
}

.credits {
    box-sizing: border-box;
    max-width: 45em;
    margin: auto;
    padding: 0 1em;

    .line {
        width: 8em;
        border-bottom: solid 1px var(--font)
    }
}

#h-gallery {
    overflow: auto;
    white-space: nowrap;
    padding: 0 2em;
    height: 27em;
    display: flex;
    gap: 1em;

    .img-container {
        height: 100%;

        .img-hover-div {
            height: 100%;

            img {
                height: 100%;
                display: block
            }
        }
    }
}

















/* FUTURE RTH GALLERY

.gallery-container {
    position: relative;
    display: flex;
    max-width: 60em;
    height: 20em;
    margin: auto;

    .slides {
        margin: 0;
        display: grid;
        grid-auto-flow: column;
        gap: 1em;
        margin: 0 2em;
        overflow-y: scroll;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;

        .img-container {
            height: 20em;

            .img-hover-div img {
                height: 100%;
                display: block
            }
        }
    }

    .slides > .img-container {
        scroll-snap-align: start;
        scroll-padding-left: 2em;
    }

    .arrow {
        width: 2em;
        height: 20em;
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 25;

        svg {
            display: block;
            fill: var(--font)
        }
    }

    .arrow.start {
        left: -20px;

        svg {
            transform: rotate(90deg)
        }
    }

    .arrow.end {
        right: -20px;

        svg {
            transform: rotate(270deg)
        }
    }
}

*/