body {
    font-family: 'Nunito', sans-serif;
    background-color: black;
    overflow: hidden;
    margin: 0px 0px 0px 0px;
    position: fixed;
}

@font-face {
    font-family: "Silkscreen";
    src: url('fonts/silkscreen/Silkscreen-Regular.ttf')  format('truetype');
}

@font-face {
    font-family: "Silkscreen";
    unicode-range: U+4E00-9FFF, U+3400-4DBF;
    src: url('fonts/madou-futo-maru-gothic-font/MadouFutoMaruGothic_custom.ttf')  format('truetype');
}

/* SAFE AREA */
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --console-color: #ff9177;
    --console-border: 20pt; /* var(--console-border) */
    --screen-border: 10pt; /* var(--screen-border) */
    --margin-border: 21pt; /* var(--margin-border) */
    --pixel-size: 2pt; /* var(--margin-border) */
    --dpad-cam-dist: 75em;
    --dpad-tilt-amount: 1deg;
    --dpad-tilt-amount-neg: -1deg;
    --screen-size: 100px;
}

#js-blocker {
    background-color: #222;
    display: block;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    padding-top: 32px;
    padding-left: 20%;
    padding-right: 20%;
    /*text-align: center;*/

    font-family: "Silkscreen";
    font-size: 1.2em;
    color: white;
}
#js-blocker a {
    color:#ff9177;
}
#logo-blocker {
    display: block;
    width: 280px;
    height: 100px;
    margin: auto;
    background-image: url("./img/UI/surfy.png");
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 32px;
}

#safe-area {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*width: 100%;
    height: 100%;*/
    overflow: hidden;
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background-color: #222;
    height: 100%;

    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    touch-action:none; /*manipulation*/
}

@supports (padding-top: env(safe-area-inset-top)) {
    #safe-area {
        --safe-area-inset-top: env(safe-area-inset-top);
        height: calc(100% + var(--safe-area-inset-top));
    }
}

@media (display-mode: fullscreen) {
    #safe-area {
        height: 100%;
    }
}

@media (display-mode: standalone) {
    body {
        height: 100%;
    }
}
/* SAFE AREA */

#virtual-console {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    /*max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1.7;1 / 1.618;*/
    /*max-width: min(95vh, 2024px);
    max-width: min(60vh, 1024px);
    /*height: 100%;
    padding: 1.5vmin;*/

    background-color: var(--console-color);
    touch-action: none; /*manipulation*/
    margin:auto;
    box-shadow: 0 0 0 var(--console-border) var(--console-color);
    border-radius: var(--console-border);
    
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#video-container {

}
#canvas {
    width: 100%;
    height: 100%;

    image-rendering: pixelated;
    display: block;
    z-index: -1;
}
#canvas-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
    /*aspect-ratio: 1 / 1;*/
    border-width: var(--screen-border);
    border-style: solid;
    border-color: #af7568 #79534b #af7568 #79534b;
    background-color: #222;
    /*box-shadow: 0 0 0 15pt var(--console-color);*/
    
    /*background-image: url("./img/loading-withtext_pixel.png");
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;*/
}
#text-over-canvas-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
    /*aspect-ratio: 2 / 1;*/
    height: calc(var(--screen-size)*0.5);
    top: 0;
    z-index: 1;
    padding: var(--screen-border);
    position: absolute;
    
    text-align: center;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    
    font-family: "Silkscreen";
    font-size: calc(var(--pixel-size) * 16);
    color: white;
    text-shadow: var(--pixel-size) var(--pixel-size) black;
}
#console-margins {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: calc(var(--console-border));
    width: 100%;
    height: 100%;
    align-items: center;
}

.centered-container {
    position: fixed;
    width: 100%;
    min-height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#resolution {
    color: white;
    font-size: 1rem;
    margin: auto;
    margin-bottom: 4px;
    align-self: center;
    touch-action:none;
    text-shadow: 0px 0px 4px #000000;
}

#fullscreen-button {
    position: fixed;
    bottom: 0px;
    right: 0px;
    background-color: white;
    color: black;
    font-size: 1rem;
    margin: 4px;
    padding: 4px;
    touch-action:none;
}

#dpad {
    /*width: 45%;
    aspect-ratio: 1 / 1;*/
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    touch-action: none;
    background-position: right center;
    background-size: contain;
    background-image: url("./img/UI/d-pad-empty.png");
    background-repeat: no-repeat;
}
#dpad-shade {
    /*aspect-ratio: 1 / 1;*/
    position: absolute;
    left:0;
    top: 0;
    display: block;
    touch-action: none;
    background-position: right center;
    background-size: contain;
    background-image: url("./img/UI/dpad-bg_shade-dark.png");
    background-repeat: no-repeat;
    pointer-events:none;
    /* TEST IPAD */
    transform-style: preserve-3d;
}
.dpad-tilt-up {
  transform:
  perspective(calc(var(--console-border) * 3))
  rotateX(var(--dpad-tilt-amount));
}
.dpad-tilt-down {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateX(calc(-1 *  var(--dpad-tilt-amount)));
}
.dpad-tilt-left {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateY(calc(-1 *  var(--dpad-tilt-amount)));
}
.dpad-tilt-right {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateY(var(--dpad-tilt-amount));
}
.dpad-tilt-right-down {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateX(calc(-1 *  var(--dpad-tilt-amount)))
    rotateY(var(--dpad-tilt-amount));
}
.dpad-tilt-right-up {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateX(var(--dpad-tilt-amount))
    rotateY(var(--dpad-tilt-amount));
}
.dpad-tilt-left-down {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateX(calc(-1 *  var(--dpad-tilt-amount)))
    rotateY(calc(-1 *  var(--dpad-tilt-amount)));
}
.dpad-tilt-left-up {
    transform:
    perspective(calc(var(--console-border) * 3))
    rotateX(var(--dpad-tilt-amount))
    rotateY(calc(-1 *  var(--dpad-tilt-amount)));
}

#dpad-icons-grid {
    width: 100%;
    height: 100%;
    /*display: grid;
    grid: repeat(3, 1fr) / repeat(3, 1fr);*/
    
    display: block;
    position: relative;
}
.dpad-space {
    touch-action: none;
    /*margin: auto;*/
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
}
.dpad-icon {
    cursor: pointer;
    background-size: contain;
    background-position: middle center;
    touch-action: none;
}
#dpad-icon-t-bg {
    margin-top: 27%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    background-size: contain;
    background-position: middle center;
    touch-action: none;
}

#controls {
    touch-action:none;
    position:absolute;
    /*margin: 2vmin;
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1.92 / 1;*/
    bottom: 0;
    width: 100%;
}


#dpad-icon-t {
    height: 45%;
    width: 35%;
    position: absolute;
    top: -10%;  
    left: 27.5%;
    background-origin: content-box;
    margin-left: 5%;
    background-repeat: no-repeat;
    background-position: bottom;
}
#dpad-icon-b {
    height: 35%;
    width: 35%;
    position: absolute;
    bottom: 0;
    left: 27.5%;
    background-origin: content-box;
    margin-left: 5%;
}
#dpad-icon-r {
    height: 35%;
    width: 35%;
    position: absolute;
    right: 0;
    top: 27.5%;
    background-origin: content-box;
    margin-top: 5%;
}
#dpad-icon-l {
    height: 35%;
    width: 35%;
    position: absolute;
    left: 0;
    top: 27.5%;
    background-origin: content-box;
    margin-top: 5%;
}

#dpad-icon-tl {
    width: 25%;
    height: 25%;
    position: absolute;
    top: 12.5%;
    left: 12.5%;
}
#dpad-icon-tr {
    width: 25%;
    height: 25%;
    position: absolute;
    top: 12.5%;
    right: 12.5%;
}
#dpad-icon-br {
    width: 25%;
    height: 25%;
    position: absolute;
    bottom: 12.5%;
    right: 12.5%;
}
#dpad-icon-bl {
    width: 25%;
    height: 25%;
    position: absolute;
    bottom: 12.5%;
    left: 12.5%;
}
#dpad-icon-tt {
    height: 10%;
    width: 35%;
    position: absolute;
    top: -10%;
    left: 32.5%;
    background-origin: content-box;
}


.button-display {    
    width: 100%;
    height: 100%;
}

#speaker {
    /*aspect-ratio: 1 / 1;
    width: 25%;*/
    display: block;
    touch-action: none;
    background-image: url("./img/UI/speaker.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

#logo {
    display: block;
    touch-action: none;
    background-image: url("./img/UI/surfy.png");
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    /*width: 30%;
    aspect-ratio: 2.8 / 1;*/
    margin: auto;
    position: absolute;
    right: 30.5%;
}
.round-button {
    touch-action: none;
    border-radius: 50%;
    /*width: 20%;
    aspect-ratio: 1 / 1;*/
    position: absolute;
    display: block;
    cursor: pointer;
}
#r-button {
    background-color: #891bff;
    top: 0;
    right: 0;
    right: calc(var(--screen-border)/2);
    margin:auto;
}
.r-button-blink {
    animation: purple-blink 0.7s infinite;
}
@keyframes purple-blink{
    20% {
        background-color: #891bff;
    }
    50% {
        background-color: #ffffff; /*#351d50 #e6d0ff*/
    }
    80% {
        background-color: #891bff;
    }
}
.end-button-blink {
    animation: green-blink 0.7s infinite;
    background-color: #ffffff;
}
@keyframes green-blink{
    20% {
        background-color: #ffffff;
    }
    50% {
        background-color: rgb(42, 255, 42);
    }
    80% {
        background-color: #ffffff;
    }
}
#l-button {
    background-color: #ffd548;
    right: 24%;
    top: 29%;
}

#end-button {
    border-radius: 20% / 50%;
    display: block;
    /*background-image: url("./img/UI/smallbutton.png");
    width: 20%;
    aspect-ratio: 2.8 / 1;*/
    margin: auto;
    position: absolute;
    top: 0;
    right: 37%;
    background-color: #ffffff;
}
.unpressed-smallbutton {
    background-image: url("./img/UI/smallbutton_unpressed.png");
}
.pressed-smallbutton {
    background-image: url("./img/UI/smallbutton_pressed.png");
}

.unpressed-button {
    background-image: url("./img/UI/unpressed_button.png");
}
.pressed-button {
    background-image: url("./img/UI/pressed_button.png");
}
.button {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.b-camera {
    background-image: url("./img/UI/camera.png");
}
.b-picture {
    background-image: url("./img/UI/picture.png");
}
.b-sound {
    background-image: url("./img/UI/sound.png");
}
.b-return {
    background-image: url("./img/UI/return.png");
}
.b-run {
    background-image: url("./img/UI/run.png");
}
.b-skip {
    background-image: url("./img/UI/skip.png");
}
.b-submit {
    background-image: url("./img/UI/send.png");
}
.b-takeapic {
    background-image: url("./img/UI/takeapic.png");
}
.b-view {
    background-image: url("./img/UI/view_circle.png");
}
.b-play {
    background-image: url("./img/UI/button-play.png");
}

.dpad-arrow-l {
    background-image: url("./img/UI/d-pad-arrow-left.png");
}
.dpad-arrow-r {
    background-image: url("./img/UI/d-pad-arrow-left.png");
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.dpad-arrow-t {
    background-image: url("./img/UI/d-pad-arrow-left.png");
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.dpad-arrow-b {
    background-image: url("./img/UI/d-pad-arrow-left.png");
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.dpad-zoom-in {
    background-image: url("./img/UI/zoomin.png");
}
.dpad-zoom-out {
    background-image: url("./img/UI/zoomout.png");
}
.dpad-share {
    background-image: url("./img/UI/share.png");
}

#text-display {
    background-color: rgb(189, 214, 175);
    display: block;
    position: relative;
    border-width: calc(var(--screen-border) / 2);
    border-style: solid;
    border-color: #af7568 #79534b #af7568 #79534b;
    margin: var(--screen-border);
    padding: calc(var(--screen-border) / 2);
    height: calc(var(--screen-border) * 6);
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    /*font-family: 'Codystar', cursive;*/
    /*font-family: 'VT323', monospace;*/
    font-family: "Silkscreen";
    color: rgb(55, 78, 45);
    text-align: center;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
#text-centered {
    text-align: center;
    font-size: calc(var(--pixel-size) * 12);
}

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    touch-action: none;

    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
}