/*
 
files.thatstel.la Stylesheet for Adobe Flash content

v2024.0101.0
*/

* {
    font-family: 'Roboto', sans-serif;
}

@media screen and (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
    }
/* Prevent font scaling in landscape while still allowing user zoom */
}


body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color:#ffffff;
    height: 101vh;
}

h1 {
    margin-top: 0;
    font-weight: 400;
}

h2 {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

p {
    padding-left: 10px;
    padding-right: 10px;
}

.center {
    text-align: center;
}

.centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
/* use to center images */
}

footer {
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 0.8em;
    background-color: rgba(255, 255, 255, 0.85);
}
    
.footer {
    display: inline-flex;
    
}

a {
    color:#E872E2;
}

.flashcontainer {
    display: flex;
    max-width: 100%;
    height: 100%;
    max-height: 70vh;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    position: relative;
}

.controlscontainer {
    touch-action: manipulation;
    -webkit-user-select: none;
    z-index: 10;
    left: 0;
    bottom: 15%;
    position: absolute;
    display: none; /* gets set to grid when controls container is to be shown (via js) */
    gap: 10px;
}
.controlscontainer button {
    touch-action: manipulation;
    -webkit-user-select: none;
    width: 100%;
    height: 100%;
    font-size: 2.0em;
    padding: 9px 20px;
    border: none;
    color: #FFFFFF;
    background-color: #ffffff50;
    opacity: 80%;
}
#controlsleftbutton {
    grid-column: 1;
    grid-row: 2;
}
#controlsupbutton {
    grid-column: 2;
    grid-row: 1;
}
#controlsrightbutton {
    grid-column: 3;
    grid-row: 2;
}
#controlsdownbutton {
    grid-column: 2;
    grid-row: 3;
}

.flash {
    touch-action: manipulation;
    -webkit-user-select: none;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

#fullscreenbutton {
    display: none;
}
#nomedianoticep {
    display: none;
}

@media screen and (orientation:landscape) {
    .flashcontainer {
        aspect-ratio: 16/9;
    }

    body {
        height: 100vh;
    }
}

.divMehFullscreen{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-height: 100vh;
    max-width: 100vw;
    aspect-ratio: revert;
    width: calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left));
    margin: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
html.noScroll, html.noScroll > body{
    overflow: none;
}
.hideElement {
    display: none;
}

/* the below applies when dark mode is enabled :fr:*/
@media (prefers-color-scheme: dark) {
    * {
        color:#FFFFFF;
    }

    button, select {
        color: #000000;
    }

    footer {
        background-color: rgba(24, 24, 24, 0.85);
    }
    
    body {
        background-color:#141414;
    }
}