body {
    padding-top: 15px;
    background-color: rgba(6, 114, 228, 0.532);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


/* MAIN CONTAINER */

#player {
    border: 0.34rem solid rgb(216, 236, 219);
    border-radius: 10px;
    background-color: #0c0f01de;
    color: rgb(237, 244, 250);
    display: none;
}

#player-display {
    display: none;
}


/* GLOBALS */

.sect-slice {
    border: 0.08rem solid rgb(216, 236, 219);
}


/* TITLE SECTION */

.spread-shadow {
    box-shadow: 0 -4.2px 5px rgba(216, 236, 219, 0.486);
}

#banner {
    background-color: #008B27;
    box-shadow: 0 4.2px 5px rgba(216, 236, 219, 0.486);
    display: none;
}

#banner>img {
    width: 100%;
}


/* DETAILS SECTION */

#mar-con {
    overflow: hidden;
}

.lists-icon {
    height: 42px;
}

.btn {
    background-color: #ffd818e9;
    text-shadow: 3px 2.4px 4.4px #73E60C;
    box-shadow: 5px 3.7px 4.4px #73E60C;
}

.btn:hover {
    background-color: #73E60C;
    text-shadow: 3px 2.4px 4.4px #ffd818e9;
    box-shadow: 3px 2.4px 4.4px #ffd818e9;
    color: black;
}

#track-picture img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    box-shadow: 1.4px 2.2px 5px rgba(19, 211, 19, 0.954);
}

#track-name {
    font-size: 1.42rem;
    color: #ffd518e9;
    text-shadow: 3px 2.4px 4.4px #73E60C;
}

#track-artist {
    font-size: 1.22rem;
    color: #11ab3d;
    text-shadow: 2px 3px 5.76px #ffd818e9;
}

.marquee {
    width: 100%;
    white-space: nowrap;
}

.marquee .mtext {
    display: inline-block;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(110%);
    }
    100% {
        transform: translateX(-200%);
    }
}


/* i OPTIONS  */

i {
    color: #0d9433;
    text-shadow: 1.4px 2.2px 3px #065902dc;
}

i:hover {
    color: #73E60C;
}


/* BUTTONS SECTION */

#buttons {
    background-color: #ffda37e9;
}

i {
    font-size: 1.8rem;
}

#playpause-track>i {
    font-size: 3.2rem;
}


/* SLIDER SECTION */

#volume-container {
    background-color: #ffda37e9;
}


/* LIST CONTAINER */

#lists-display {
    display: none;
}

#lemon-lists {
    height: 300px;
    position: relative;
}

#happy-lemon {
    display: none;
    height: 300px;
    position: absolute;
    left: -4.5rem;
}

#arrow-lists {
    display: none;
    position: absolute;
    left: 13rem;
    width: 7rem;
    height: 15rem;
    top: 0.4rem;
    object-fit: cover;
}

#lemon-selection {
    position: absolute;
    right: 2.2rem;
    top: 2rem;
}


/* @MEDIA */

@media screen and (min-width: 375px) {
    #arrow-lists {
        left: 13.5rem;
        height: 19rem;
        width: 9rem;
    }
}

@media screen and (min-width: 425px) {
    #arrow-lists {
        left: 15.5rem;
        top: -1rem;
    }
}

@media screen and (min-width: 500px) {
    #arrow-lists {
        left: 18.5rem;
        height: 22rem;
        width: 13rem;
    }
}

@media screen and (min-width: 768px) {
    #player {
        width: 55%;
    }
    #arrow-lists {
        left: 14.5rem;
    }
}

@media screen and (min-width: 992px) {
    #happy-lemon {
        left: 1.5rem;
    }
    #lemon-selection {
        right: 5.2rem;
        top: 3.5rem;
    }
    #arrow-lists {
        left: 18.5rem;
        top: 1rem
    }
}

@media screen and (min-width: 1200px) {
    #arrow-lists {
        height: 17rem;
        width: 9rem;
        left: 23.5rem;
    }
}