src/markdeck/assets/markdeck/css/_common.scss
@import "fonts";

.light-on-dark,
section.light-on-dark h1 {
    color: #fff;
    text-shadow: 0px 1px #000;
}
.ltr,
.inline {
    p,
    pre {
        display: inline-block;
        vertical-align: middle;
    }
}
.flush-text-left {
    text-align: left;
}
pre.nohighlight {
    line-height: 90%;
}
.rerendering-message {
    display: none;
    position: absolute;
    text-align: center;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    color: white;
    font-size: 200%;
    text-shadow: 2px 2px #000000;
}
@keyframes blur {
    from {
        filter: blur(0px);
    }
    to {
        filter: blur(10px);
    }
}
body.rerendering div.rerendering-message {
    display: block;
}
body.rerendering div:not(.rerendering-message) {
    animation-name: blur;
    animation-duration: 4s;
    filter: blur(10px);
}

.connection-lost-message {
    display: none;
    position: absolute;
    text-align: center;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    color: white;
    font-size: 200%;
    text-shadow: 2px 2px #000000;
}
body.connection-lost div.connection-lost-message {
    display: block;
}
body.connection-lost div:not(.connection-lost-message) {
    animation-name: blur;
    animation-duration: 4s;
    filter: blur(10px);
}

.markdeck-logo {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 8px;
    height: 8px;
    font-size: 10px;
    color: #5550;
    z-index: 1;

    a {
        color: #333a;
        text-shadow: 1px 1px #bbba;
        background: none;
        text-decoration: none;
    }
}
pre {
    text-align: left;
}
.inline-stack {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.1em;
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #ccc;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}

.ltr {
    div {
        display: inline-block;
    }
}

div.render_a2sketch svg text {
    font-family: "xkcd Script";
    font-size: 24pt;
}
