:root {
    --fridge-color: #5b869c; /* Define the color variable with a default value */
    --handle-color: #475c67;
}
#fridge {
    width: 34vw;
    height: 33vw;   /* 23+4+2+4 */
    position: relative;
    /* chane here the position of the fridge*/
    top: 2vw;
    left: 2vw;
}
#fridgeContent {
    left: 3.5vw;            /*+ 0.5 */
    top: 3.5vw;             /*+ 0.5 */
    width: 16.7vw;        /*17-1-1(boarder)      + 0.5 +0.3 damits ein weniger größer is links und rechts*/
    height: 24.8vw;       /* 25-1-1(boarder)       + 0.5 +0.5 damits ein weniger größer is oben und unten*/
    border: 0.6vw solid var(--fridge-color);        /*rahmen*/
    border-radius: 4% 0 0 4%;
    color: black;       /* = textcolor*/
    background-color: #bbe3e3;
    position: absolute;
    z-index: 1;     /*controls the stacking order of positioned elements*/
    /*A higher z-index value brings an element closer to the front, and a lower value moves it further back*/
}
#insides{
    top: 1vw;
    left:1vw;
    position: absolute;
    width: 15vw;            /* 16.7 -0.5*/
    height: 22.4vw;                /*24.8 -0.5 -0.5*/
    border: 0.2vw solid grey;
    background-color: lightcyan;
}
.toxicFridge img{
    width:100%;
    height: 100%;
    object-fit: cover;
}
#strich1{
    position: absolute;
    width: 1.6vw;
    height: 0.2vw;
    background-color: grey;
    transform-origin: top left;
    transform: rotate(45deg);
}
#strich2{
    position: absolute;
    bottom: 0;          /*macht das es ganz unten liegt*/
    width: 1.6vw;
    height: 0.2vw;
    background-color: grey;
    transform-origin: bottom left;
    transform: rotate(315deg);
}
#food{
    position: relative;
    top: 1vw;
    left: 1vw;
}
.fridge ul{
    list-style-type: none;
}
.fridge li{
    font-size: 2vw;
    margin: 3.6vw 2vw 3.6vw 2vw ;
}
.fridgeDoor{
    left: 4vw;
    top: 4vw;
    width: 17vw;
    height: 25vw;
    position: absolute;          /* removes object from html flow and does like it doesn exist */
    z-index: 2;
    transform-origin: right;        /*right or left je nachdem von welcher seite mans aufmachen will*/
    transform-style: preserve-3d;
    transition: transform 4s;
}
#right{
    position: absolute;
    border-radius: 3% 0 0 3%;
    background-color: #9fe0fb;
    width: 17vw;
    height: 25vw;
    transform: translateZ(1vw);
}
#right2{            /*rückseite von right*/
    position: absolute;
    border-radius: 3% 0 0 3%;
    background-color: var(--fridge-color);
    width: 17vw;
    height: 25vw;
    transform: translateZ(0.99vw);
}
#left{
    position: absolute;
    border-radius: 3% 0 0 3%;
    background-color: #95d2eb;
    width: 17vw;
    height: 25vw;
    transform: translateZ(-1vw);
}
#left2{             /*das ist sozusagen die hinterseite von left*/
    position: absolute;
    border-radius: 3% 0 0 3%;
    background-color: var(--fridge-color);
    width: 17vw;
    height: 25vw;
    transform: translateZ(-0.99vw);
}
#front{
    position: absolute;
    background-color: var(--fridge-color);
    right: 3vw;            /*16vw damits ganz an der spitze ist / 3 ist einfach irgendwo ganz hinten*/
    width: 2vw;
    height: 24.9vw;           /*25 wäre die ganze länge*/
    top: 0.05vw;
    transform: rotateY(90deg);
}
#top {
    position: absolute;
    border-radius: 0;
    width:16.5vw;       /*17 für ohne rundung*/
    left: 0.5vw;    /*damit die rundung mitbedacht wird*/
    height: 2vw;
    bottom: 23.98vw;
    background-color: var(--fridge-color);
    transform-origin: center;
    transform: rotateX(90deg);
}
#bot{
    position: absolute;
    border-radius: 0;
    width:16.5vw;
    left: 0.5vw;    /*damit die rundung mitbedacht wird*/
    height: 2vw;
    top: 23.99vw;
    background-color: var(--fridge-color);
    transform-origin: center;
    transform: rotateX(90deg);
}
.doorHandle{
    position: absolute;          /* removes object from html flow and does like it doesn exist */
    transform-origin: right;            /* war right davor?*/
    transform-style: preserve-3d;
}
#frontH{
    position: absolute;
    background-color: var(--handle-color);
    top: 9vw;
    left: 1vw;
    width: 1vw;
    height: 5vw;
    transform: translateZ(2.5vw);     /*dadurch brauch ich das z-index ding nicht (was sowieso nd funktioniert in diesem fall irgenwie)*/
}
#leftH{
    position: absolute;
    background-color: var(--handle-color);
    top: 9vw;
    left: 1vw;
    width: 0.8vw;
    height: 5vw;
    transform-origin: left;
    transform: translateZ(2.5vw) rotateY(90deg);
}
#rightH{        /* eigentlich unnötig weil mans nicht sieht*/
    position: absolute;
    background-color: var(--handle-color);
    top: 9vw;
    left: 1vw;
    width: 0.8vw;
    height: 5vw;
    transform-origin: right;
    transform: translateZ(2.5vw) rotateY(270deg);
}
.handleCubes{
    top: 9vw;
    left: 1vw;
    width: 1vw;
    height: 5vw;
    position: absolute;          /* removes object from html flow and does like it doesn exist */
    transform-origin: right;            /* war right davor?*/
    transform-style: preserve-3d;
}
#frontC{
    position: absolute;
    background-color: var(--handle-color);
    width: 0.7vw;
    height: 0.7vw;
    transform-origin: left;
    transform: translateZ(1vw) rotateY(270deg);
}
#frontC2{
    position: absolute;
    background-color: var(--handle-color);
    bottom: 0.1vw;
    /*left: 1vw; würd das ganze nach hinten machen*/
    width: 0.7vw;
    height: 0.7vw;
    transform-origin: left;
    transform: translateZ(1vw) rotateY(270deg);
}
.fridgeFoots{
    top: 28.9vw;
    left: 5.5vw;
    width: 13vw;
    height: 5vw;
    position: absolute;
}
#foot1{
    width: 2vw;
    height: 1vw;
    background-color: #273238;
    position: absolute;
    transform-origin: bottom right;
    transform: rotateZ(45deg);
}
#foot2{
    width: 2vw;
    height: 1vw;
    background-color: var(--handle-color);
    position: absolute;
}
#foot3{
    width: 2vw;
    height: 1vw;
    right: 0;
    background-color: #273238;
    position: absolute;
    transform-origin: bottom right;
    transform: rotateZ(45deg);
}
#foot4{
    width: 2vw;
    height: 1vw;
    right: 0;
    background-color: var(--handle-color);
    position: absolute;
}
#fridge.open .fridgeDoor{           /*animation / wird von firdgeMagic.js aufgerufen*/
    transform: perspective(2000px) rotateY(113deg);       /*rotateY(-110deg) je nachdem von welcher seite mans aufmachen will*/
}