html {
    font-family: 'Alata', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
}

body {
    background:linear-gradient(#6e2570, #e2e2e2);
    height: 100%;    
    font-size: 1.4rem;
    margin: auto;
    padding: 2rem;
    text-align: center;
}

.player {
    background: #e2e2e2;
    padding: 2rem;
    border-radius: 2rem;  
    
}

#controls {
    border: 1px #6e2570 solid;
    border-radius: 1rem;
    padding: 1.6rem;
}

.controls_wrapper > span {
    cursor: pointer;
    color: #6e2570;
    font-size: 6rem;
    padding: 2rem;
}

#currentSong {
    overflow: hidden;
}

#songList {
    overflow: hidden;
    text-align: center;
    
}

li {
    list-style-type: none; 
    margin: 0;
    cursor: pointer;
    padding: 1.5rem;
}

li:hover {
    background: #d1b7d2;
    margin: auto;
}

progress {
    width: 100%;
    height: 3rem;
    margin-bottom: 1rem;
}

.pulse {
    animation: pulse;
    animation-duration: 0.4s;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

@media(min-width: 800px) {
    body {
        max-width: 60vw;
        font-size: 1.8rem;
    }
}