@font-face {
    font-family: oswald;
    src: url('/font/Oswald-Medium.ttf');
}

/* Use a more intuitive/familiar box sizing mode */
* {
    box-sizing: border-box;
}

:root {
    /* A 'dvmin' like scaling, that kicks in at an aspect of 0.75 (4:3), instead of 1.0 */
    --font-scale: min( 1dvw * 1.3, 1dvh );
    --font-scale-6: calc( var( --font-scale ) * 6 );
    --font-scale-5: calc( var( --font-scale ) * 5 );
}

html {
   height: 100%;
   pointer-events: auto;
   font-size: 5dvh;
   font-family: oswald;
}

body {
   overflow: hidden hidden;
   height: 100%;
   width: 100%;
   margin: 0px;
   color: white;
   user-select: none;
}

app {
   display: block;
   height: 100%;
   width: 100%;
   background-color: lightblue;
   background-image: url("img/fe_background_blue.avif");
   background-repeat: no-repeat;
   background-size: cover;
}

.unselectable {
   pointer-events: none;
   touch-action: none;
}

input {
   display: block;
   border-color: black;
   min-width: 5em;
   font-size: 5dvh;
   text-transform: uppercase;
   -webkit-appearance: none;
   -moz-appearance: textfield;
   font-family: oswald;
}

input:focus {
   outline: none;
   text-decoration: none;
   caret-color: black;
}

button {
   outline: none;
   font-size: 5dvh;
   font-family: oswald;
   cursor: pointer;
}

.standard-button {
   width: 100%;
   border-width: 0;
   border-image-source: url("img/tile_purple.webp");
   border-image-slice: 25% fill;
   border-image-width: 3dvmin;
   background-color: transparent;
   color: white;
   text-align: center;
   padding: 2dvmin;
}

.standard-button.unselectable {
   background-color: lightgray;
   color: dimgrey;
}

.standard-input {
   width: 100%;
   border-image-source: url("img/tile_cyan.webp");
   border-image-slice: 25% fill;
   border-image-width: 3dvmin;
   background-color: transparent;
   text-align: center;
   padding-inline: 0px;
   padding: 2dvmin;
}

.layout-down {
   display: flex;
   flex-flow: column nowrap;
   overflow: hidden hidden;
   align-items: center;
   justify-content: center;
   width: 100%;
   gap: 1dvmin;
}

.layout-across {
   display: flex;
   flex-flow: row nowrap;
   overflow: hidden hidden;
   justify-content: center;
   align-items: stretch;
   gap: 3dvmin;
}

/* Layout across for landscape, down for portrait */
.layout-orientation {
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden hidden;
    justify-content: center;
    align-items: stretch;
    gap: 3dvmin;
}

@media (max-aspect-ratio: 1) {
    .layout-orientation {
        flex-flow: column nowrap;
    }
}

/* Default visualisation for 9-sliced bordered tile */
.standard-tile {
   border: none;
   border-image-source: url("img/tile_blue.webp");
   border-image-slice: 25% fill;
   border-image-width: 3dvmin;
   background-color: transparent;
}

@media (max-aspect-ratio: 1) {
    .standard-panel {
        inset: 10dvh 6dvw 20dvh 6dvw;
    }
}

/* Default full-page panel */
.standard-panel {
   position: fixed;
   inset: 10dvh 12dvw 10dvh 12dvw;
   text-align: center;
   padding: 5dvmin 4dvw 5dvmin 4dvw;
}

@media (max-aspect-ratio: 1) {
    .standard-panel {
        inset: 10dvh 6dvw 15dvh 6dvw;
    }
}

.flex-align-start{
   align-self: start;
}