/* Reset CSS */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

/* Déclaration de la variable --volet-position-top qui détermine à combien de px l'image est affichée en partant du haut */

:root{
    --volet-position-top:0px;
}

/* Div jaune */

.volet{
    margin:10px;
    background-color:#FFEFCA;
    max-width:365px;
    height:500px;
    overflow: hidden;
}

/* Div ayant pour background l'image du volet */

.img-volet{
    height:100%;
    background-repeat: no-repeat;
    background-position-y: var(--volet-position-top);
    background-image: url('img/bg_volet.png')
}

/* Input type range dont l'orientation est changée */

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 290px;
    height: 480px;
    transform: rotate(180deg);
    position:absolute;
    left:20px;
    top:30px;
    opacity: 0;
}

@media screen and (min-width:350px){
    input[type=range][orient=vertical]{
        width:330px;
    }
}