* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    font-size: 16px;
}

#iframe-container {
    width: 99%;
    scale: 1.01;
    background: transparent;
    aspect-ratio: 16/9;
    max-height: calc(100vh - 30px - 1rem);
    max-height: calc(100svh - 30px - 1rem);
    max-width: calc(177.78vh - ((30px - 1rem) * 5.85));
    max-width: calc(177.78svh - ((30px - 1rem) * 5.85));
    margin: auto;
    position: relative;
    top: 0; /* vertical center */
    left: 0; /* horizontal center */
    overflow: hidden;
}

#iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0;
    border: 0;
    scale: 1.02;
}

footer {
     position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
     /*font-size: 1em;*/
     padding: 15px 0;
     overflow: hidden;
 }

footer p {
    margin: 0 12%;
}

footer a {
    color: black;
}

footer img {
    position: fixed;
    bottom: -5px;
    left: 0;
    height: calc(30px + 32px);

}

@media screen and (max-aspect-ratio: 1/1.2){
    #iframe-container {
        rotate: 90deg;
        top: calc((100% - 30px - 1rem)/3.3);
        width: auto;
        max-width: 100svw;
        max-height: calc(100svh - 30px - 1rem);
        scale: 1.35;
    }
}

@media (min-width:0px) and (max-width: 1280px) {
    body {
        font-size: 20px;
    }
}