div {
    position: absolute; float: left; color: inherit; font-size: inherit; /*overflow: hidden;*/
    -ms-user-select: none; /* IE10+ */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */

}

html, 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: text;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    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-right, 0px);
    width:100%;
    overflow: hidden;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

*:focus {
    outline: none;
}

.sawTextElement {
    position: absolute; float: left; color: inherit; font-size: inherit; padding: 0px; border-width: 0px; margin: 0px; background-color: transparent; word-break:hyphenate; text-decoration: inherit;
    -ms-user-select: inherit; /* IE10+ */
    -webkit-user-select: inherit; /* Chrome/Safari */        
    -moz-user-select: inherit; /* Firefox */
    user-select: inherit;
}

.sawWordElement {
    position: absolute; float: left; color: inherit; font-size: inherit; padding: 0px; border-width: 0px; margin: 0px; background-color: transparent; word-break:hyphenate; white-space: nowrap;
    -ms-user-select: none; /* IE10+ */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */

}

.sawImageElement {
    position: absolute; 
    float: left; 
    white-space:nowrap; 
    color: inherit; 
    font-size: inherit; 
    background-size: contain; 
    background-repeat:no-repeat; 
    background-position:center; 
    background-clip:padding-box;
    -ms-user-select: none; /* IE10+ */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
}

.sawTextInput {
      position: absolute; float: left;  background-color: inherit; color: inherit; font: inherit; font-size: inherit; border-style:none; border-width:0; /*z-index: 1;*/ overflow:hidden; padding: 0; resize: none;
      -webkit-appearance: none;
  }

.sawFontTemplate {
    position: absolute; float:left; white-space: nowrap; visibility:hidden;
}

.sawPageContainer {
    /*overflow: hidden;*/
}