Manuel/style.css

@media only screen and (max-width: 1000px) {
    :root {
        /* -webkit-user-select: none; */
        -webkit-touch-callout: none;
        -ms-user-select: none;
        -moz-user-select: none;
        user-select: none;
        --color-scheme: light;
        --ecriture: black;
        --background: white;
        --police: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        --scalenb: 0.5;
        --iframe-width: 560px;
        --iframe-height: 800px;
    }
    
    html {
        /* color-scheme: dark !important; */
        color-scheme: var(--color-scheme);
        background: var(--background);
        color: var(--ecriture);
        font-size: 1.5rem;
        font-family: var(--police);
    }
    
    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        background-color: var(--background);
    }
    
    #iframe {
        display: flex;
        /* width:30vh; */
        height: 76vh;
        transform: scale(var(--scalenb));
        position: relative;
        transform-origin: top left;
        margin: 10px;
    }
    
    #iframe-1 {
        display: flex;
        /* margin: 5px; */
        background-color: transparent;
    
    }
    
    #iframe-2 {
        display: flex;
        /* margin: 5px; */
        background-color: transparent;
    }
    
    .iframe-div-1 {
        /* display: block; */
        /* height: 2043px;
            width: 1477px; */
        height: var(--iframe-height);
        width: var(--iframe-width);
    }
    
    .iframe-div-2 {
        /* display: block; */
        /* height: 2043px;
            width: 1477px; */
        height: var(--iframe-height);
        width: var(--iframe-width);
    }
    
    iframe {
        /* width: 553px;
            height: 794px; */
        /* width: fit-content;
            height: fit-content; */
        width: 100%;
        height: 100%;
        display: block;
        margin-bottom: 20px;
    }
    
    #img {
        display: flex;
        margin: 5px;
        background-color: transparent;
        transform: scale(var(--scalenb));
        position: relative;
        transform-origin: top left;
    }
    
    img {
        width: 50%;
    }
    
    label {
        display: block;
        margin: 10px;
    }
    
    input[type="text"] {
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        line-height: 1.5;
        width: 130px;
        border-color: var(--background);
    }
    
    input[type="radio"] {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 5px;
    }
    
    button {
        /* padding: 5px; */
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
        width: 100px;
        height: 40px;
    }
    
    button:hover {
        background-color: #3e8e41;
    }
    
    
    
    button:last-child {
        margin-right: 10px;
    }
    
    h1 {
        font-size: 15px;
    }
    
    a {
        color: #3391ff;
    }
    #changepagebuttondesktop {
        display: none;
    }
    #changepagebuttonmobile {
        position: absolute;
        /* bottom: 0px;
        left: 50%;
        transform: translate(-50%); */
    }
}

@media only screen and (min-width: 1001px) {
    :root {
        /* -webkit-user-select: none; */
        -webkit-touch-callout: none;
        -ms-user-select: none;
        -moz-user-select: none;
        user-select: none;
        --color-scheme: light;
        --ecriture: black;
        --background: white;
        --police: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        --scalenb: 0.5;
        --iframe-width: 560px;
        --iframe-height: 800px;
    }
    
    html {
        /* color-scheme: dark !important; */
        color-scheme: var(--color-scheme);
        background: var(--background);
        color: var(--ecriture);
        font-size: 1.5rem;
        font-family: var(--police);
    }
    
    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        background-color: var(--background);
    }
    
    #iframe {
        display: flex;
        /* width:30vh; */
        height: 76vh;
        transform: scale(var(--scalenb));
        position: relative;
        transform-origin: top left;
        margin: 10px;
    }
    
    #iframe-1 {
        display: flex;
        /* margin: 5px; */
        background-color: transparent;
    
    }
    
    #iframe-2 {
        display: flex;
        /* margin: 5px; */
        background-color: transparent;
    }
    
    .iframe-div-1 {
        /* display: block; */
        /* height: 2043px;
            width: 1477px; */
        height: var(--iframe-height);
        width: var(--iframe-width);
    }
    
    .iframe-div-2 {
        /* display: block; */
        /* height: 2043px;
            width: 1477px; */
        height: var(--iframe-height);
        width: var(--iframe-width);
    }
    
    iframe {
        /* width: 553px;
            height: 794px; */
        /* width: fit-content;
            height: fit-content; */
        width: 100%;
        height: 100%;
        display: block;
        margin-bottom: 20px;
    }
    
    #img {
        display: flex;
        margin: 5px;
        background-color: transparent;
        transform: scale(var(--scalenb));
        position: relative;
        transform-origin: top left;
    }
    
    img {
        width: 50%;
    }
    
    label {
        display: block;
        margin: 10px;
    }
    
    input[type="text"] {
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        line-height: 1.5;
        width: 300px;
        border-color: var(--background);
    }
    
    input[type="radio"] {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 5px;
    }
    
    button {
        /* padding: 5px; */
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
        width: 200px;
        height: 40px;
    }
    
    button:hover {
        background-color: #3e8e41;
    }
    
    
    
    button:last-child {
        margin-right: 10px;
    }
    
    h1 {
        font-size: 15px;
    }
    
    a {
        color: #3391ff;
    }
    #changepagebuttondesktop {
        position: fixed;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%);
    }
    #changepagebuttonmobile {
        display: none;
    }
}