/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
*
{
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    image-rendering: pixelated;
}

html
{
    font-size: 8px;
}

body
{
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    /*background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);*/
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    width:100vw;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen 
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    text-transform:uppercase;*/
    overflow: hidden;
}

/* These are for overriding the style of sliders */
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
}
/* END - These are for overriding the style of sliders */

.col
{
    padding: 0px!important;
}

.h-2
{
    height: 2%!important;
}

.h-5
{
    height: 5%!important;
}

.h-10
{
    height: 10%!important;
}

.h-15
{
    height: 15%!important;
}

.h-20
{
    height: 20%!important;
}

.h-45
{
    height: 45%!important;
}

.h-65
{
    height: 65%!important;
}

.h-70
{
    height: 70%!important;
}

.h-80
{
    height: 80%!important;
}

.h-85
{
    height: 85%!important;
}

.h-90
{
    height: 90%!important;
}

.background
{
    background: url("/img/Letterbox-Background.png") repeat left top;
}

@media (max-aspect-ratio: 2) {
    #sceneContainer {
        aspect-ratio: 16/10;
    }
}

@media not (max-aspect-ratio: 2) {
    #sceneContainer {
        aspect-ratio: 19.5/9;
    }
}

#sceneContainer
{
    height: 100vh;
    background-color: black;
    padding: 0px;
}

.sceneInnerContainer
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.sceneInnerContainer div
{
    margin: 0px;
}

.uiArea
{
    position: absolute;
    left: 0px;
    top: 4%;
    width: 100%;
    height: 92%;
}