/*
    FRAME
*/

@font-face 
{
    font-family: myFont;
    src: url(/Wonkyneocity-Regular.otf);
}


.body 
{
    margin: 0;
    position: relative;
    background-color: black;
}

@media (min-aspect-ratio: 16/9) 
{
    .body 
    {
        width: 100vw;
        height: calc(100vw * 9 / 16);
        overflow-x: hidden;
    }


}

@media (max-aspect-ratio: 16/9) 
{
    .body 
    {
        width: calc(100vh * 16 / 9);
        height: 100vh;
        overflow-y: hidden;
    }

} 

.backgroundImage 
{
    height: 100%;
    width: 100%;
    display: block;

    pointer-events: none;
}


.template
{
    border: 1px solid red;
    position: absolute;
    top: 24%;
    left: 25%;

    width: 17%;
    height: 55%;
}

/* development warning */
.warning
{
    /* border: 1px solid red; */
    font-family: myFont;
    position: absolute;
    top: 40%;
    left: 35%;
    width: 400px;
    height: 200px;

    border: 1px outset rgb(246, 246, 246);
    background-color:#b7b7b7;

    align-items: center;
    justify-content: center;
    padding: 1px;

    z-index: 100;
}

.clickedWarning
{
    display: none;
}

.sysMessage 
{
    border: 1px outset rgb(152, 152, 152);
    background-color: #070378;
    color: white;
    padding: 10px;
    margin: 0;
}

.warningText
{
    font-size: 30px;
    padding-left: 20px;
}

.fakeButton
{
    position: relative;

    border-style: outset;
    border-width: 1.5px;
    border-color: aliceblue black black aliceblue;
    box-sizing: border-box;

    width: 30px;

    left: 30%;

    font-size: 20px;

    cursor: grab;
}

.fakeButton:hover
{
    border: 2px outset rgba(0, 0, 0, 0.648);
    background-color: rgba(0, 0, 0, 0.043);
}

.fakeButton:active
{
    border: 2px inset rgba(0, 0, 0, 0.648);
    background-color: rgba(0, 0, 0, 0.151);
}

.goBack
{
    left: 60%;
    top: -23%;

    width: fit-content;
}


  /****************/
 /* FOYER BUTTON */
/****************/

.foyerButton
{
    /* border: 2px solid green; */
    position: absolute;

    left: 45%;
    top: 50%;

    height: 10.5%;
    width: 13.8%;

    z-index: 0;
}

.foyerButtonLight,
.foyerButtonBase
{
    position: absolute;

    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    z-index: 129;
}

.foyerButtonLight:hover
{
    opacity: 100%;
}




    /****************/
   /* CRISP IMAGES */
  /****************/
.pixel { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}