@import url('https://fonts.googleapis.com/css2?family=Germania+One&family=Medula+One&family=Pirata+One&display=swap');

:root {
    --low-bottom: #260717;
    --low-top: #400D33;
    --mid-bottom: #5238B0;
    --mid-top: #8B62EB;
    --high-bottom: #92BAFE;
    --high-top: #BBE5F9;
    --accent: #0a84ff;
    --dark: #B03853;
    --golden: #e9c647;
    --luftschloss-text: #f9cf58;
    --night-sky: #6d1725;
    --maxw: 54rem;
    --radius: 8px;

    /* remilia sprite */
    --rem-y: 20%;
    --rem-x: 20%;
    --rem-x-srpite: 0px;
    --rem-y-sprite: 2px;

    color-scheme: light;
}

body {
    background-color: var(--low-bottom);
    color: var(--low-bottom);
    font-family: "Pirata One", "Old English Text MT", "Lucida Blackletter", "Garamond", serif;
}

.luftschloss-separator {
    background-image: url("../assets/flourish1.gif");
    height: 143px;
    width: 385px;
    border: none;
}

p {
    font-family: "Germania One", serif;
}

section {
    padding: 15px;
}

.nav {
    border-right: 5px double var(--golden);
    flex-grow: 1;
    text-align: center;
}

.nav:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.nav:last-of-type {
    border: none;
    /* 5px double var(--golden); */
}

.navbar {
    border-bottom: 5px double var(--golden);
    display: flex;
    justify-items: stretch;
    width: 100%;
}

.luftschloss-accent {
    flex: 0 1 auto;
    min-width: 0;
}

.graves {
    background-image: 
        url("../assets/graves.png");
    background-repeat: no-repeat;
    background-size: auto;
}

.petals {
    /* Background image setup */
    background-image: 
        url("../assets/petals.png");
    background-repeat: no-repeat;
    background-size: auto;
}

.luftschloss-floor {
    color: var(--luftschloss-text);
    border-width: 0px 5px 0px 5px;
    border-style: double;
    border-color: var(--golden);
    flex-grow: 1;
    display: flex;
    flex-direction: column;


    /* second layer offset by 80% */
    /*
    background-image: url("assets/gothicwindow.png");
    background-repeat: no-repeat;
    */
                    
    /* Shift to show the rightmost portion */
    background-position: right top;
}

.luftschloss-room {
    display: flex;
    border: 5px double var(--golden);
    background-color: var(--night-sky);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../assets/gradient.png");
}

.chains {
    background-image: url("../assets/chains2.png");
    background-position: 0% 0%;
    background-repeat: no-repeat;
    flex-grow: 1;
}

.sparkles-header {
    background-image: url("../assets/hangingstars.gif");
    background-position: 0% 0%;
    background-repeat: repeat-x;
    flex-grow: 1;
}

.remilia-teleport {
    position: relative;
    z-index: 3;
}

.remilia-teleport::after {
    z-index: 2;
    content: "";
    position: absolute;
    width: 62px;
    height: 64px;

    /* Position inside parent (20% width, 70% height) */
    left: var(--rem-x);
    top: var(--rem-y);

    /* Sprite sheet background */
    background-image: url("../assets/remilias.png");
    background-repeat: no-repeat;

    /* Shift the sheet so (80,20) is at top-left of our 20x20 box */
    background-position: var(--rem-x-srpite) var(--rem-y-sprite);
}

.fantasy-castles {
    /*background-image: url("../assets/fantasycityscape.png");*/
    background-repeat: repeat-x;
    background-position: bottom;
    flex-grow: 1;
}

.player-controls {
    display: flex;
    width: 100%;
    border-top: 5px double var(--golden);
}

.player-controls div {
    padding-top: 5px;
    padding-bottom: 5px;
}

#player-play-button {
    flex-shrink: 1;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

#player-play-button img {
    height: 20px;
    filter: grayscale(100%);
}

#player-play-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#music-track-marquee {
    flex-grow: 1;
    padding-left: 10px;
    border-left: 1px dotted rgba(255, 255, 255, 0.3);
}