*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body {
    height: 100dvh;
    width: 100dvw;
}

model-viewer {
    position: relative;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
}

.de,
.fr,
.en {
    display:none;
}

body.de,
body.fr,
body.en {
    display: block;
}

body.de .de {
    display: initial;
}

body.fr .fr {
    display: initial;
}

body.en .en {
    display: initial;
}

.visibleX55,
.visibleX100,
.visibleX150,
.visibleQ30,
.visibleQ80 {
    display: none;
}

body.x55 .visibleX55 {
    display: block;
}

body.x100 .visibleX100 {
    display: block;
}

body.x150 .visibleX150 {
    display: block;
}

body.q30 .visibleQ30 {
    display: block;
}

body.q80 .visibleQ80 {
    display: block;
}

button {
    border: none;
    padding: 0.4em;
    cursor: pointer;
}

button:hover {
    background-color: #aaa;
}

.controls {
    margin: 5vmin;
    width: fit-content;
}

.controls > div > div {
    margin: 0.4em 0;
}