*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f5f5f5;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.container{
    width:500px;
    padding:40px;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    text-align:center;
}

.volume-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

#speaker{
    font-size:38px;
    color:#6b5cff;
    cursor:pointer;
    transition:.2s;
}

#speaker:hover{
    transform:scale(1.1);
}

#slider{
    width:260px;
    cursor:pointer;
    accent-color:#6b5cff;
    transition:.2s;
}

#value{
    width:60px;
    font-size:18px;
    font-weight:bold;
    color:#444;
}

.hint{
    margin-top:30px;
    color:#666;
    font-size:16px;
}

/* Used by JavaScript */

.shake{
    animation:shake .3s;
}

@keyframes shake{

0%{transform:translateX(0);}
20%{transform:translateX(-8px);}
40%{transform:translateX(8px);}
60%{transform:translateX(-6px);}
80%{transform:translateX(6px);}
100%{transform:translateX(0);}

}

.rotate{
    animation:rotate .5s;
}

@keyframes rotate{

0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}

}

@media(max-width:600px){

.container{
    width:90%;
}

.volume-box{
    flex-direction:column;
    gap:15px;
}

#slider{
    width:100%;
}

}