@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

body {
    margin: 0;
    background-color: #000000;
    font-family: "Inter", sans-serif;
    overflow-y: hidden;
}

.songList {
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100%);
    padding-top: 70px;
    padding-bottom: 250px;
    margin-left: 10px;
    margin-right: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.songList .songDiv {
    height: 46px;
}

.songList .songDiv .cover {
    transform: translateY(-100px);
    width: 54px;
    height: 54px;
}

.songList .songDiv .title {
    width: 100%;
    height: 27px;

    transform: translate(62.5px, -17px);

    font-style: normal;
    font-weight: 400;
    font-size: 18px;

    color: #FFFFFF;

    pointer-events: none;
}

.songList .songDiv .artist {
    width: 100%;
    height: 17px;

    transform: translate(61.5px, -36px);

    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;

    color: #FFFFFF;

    pointer-events: none;
}

.playerDiv {
    position: absolute;
    bottom: 10px;
    left: 10px;

    width: calc(100% - 20px);
    height: 62px;

    overflow: hidden;
    background: #1C1C1C;
    box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.playerDiv .progressBackground {
    position: absolute;

    bottom: 0;
    width: 100%;
    height: 3px;

    background: #2d2d2d;
    border-radius: 0px 0px 8px 8px;
}

.playerDiv .progressActive {
    position: absolute;

    bottom: 0;
    height: 3px;

    background: #ffffff;
    border-radius: 0px 8px 8px 8px;
}

.playerDiv .cover {
    position: absolute;
    width: 62px;
    height: 62px;
}

.playerDiv .title {
    position: absolute;

    left: 70px;
    top: -13.5px;

    width: 100%px;
    height: 27px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;

    color: #FFFFFF;
}

.playerDiv .artist {
    position: absolute;

    left: 70px;
    top: 15.5px;

    width: 100%px;
    height: 17px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 14px;

    color: #FFFFFF;
}

.playerDiv .playButton {
    position: absolute;
    width: 49px;
    height: 49px;

    right: 5px;
    top: 6.5px;

    border: none;

    background: #2d2d2d;
    border-radius: 256px;

    transition: background-color 0.125s;
}

.playerDiv .playButton:hover {
    background-color: #353535;
}

.searchBar {
    font-family: "Inter", sans-serif;
    box-sizing: border-box;

    top: 10px;
    left: 10px;

    width: calc(100% - 20px);

    position: absolute;
    height: 38px;

    background: #1c1c1c;
    border: 1px solid #2d2d2d;
    border-radius: 99px;

    color: #FFFFFF;
    font-size: 18px;
    padding-left: 12.5px;
}

::placeholder {
    color: #8C8C8C;
    opacity: 1;
}

.searchBar:focus {
    outline: none;
}

.shadowTop {
    position: absolute;
    top: 0;

    width: 100%;
    height: 100px;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 56.5%, #000000 100%);

    pointer-events: none;
}

.shadowBottom {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 142px;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 56.5%, #000000 100%);

    pointer-events: none;
}