body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    display: flex;
    flex-direction: column;
    user-select: none;
    --webkit-user-select: none;
    background: rgb(238,174,202);
    background: linear-gradient(180deg,
        lightgrey 0%,
        #e8e9e8 5%,
        #e8e9e8 95%,
        lightgrey 100%);
}

.container-resp{
    display: flex;
    position: fixed;
    overflow: hidden;
    flex-wrap: nowrap;
    width: 120px;
    height: 70vh;
    margin-left: calc(50vw - 67px);
    margin-top: 20vh;
    border-radius: 20px;
    background: linear-gradient(180deg,
        #d2e1de 0%,
        white 30%,
        white 70%,
        #d2e1de 100%);
    border: #b1bfbb 7px solid;
    box-shadow: inset 0px 0px 2px black;
}

.respBowl{
    display: flex;
    position: fixed;
    width: 118px;
    height: 118px;
    margin-left: 1px;
    margin-top: calc(25vh - 60px);
    border-radius: 50%;
    background: white;
    box-shadow: inset 0px 0px 40px lightgrey;
    align-items: center;
    justify-content: center;
    font-size: larger;
}

.filler{
    display: block;
    width: 118px;
    height: 100%;
    margin-left: 1px;
    margin-top: 25vh;
    background: #6666bb44;
    box-shadow: inset 0px 0px 50px white;
}

@keyframes bowl-toBottom{
    0%{
        transform : translateY(calc(-25vh + 60px));
    }
    100%{
        transform : translateY(calc(45vh - 60px));
    }
}
@keyframes bowl-toTop{
    0%{
        transform : translateY(calc(45vh - 60px));
    }
    100%{
        transform : translateY(calc(-25vh + 60px));
    }
}

.slider{
    display: flex;
    position: relative;
    flex-direction: row;
    width: 80vw;
    height: 30px;
    outline: none;
    margin-top: 3vh;
    margin-left: 5vw;
}
input[type="range"] {
    -webkit-appearance: none; /* Désactive le style par défaut */
    display: flex;
    flex: 1;
    position: relative;
    height: 30px;
    background: #ddd;
    border-radius: 15px;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Style du pouce (curseur) */
    appearance: none;
    width: 50px;
    height: 50px;
    background: #77777777;
    box-shadow: inset 0px 0px 20px white;
    border-radius: 50%;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
    background: yellowgreen;
}
input[type="range"]::-moz-range-thumb {
    width: 50px;
    height: 50px;
    background: #77777777;
    box-shadow: inset 0px 0px 20px white;
    border-radius: 50%;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb:hover {
    background: yellowgreen;
}

label{
    display: flex;
    margin-top: 1vh;
    width: 10vw;
    height: 30px;
    text-align: center;
    position: relative;
}