@font-face {
    font-family: IBM Model3x;
    src: url("../../fonts/Ac437_IBM_Model3x_Alt1.ttf") format("truetype");
}

.draggable {
    position: absolute;
    cursor: var(--pointer);
    top: 20px;
    right: 20px;
    z-index: 1;
    width: 215px;
    height: 350px;
    align-content: center;
}
.music-container {
    width: 200px;
    height: 303px;
    padding: 5px;
    background-color: transparent;
    font-weight: 300;
    font-style: normal;
    position: relative;
    font-size: 0.7em;
    border-style: solid;
    border-image-slice: 126 140 125 140;
    border-image-width: 70px;
    border-image-repeat: repeat repeat;
    border-image-source: url("../../imgs/border-crow-peaches.png");
    border-image-outset: 13px;
    pointer-events: none;
}

#player-top {
    background-color: black;
    width: 143px;
    height: 180px;
    margin-bottom: 4px;
    position: absolute;
    top: 30px;
    left: 28px;
    z-index: -1;
    pointer-events: all;
}

#player-bottom {
	background-color: rgb(168, 191, 117);
	width: 143px;
	height: 72px;
	overflow-y: scroll;
	overflow-x: clip;
	z-index: -1;
	position: absolute;
	top: 210px;
	left: 28px;
	pointer-events: all;
	scrollbar-width: none;
	color: black;
}

#player-top,
#player-bottom {
    border: 4px ridge #a1a02f;
}

.playlist-item {
    margin-bottom: 4px;
    cursor: crosshair;
    padding-left: 2px;
    text-align: center;
}

.playlist-item:hover {
    background-color: #bbe57d;
    color: #893a00;
}

.selected {
    background-color: #3b6e48;
    color: #fff;
}

#title {
    width: 135px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;

    color: white;
    text-align: center;
}

#title span {
    position: absolute;
    will-change: transform;
    transition: transform 5s linear;
}

.album-cover {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 27px;
    left: 21px;
}

@keyframes coverRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.album-cover img {
	width: 100%;
	height: 100%;
	border-radius: 100px;
    animation: coverRotate 2s infinite linear;
    border: 1px solid white;
}

.album-cover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;        /* circle size */
    height: 25px;
    background: black;  /* circle color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.navigation {
    position: absolute;
    top: 122px;
    left: 0px;
    display: flex;
    z-index: 10;
    cursor: var(--pointer), pointer;
}

.action-btn {
    background-color: transparent;
    border: 0;
    color: rgb(228, 127, 73);

    margin: 15px;
    cursor: var(--pointer), pointer;
}

.progress-container {
    background: white;
    cursor: var(--pointer), pointer;
    height: 4px;
    width: 106px;
    position: absolute;
    top: 159px;
    left: 16px;
    z-index: 10;
}

.progress {
    background-color: #1ea0d8;
    height: 100%;
    width: 0%;
    transition: width 0.1s;
}

.play-btn {
	background-image: url("../../imgs/icons/playbutton-16.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
}

.pause-btn {
    background-image: url("../../imgs/icons/pausebutton-16.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
}