body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* center vertically */
    height: 97.5vh;
    margin: 10px;
    padding: 0;
    border: solid 1px white; 
    filter: drop-shadow(2px 2px 5px rgba(255, 255, 255, 0.84));
}

header{
    font-size: large;
    position: fixed;
    top: -20px;
    text-align: center;
    translate: 0 100px;
    font-family: gridlite-pe-variable, sans-serif;
    font-variation-settings: "BACK" 1, "ELSH" 4, "RECT" 1, "wght" 900;
    filter: drop-shadow(4px 2px 4px black);
    color: white;
    animation-name: flashtext;
    animation-duration: 1s;
}

@keyframes flashtext{
    0%{
        filter: opacity(0);
    }
    5%{
        filter: opacity(100%);
    }
    1%{
        filter: opacity(0);
    }
    20%{
        filter: opacity(100%);
    }
    22%{
        filter: opacity(0);
    }
    25%{
        filter: opacity(100%);
    }
    30%{
        filter: opacity(0);
    }
    34%{
        filter: opacity(100%);
    }
    40%{
        filter: opacity(0);
    }
    50%{
        filter: opacity(100%);
    }
    57%{
        filter: opacity(0%);
    }
    63%{
        filter: opacity(100%);
    }
    70%{
        filter: opacity(0);
    }
    100%{
        filter: opacity(100%);
    }
}

#windowtop{
    position: fixed;
    width: 100%;
    height: 25px;
    border: 1px solid white;   
    box-sizing: border-box;
    text-align: right;
    margin: 0;
    padding: 0;
}

h3{
    
    font-family: gridlite-pe-variable, sans-serif;
    font-size: 10pt;
    margin: 0;
    padding: 4px;
    color: white;
}

.ipodcontainer {
    position: relative;
    width: 505px;
    height: 919px;
    scale: .6; 

    animation-name: loadipod;
    animation-duration: 2s;
}

@keyframes loadipod{
    0% {
        translate: 0 100%;
    }

    100% {
        translate: 0 0;
    }
}


#playlist-one{
    background-image: url(media/boey-zeth-R-FihkHdn6w-unsplash-1024x683.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(5px) opacity(91%) brightness(63%);
}

#playlist-two{
    background-image: url(media/retro-high-school-hallway-with-colorful-lockers-vintage-school-vibes_853605-97.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(8px) brightness(70%);
}

#playlist-three{
    background-image: url(media/city.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(8px) brightness(40%);
}

/* ipod colors */
.green {
    filter: hue-rotate(122deg) saturate(63%) brightness(89%) contrast(108%);
}

.blue {
    filter: hue-rotate(247deg) saturate(110%);
}

.pink {
    filter: saturate(110%);
}

/* full ipod image */
.ipodframe {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.43));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    
    pointer-events: none;
}

/* iframe for ipod content */
.ipodcontent {
    position: absolute;
    left: 80px;
    top: 60px;
    background-color: rgba(0, 0, 0, 0);
    width: 338px;
    height: 265px;
    z-index: 1;
}

#menuUI{
    position: absolute;
    display: none;
    flex-flow: column;
    text-align: center;
    align-content: center;
    justify-content: center;
    left: 80px;
    top: 60px;
    background-color: rgba(21, 21, 21, 0.64);
    width: 338px;
    height: 265px;
    z-index: 2;
}

#goback{
    padding: 0;
    margin-left: 20px;
    text-align: left
}

#wakemeUI{
    position: absolute;
    display: flex;
    flex-flow: column;
    text-align: center;
    align-content: center;
    justify-content: center;
    left: 80px;
    top: 60px;
    background-color: rgb(24, 24, 24);
    width: 338px;
    height: 265px;
    z-index: 2;
}

#voltext{
    translate: 0 -60px;
}

h1 {
    font-size: 50pt;
    color: #e1a4d9;
    font-family: "gridlite-pe-variable", sans-serif;
    font-variation-settings:
        "wght" 900,
        "BACK" 10,
        "RECT" 10,
        "ELSH" 4;
}

h2 {
    z-index: 2;
    font-size: 21pt;
    translate: 0 -10px;
    color: white;
    font-family: "gridlite-pe-variable", sans-serif;
    font-variation-settings:
        "wght" 400,
        "BACK" 10,
        "RECT" 10,
        "ELSH" 4;
}

#volumeSlider{
    width: 200px;
    z-index: 20;
    translate: 0 -60px;
}

/* interface buttons */
#buttons { /*div of buttons*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block; 
}
/*individual buttons*/
.button-home {
    position: relative;
    top: 564px;
    left: 186px;
}
.button-menu {
    position: relative;
    top: 330px;
    left: 186px;
    scale: 0.6;
}
.button-back {
    position: relative;
    top: 433px;
    left: 35px;
    scale: 0.35;
}
.button-forward {
    position: relative;
    top: 365px;
    left: 335px;
    scale: 0.35;
}
.button-pauseplay {
    position: relative;
    top: 460px;
    left: 186px;
    scale: 0.35;
}

.img-button{ /* applied to img of button so that it is not itself interactable*/
    display: block;
    pointer-events: none;
}


.decotext1{
    position: fixed;
    top: 0;
    left: 0;
    width: 40%;
    translate: 3.1vw 27vh;
    box-sizing: border-box;
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.26);
    filter: blur(px);
    font-family: gridlite-pe-variable, sans-serif;
    font-variation-settings: "wght" 400;
    animation-name: flashtext;
    animation-duration: .8s;
}

.decotext2{
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    text-align: right;
    translate: 42.8vw 5vh;
    box-sizing: border-box;
    font-size: 2vw;
    color: rgba(255, 255, 255, 0.26);
    filter: blur(px);
    font-family: gridlite-pe-variable, sans-serif;
    font-variation-settings: "wght" 400;
    animation-name: flashtext;
    animation-duration: 1.3s;
}

pre{
    position: fixed;
    top: 0;
    left: 0;
    width: 10%;
    translate: -5.3vw 36vh;
    box-sizing: border-box;
    font-size: .57vw;
    color: white;
    font-family: gridlite-pe-variable, sans-serif;
    font-variation-settings: "wght" 600;
    animation-name: flashtext;
    animation-duration: 3s;
}