body {
    margin: 0;
    background-color: #000000;
}
#background{
    position: absolute;
    height: 100%;
    width: 100%;
    margin: auto;
    filter: blur(11px);
    z-index: -1;
}
.container{
    position: absolute;
    height: 300pt;
    width: 250pt;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000;
    border-radius: 11px;
    box-shadow: 0 0 10px #000000;
}
.card{
    position: absolute;
    height: 50%;
    width: 103%;
    background: linear-gradient(45deg, rgb(41, 41, 41), rgb(132, 132, 132));
    z-index: 4;
    bottom: -17%;
}
#play-pause{
    position: absolute;
    height: 50px;
    width: 50px;
    filter: invert(1);
    cursor: pointer;
    bottom: 15%;
    z-index: 4;
    font-size: 53px;
    left: 9%;
    transition: .3s;
}
#next-song{
    position: absolute;
    height: 30px;
    width: 30px;
    filter: invert(1);
    cursor: pointer;
    bottom: 13.5%;
    font-size: 40px;
    right: 10%;
    z-index: 4;
    transition: .3s;
}
#back-song{
    position: absolute;
    height: 30px;
    width: 30px;
    filter: invert(1);
    cursor: pointer;
    font-size: 40px;
    right: 10.3%;
    bottom: 21.5%;
    z-index: 4;
    transition: .3s;
}
.singer{
    position: absolute;
    z-index: 4;
    color: rgb(193, 255, 6);
    font-family: 'Forum', sans-serif;
    font-weight: bold;
    font-size: 20px;
    bottom: 21%;
    left: 28%;
}
.song{
    position: absolute;
    z-index: 4;
    color: white;
    font-family: 'Forum', sans-serif;
    font-size: 17px;
    bottom: 16%;
    left: 28%;
}
#player{
    position: absolute;
    width: 103%;
    top: -7%;
    transition: 1s;
    z-index: 3;
}
#progress{
    appearance: none;
    position: absolute;
    z-index: 4;
    height: 5px;
    background: #000000;
    width: 160pt;
    bottom: 5%;
    border-radius: 30px;
    left: 17%;
}
.progress-bar{
    appearance: none;
    position: absolute;
    z-index: 4;
    height: 5px;
    background: #000000;
    width: 160pt;
    bottom: 5.8%;
    border-radius: 30px;
    left: 17%;
}
.progress-border{
    appearance: none;
    position: absolute;
    z-index: 4; 
    height: 5px;
    
    background: rgb(193, 255, 6);
    bottom: 5.8%;
}
.start-time{
    position: absolute;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: -7.5%;
    left: 17%;
    z-index: 4;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: white;
    align-items: center;
}
.end-time{
    position: absolute;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: -1%;
    right: 11%;
    z-index: 4;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    align-items: center;
    color: rgb(193, 255, 6);
}
a{
    list-style: none;
    text-decoration: none;
}
.footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 30px;
    margin-right: 30px;
    align-items: center;
    padding-top: 760px;
}
.year{
    color: rgb(193, 255, 6);
    font-family: 'Forum', sans-serif;
    font-weight: bold;
    font-size: 20px; 
}
.school{
    color: rgb(193, 255, 6);
    font-family: 'Forum', sans-serif;
    font-weight: bold;
    font-size: 20px; 
    text-decoration: none;
}
.github{
    color: rgb(193, 255, 6);
    font-family: 'Forum', sans-serif;
    font-weight: bold;
    font-size: 20px; 
    text-decoration: none;
}
a{
    color: inherit;
}