body {
    display: flex;
    background-repeat: repeat;
    background-attachment:fixed;
    background-color:#f7dadaa4;
    background-blend-mode: multiply;
    background-image: url(/images/bg-index.png);
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.c1 {
    width: 30em;
    height: fit-content;
    margin-top: 80px;
    display:flex;
    flex-direction: row;

}

.c-left {
    pointer-events: none;
    height: 34em;
    width: 26em;
}

.c-left > p {
    pointer-events: all; 
    margin-top: -2em;
    margin-left: 4.6em;
    color: 	#f0c1c1;
}

.c-right {
    font-weight: bold;
    flex-flow: column;
    align-items:end;
    justify-content: end;
    margin-top: auto;
    margin-bottom: 0em;
    padding-left: 0.8em;
}

a {
    color:	#9c5757;
    display: block;
}
a:visited, .sleeve > a:visited {
    color:	#4b0b0b;
}

.hover {
    transition: all 0.26s ease-in-out;
}
.hover:hover {
    letter-spacing: 0.08em;

}

.border-round {
    border-width: 7px;
    border-style: solid; 
    border-image: url("/images/border-round.png") 8 round; 
    background-clip: padding-box;
}

.deco {
    pointer-events: none;
    width: 0%;
    height: 0%;
}
/* img */
#puff {
    position: absolute;
    width: 12em;
    rotate: -8deg;
    margin-top: 10.8em;
    margin-left: -5em;
}
#lace {
    position: absolute;
    z-index: -1;
    width: 11em;
    rotate: -2deg;
    margin-top: 12.4em;
    margin-left: -4.3em;
} 


/* MUSIC PAGE*/
.music {
    display: flex;
    flex-direction: column;
    background-repeat: repeat;
    background-attachment:fixed;
    background-color: #f0c1c1;
    background-blend-mode: multiply;
    background-image: url(/images/bg-index.png);
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;    
    }

    .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .main-container {
    display: inherit;
    border: 1px solid black; 
    width: 36.2em; 
    height: 30em; 
    margin-top: 8em;
    background-color: rgba(212, 144, 144, 0.395);
    }

    .left {
    border: none; 
    max-width: 16em;
    background-color: #9c5757;
    z-index: 1;
    }

    .right {
    width: 28em; 
    margin-left: 0em;
    background: rgba(201, 131, 131, 0.523);
    backdrop-filter: blur(0.2px);
    border-radius: 2px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.073);
        /* From https://css.glass */
    -webkit-backdrop-filter: blur(0.2px);
    padding-bottom: 2em;
    }

    .want {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 28em;
        width: 21em;
        margin: 1em 0em 0em -0.1em;
        border-right: none;
        padding-left: 1em;
        border: 1px solid black;
        border-left: none;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;

    }

    .want-cont {
        display: flex;
        flex-flow: row;
        width: 20em;
        min-height: 11em;
        height: fit-content;
        margin: 0em 2.8em 0.6em .2em;
        border: 1px solid black; 
        border-left: none;
        padding-right: 0.6em;
        background: rgba(200, 128, 128, 0.752);

    }

    .want-cont > .wc-left > h1 {
        font-size: 1.2em;
        font-family: sans-serif;
    }

    .want-cont > .wc-left > .oversize {
        font-size: 1.1em;
    }

    .wc-left > h2 {
        font-size: 1em;
        font-family: 'Courier New', Courier, monospace;
        margin-top: -0.8em;
    }

    .wc-left > p {
        margin-top: -0.6em;
        font-size: 0.96em;
    }

    .wc-left {
        height: fit-content;
        margin-top: 0em;
    }
    #cont-1 {
        margin-top: 0.6em;
    }

    #cont-1 > p {
        margin-left: 0.8em;
    }

    .album {
        height: 9em;
        margin-top: 1em;
        margin-left: 4%;
        margin-right: 0.6em;
    }
    .sleeve {
        position: absolute; 
        rotate: -90deg;
        margin-top: 5.2em;
        margin-left: -4em;
        font-size: x-large;
        color: 	#d49090;
    }

    .sleeve > a {
        font-size: inherit;
        display: inline;
        color: inherit;
        text-decoration:underline solid; 
        text-underline-offset: 0.14em;
    }
    .has {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid black; 
        margin: 1em 1em 1em 3.2em; 
        width: 10em;
        height: 28em; 
        background-color: rgba(212, 144, 144, 0.395);
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #d49090 transparent;
        row-gap: 0.4em;
    }

    .has > img {
        padding-left: 8%;
        width: 8em;
    }

    .tippy-box[data-theme~='music'] {
    background-color: #d49090;
    color: #4b0b0b;
    }

    /* deco */
    #h-music {
        position: absolute;
        width: 18em;
        z-index: 3;
        margin-top: 23em;
        margin-left: -41em;
    }

    .cd {
        position: absolute;
        z-index: -1;
        width: 28em;
        margin-top: 8em;
        margin-left: -2em;
        opacity: 90%;
        animation: cd 18s linear infinite;
    }

    @keyframes cd {
    to {
        transform: rotate(360deg);
    }
}