body {
    font-family: arial;
    margin: 0;
    padding: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }
div.emscripten_border { border: 1px solid black; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }

#emscripten_logo {
    display: inline-block;
    margin: 0;
}

.spinner {
    height: 30px;
    width: 30px;
    margin: 0;
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    vertical-align: top;

    -webkit-animation: rotation .8s linear infinite;
    -moz-animation: rotation .8s linear infinite;
    -o-animation: rotation .8s linear infinite;
    animation: rotation 0.8s linear infinite;

    border-left: 5px solid rgb(235, 235, 235);
    border-right: 5px solid rgb(235, 235, 235);
    border-bottom: 5px solid rgb(235, 235, 235);
    border-top: 5px solid rgb(120, 120, 120);

    border-radius: 100%;
    background-color: rgb(189, 215, 46);
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#status {
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
    margin-left: 20px;
    font-weight: bold;
    color: rgb(120, 120, 120);
}

#progress {
    height: 20px;
    width: 300px;
}

#controls {
    display: inline-block;
    float: right;
    vertical-align: top;
    margin-top: 30px;
    margin-right: 20px;
}

#output {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    margin-top: 10px;
    border-left: 0px;
    border-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    display: block;
    background-color: black;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    outline: none;
}

/* .overlay {
    position: relative;
    left: calc(65% - 554px);
    top: 50%;
    width: 59vh;
    z-index: 2;
    max-height: 100%;
} */

.testtext {
    position: absolute;
    margin-left: -50px;
    margin-top: 480px;
    left: 52%;
    top: 50%;
    width: 100px;
    z-index: 3;
    font-size: xx-large;
}


.str0 {
    stroke: black;
    stroke-width: 0.1764;
    touch-action: none;
}

.str1 {
    stroke: black;
    stroke-width: 0.7056;
    touch-action: none;
}

.fil1 {
    fill: black;
    touch-action: none;
}

.fil3 {
    fill: #E5E5E5;
    touch-action: none;
}

.filT {
    fill: #E5E5A5;
    touch-action: none;
}

.fil0 {
    fill: white;
    touch-action: none;
}

.fil2 {
    fill: lavender;
    touch-action: none;
}

.fil4 {
    fill: black;
    fill-rule: nonzero;
    touch-action: none;
}

.lcd {
    z-index: 5;
    left: 25%;
    top: 0;
    position: fixed;
}

canvas {
    position: relative !important;
    width: 27vw;
    height: 14vw;
    padding: 2vw;
    margin: 3vw 9.6vw;
    top: 2px;
    left: 0;
}

.overlay {
    width: 32vw;
    height: 90vh;
    z-index: 2;
    max-height: 100%;
    margin: 0 auto;
}

#core {
    width: 100vw;
    margin: 0 auto;
}

/* Small Desktop */
@media only screen and (max-width: 1225px) {
    canvas {
        position: relative !important;
        width: 27vw;
        padding: 2vw;
        margin: 3vw 9.6vw;
        top: 10px;
        left: 0;
    }
  }

  /* Smaller desktop */
  @media only screen and (max-width: 1075px) {
    canvas {
        position: relative !important;
        width: 27vw;
        height: 14vw;
        padding: 2vw;
        margin: 2vw 9.6vw;
        top: 20px;
        left: 0;
    }
  }

/* Ipad Pro Portrait */
  @media only screen and (max-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
    canvas {
        position: absolute !important;
        width: 66vw;
        height: 36vw;
        padding: 0;
        margin: 3vw 0vw;
        top: 75px;
        left: -8vw;
    }
    
    .overlay {
        width: 80vw !important;
        height: 90vh !important;
        z-index: 2;
        max-height: 100%;
        margin: 0 auto;
    }
    
    #core {
        width: 100vw;
        margin: 0 auto;
    }
    body {
        touch-action: manipulation;
    }

    .lcd {
        z-index: 5;
        left: 25%;
        top: 0;
        position: absolute;
    }

    body {
        touch-action: manipulation;
    }
    
  }

  /* Ipad Pro landscape */
  @media only screen and (max-width: 1366px) and (device-height: 1024px) and (orientation:landscape) {
    canvas {
        position: absolute !important;
        width: 37vw;
        height: 20vw;
        padding: 0;
        margin: 3vw 0vw;
        top: 48px;
        left: 6.5vw;
    }
    
    .overlay {
        width: 45vw !important;
        height: 90vh !important;
        z-index: 2;
        max-height: 100%;
        margin: 0 auto;
    }
    
    #core {
        width: 100vw;
        margin: 0 auto;
    }
    body {
        touch-action: manipulation;
    }

    .lcd {
        z-index: 5;
        left: 25%;
        top: 0;
        position: absolute;
    }

    body {
        touch-action: manipulation;
    }
    
  }


/* Ipad Portrait */
  @media only screen and (max-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    canvas {
        position: absolute !important;
        width: 62vw;
        height: 34vw;
        padding: 0;
        margin: 3vw 0vw;
        top: 60px;
        left: -6vw;
    }
    
    .overlay {
        width: 75vw !important;
        height: 90vh !important;
        z-index: 2;
        max-height: 100%;
        margin: 0 auto;
    }
    
    #core {
        width: 100vw;
        margin: 0 auto;
    }
    body {
        touch-action: manipulation;
    }

    .lcd {
        z-index: 5;
        left: 25%;
        top: 0;
        position: absolute;
    }

    body {
        touch-action: manipulation;
    }
    
  }

  /* Ipad Landscape */
  @media only screen and (max-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    canvas {
        position: absolute !important;
        width: 37vw;
        height: 20vw;
        padding: 0;
        margin: 3vw 0vw;
        top: 44px;
        left: 6.5vw;
    }
    
    .overlay {
        width: 45vw !important;
        height: 90vh !important;
        z-index: 2;
        max-height: 100%;
        margin: 0 auto;
    }
    
    #core {
        width: 100vw;
        margin: 0 auto;
    }
    body {
        touch-action: manipulation;
    }

    .lcd {
        z-index: 5;
        left: 25%;
        top: 0;
        position: absolute;
    }

    body {
        touch-action: manipulation;
    }
    
  }

    /* Mobile portrait Plus Phones */
    @media only screen and (max-width: 767px) and (orientation:portrait) {
        canvas {
            position: absolute !important;
            width: 75vw;
            height: 40vw;
            padding: 0;
            margin: 3vw 0vw;
            top: 54px;
            left: -12vw;
        }
        
        .overlay {
            width: 90vw !important;
            height: 90vh !important;
            z-index: 2;
            max-height: 100%;
            margin: 0 auto;
        }
        
        #core {
            width: 100vw;
            margin: 0 auto;
        }
        body {
            touch-action: manipulation;
        }
    
        .lcd {
            z-index: 5;
            left: 25%;
            top: 0;
            position: absolute;
        }
        
      }

  /* Mobile portrait */
  @media only screen and (max-width: 390px) and (orientation:portrait) {
    canvas {
        position: absolute !important;
        width: 75vw;
        height: 40vw;
        padding: 0;
        margin: 3vw 0vw;
        top: 50px;
        left: -12vw;
    }
    
    .overlay {
        width: 90vw !important;
        height: 90vh !important;
        z-index: 2;
        max-height: 100%;
        margin: 0 auto;
    }
    
    #core {
        width: 100vw;
        margin: 0 auto;
    }
    body {
        touch-action: manipulation;
    }

    .lcd {
        z-index: 5;
        left: 25%;
        top: 0;
        position: absolute;
    }
    
  }

    /* Mobile landscape */
    @media only screen and (max-width: 812px) and (orientation:landscape) {
        canvas {
            position: absolute !important;
            width: 20vw;
            height: 11vw;
            padding: 0;
            margin: 3vw 0vw;
            top: 25px;
            left: 15vw;
        }
        
        .overlay {
            width: 25vw !important;
            height: 90vh !important;
            z-index: 2;
            max-height: 100%;
            margin: 0 auto;
        }
        
        #core {
            width: 100vw;
            margin: 0 auto;
        }
        body {
            touch-action: manipulation;
        }
        .lcd {
            z-index: 5;
            left: 25%;
            top: 0;
            position: absolute;
        }

        body {
            touch-action: manipulation;
        }

      }