/* https://sass-guidelin.es/fr/#architecture */
/* layout */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-color: #f7f7f7;
    height: 100%;
    font-size: 10px;
    font-family: 'Segoe UI', cursive;
    color: #333;
    margin: 0;
    position: relative;
}

/* components */
.outputViewport {
    position: absolute;
    display: block;
    background-color: #fff;
    width: 100%;
    height: 100%;
}

.outputViewport::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: White;
}

.outputViewport.--outputInitialize::before {
    display: none;
}

.outputContext {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.outputViewport.--outputInitialize .outputContext.--outputCreated:not(.--outputUsed) {
    display: none !important;
}

.outputContext:not(.--outputInitialize) {
    z-index: -100;
}

.outputLayer {
    display: block;
}

a.outputText,
abbr.outputText,
acronym.outputText,
audio.outputText,
b.outputText,
bdi.outputText,
bdo.outputText,
big.outputText,
br.outputText,
button.outputText,
canvas.outputText,
cite.outputText,
code.outputText,
data.outputText,
datalist.outputText,
del.outputText,
dfn.outputText,
em.outputText,
embed.outputText,
i.outputText,
iframe.outputText,
img.outputText,
input.outputText,
ins.outputText,
kbd.outputText,
label.outputText,
map.outputText,
mark.outputText,
meter.outputText,
noscript.outputText,
object.outputText,
output.outputText,
picture.outputText,
progress.outputText,
q.outputText,
ruby.outputText,
s.outputText,
samp.outputText,
script.outputText,
select.outputText,
slot.outputText,
small.outputText,
span.outputText,
strong.outputText,
sub.outputText,
sup.outputText,
svg.outputText,
template.outputText,
textarea.outputText,
time.outputText,
u.outputText,
tt.outputText,
var.outputText,
video.outputText,
wbr.outputText {
    display: inline-block;
}

.outputSprite {
    display: block;
    border-style: none;
    image-rendering: pixelated;
}