div#captions {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

canvas.platypus-canvas {
    height: 100%;
    position: relative;
    width: 100%;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

.platypus-debugging {
    position: fixed;
    pointer-events: none;
    color: #fff;
    font-size: 12px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    font-family: "Lucida Console", Monaco, monospace;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: default;
    margin: 0;
    line-height: 1.5em;
}

#framerate {
    top: 0;
    left: 0;
}

#platypus-logging {
    top: 0;
    right: 0;
    max-width: 40%;
    max-height: 40%;
    overflow-x: auto;
}

#platypus-logging .general {color: lightgreen;}
#platypus-logging .log {color: white;}
#platypus-logging .warn {color: yellow;}
#platypus-logging .debug {color: lightblue;}
#platypus-logging .error {color: lightcoral;}
#platypus-logging span {padding-right: 1.5em;}

#toggle-platypus-debugging {
    position: fixed;
    top: 0;
    right: 0;
    font-size: 12px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.4);
    font-family: "Lucida Console", Monaco, monospace;
    border: none;
    color: white;
    z-index: 3;
}
body {
    margin: 0;
    padding: 0;
}

#font-loader {
    position: absolute;
    top: -100%;
    left: -100%;
}
.font-example {font-family: font-example;}

div#frame {
    top: 0;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    background: #000;
}

div#content {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

div#captions {
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;
    top: 1vh;
    width: 50vw;
    right: 25vw;
    text-align: center;
    z-index: 2;
    font-size: 1.9vw;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    line-height: 3vw;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: default;
    border-radius: 0.6vw;
    padding: 0.5vw;
    visibility: hidden;
}

div#captions.background-black {background: rgba(0, 0, 0, 0.6);}
div#captions.background-white {background: rgba(255, 255, 255, 0.6);}
div#captions.color-black {color: black;}
div#captions.color-white {color: white;}
div#captions.edge-none {border-width: 0;}
div#captions.font-arial {font-family: Arial, Helvetica, sans-serif;}
div#captions.align-bottom {top: initial; bottom: 1vh;}
div#captions.align-top {top: 1vh; bottom: initial;}
div#captions.size-small {font-size: 1vw; line-height: 2vw;}
div#captions.size-medium {font-size: 1.9vw; line-height: 3vw;}
div#captions.size-large {font-size: 3vw; line-height: 4.5vw;}

@font-face {
    font-family:"sofia-pro-soft";
    src:url(../1a8dc11261e07fae8567.woff2) format("woff2"),url(../eda722483cb4bff35d87.woff) format("woff"),url(../5f0d3b03080c6bb5dcb2.otf) format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
    font-family:"sofia-pro-soft";
    src:url(../b6795d9becf1d8615a5a.woff2) format("woff2"),url(../fd0bed77c4e71bc16b79.woff) format("woff"),url(../3bd64a7f477923376636.otf) format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

/* under #font-loader maybe vvv */
.sofia-pro-soft {font-family: sofia-pro-soft; font-weight: 500;}
.sofia-pro-soft-bold {font-family: sofia-pro-soft; font-weight: 700;}