@font-face {
    font-family: 'Veronika';
    src: URL('Veronika-Regular.ttf') format('truetype');
}

body{
    background-color: beige;
}

#text{
    z-index: 1;
    position: absolute;
    left: 43%;
    width: 15%;
}

#cat{
    position: absolute;
    z-index: 1;
    width: 45%;
    left: 50%;
    top: 10%;
}

#mouth{
    position: absolute;
    z-index: 1;
    left: 57%;
    top: 50%;
    cursor: pointer;
    size: calc(100% - 30%);

}

.a{
    width: 6.5%;
}

.b{
    width: 6%;
}

.c{
    width: 5.5%;    
}

.d{
    width: 5%;    
}

.e{
    width: 4.5%;    
}

.f{
    width: 4%;    
}

.g{
    width: 3.5%;    
}


.volume-slider input {

    accent-color: #503824;
    max-width: 100px;
    position: absolute;
    z-index: 2;
    left: 47.5%;
    top: 27.5%;

}

span{
    position: absolute;
    z-index: 2;
    left: 48.6%;
    top: 30%;
    font-size: 24px;
    font-family: 'Veronika';
}

p{
    font-family: Veronika;
    font-size: 24px;
    width: 18%;
    top: 25%;
    left: 10%;
    position: absolute;
}