/* || Containers and Positioning */

#music_player {
    position: relative;
    width: 150px;
    height: 75px;
    margin: auto;
    border: 1px outset maroon;
    background-color: #fff7f3;
    overflow: hidden;
    white-space: nowrap;
}

#audio_button {
    position: absolute;
    inset: 5px 0 0 50px;
    z-index: 2;
    cursor: pointer;
}

#left_cd {
    position: absolute;
    inset: 5px 0 0 25px;
    transform: scale(0.85);
    z-index: 1;
}

#right_cd {
    position: absolute;
    inset: 5px 0 0 75px;
    transform: scale(0.85);
    z-index: 1;
}

#left_cd_bottom {
    position: absolute;
    inset: 5px 0 0 25px;
    transform: scale(0.85);
    z-index: 0;
}

#right_cd_bottom {
    position: absolute;
    inset: 5px 0 0 75px;
    transform: scale(0.85);
    z-index: 0;
}

#audio_left {
    position: absolute;
    inset: 25px 0 0 5px;
    cursor: pointer;
}

#audio_left:hover {
    content: url("/images/icons/arrows/left_hover.gif");
}

#audio_left:active {
    content: url("/images/icons/arrows/left_click.gif");
}

#audio_right {
    position: absolute;
    inset: 25px 5px 0 auto;
    cursor: pointer;
}

#audio_right:hover {
    content: url("/images/icons/arrows/right_hover.gif");
}

#audio_right:active {
    content: url("/images/icons/arrows/right_click.gif");
}

#audio_label {
    position: absolute;
    width: fit-content;
    inset: auto 0 -8px 48px;
    font-size: 9pt;
}

/* || CD and Label Animations */

@keyframes main_cd_left {
    50% {transform: translateX(-50px) scale(0.85);}
    100% {transform: translateX(-25px) scale(0.85);}
}

@keyframes main_cd_left_spinning {
    50% {transform: translateX(-50px) scale(0.85);}
    90% {content: url("/images/icons/cd_spinning.gif");}
    100% {transform: translateX(-25px) scale(0.85); content: url("/images/icons/cd.webp");}
}

@keyframes main_cd_right {
    50% {transform: translateX(50px) scale(0.85);}
    100% {transform: translateX(25px) scale(0.85);}
}

@keyframes main_cd_right_spinning {
    50% {transform: translateX(50px) scale(0.85);}
    90% {content: url("/images/icons/cd_spinning.gif");}
    100% {transform: translateX(25px) scale(0.85); content: url("/images/icons/cd.webp");}
}

@keyframes left_cd {
    50% {transform: translateX(-30px) scale(1); z-index: 3;}
    100% {transform: translateX(25px) scale(1); z-index: 3;}
}

@keyframes left_cd_spinning {
    50% {transform: translateX(-30px) scale(1); z-index: 3; content: url("/images/icons/cd_spinning.gif");}
    100% {transform: translateX(25px) scale(1); z-index: 3; content: url("/images/icons/cd_spinning.gif");}
}

@keyframes right_cd {
    50% {transform: translateX(30px) scale(1); z-index: 3;}
    100% {transform: translateX(-25px) scale(1); z-index: 3;}
}

@keyframes right_cd_spinning {
    50% {transform: translateX(30px) scale(1); z-index: 3; content: url("/images/icons/cd_spinning.gif");}
    100% {transform: translateX(-25px) scale(1); z-index: 3; content: url("/images/icons/cd_spinning.gif");}
}

@keyframes text_scroll {
    from {transform: translateX(100%);}
    to {transform: translateX(-150%);}
}

/* || Animation Application Classes */

.main_cd_anim_left {
    animation: main_cd_left 1s;
}

.main_cd_anim_left_spin {
    animation: main_cd_left_spinning 1s;
}

.main_cd_anim_right {
    animation: main_cd_right 1s;
}

.main_cd_anim_right_spin {
    animation: main_cd_right_spinning 1s;
}

.left_cd_anim {
    animation: left_cd 1s;
}

.left_cd_anim_spin {
    animation: left_cd_spinning 1s;
}

.right_cd_anim {
    animation: right_cd 1s;
}

.right_cd_anim_spin {
    animation: right_cd_spinning 1s;
}

.audio_label_anim {
    animation: text_scroll 9s linear infinite;
}