@import url("https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap");
@import "../dist/timed-dialog.min.css";

body {
  font-family: "Noto Serif", serif;
  padding-left: 2em;
  padding-right: 2em;
}

p {
    line-height: 1.8;
}

.container {
  display: flex;
  flex-direction: column;
}

.red {
  color: white;
  background-color: rgba(180, 20, 20, 0.8);
  border: 2px solid rgb(180, 20, 20);
  padding: 20px;
  margin-bottom: 20px;
}

div.footer {
  padding: 20px 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  padding: 10px;
  margin-top: 10px;
}

@media (prefers-color-scheme: dark) {
    code[class*="language-"]:not([contenteditable]),
    pre[class*="language-"] {
        --color: #6ae;
        --textShadow: #000;

        --comment: #9ab;
        --punctuation: #ccc;
        --property: #e70;
        --operator: #d7f;
        --selector: #8b2;
        --url: #cde;
        --urlBg: rgba(0, 0, 0, 0.5);
        --boolean: #a8f;
        --atrule: #ffb;
        --keyword: #fe6;
        --function: #f55;
        --regex: #f91;

        --boxShadow: #000;
        --focusOutline: hsla(214, 100%, 85%, 0.6);
    }

    body {
        background-color: #333;
        color: #fff;
    }

    .red {
        background-color: rgba(180, 20, 20, 0.8);
        border: 2px solid rgb(180, 20, 20);
    }
    .container {
        background-color: #333;
        color: #fff;
    }
    .footer {
        color: #fff;
    }
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        background-color: #444;
        color: #fff;
    }

    code[class*="language-"],
    pre[class*="language-"] {
        color: var(--color);
        text-shadow: 0 1px var(--textShadow);
        background-color: #444;
    }

    pre[class*="language-"]:hover,
    pre[class*="language-"]:focus-within {
        box-shadow: 0 0.25rem 0.25rem var(--boxShadow);
    }
    pre[class*="language-"]:focus-within {
        outline-offset: calc(-0.25rem - 1px);
        outline: var(--focusOutline) solid 0.25rem;
        z-index: 5;
    }

    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        color: var(--comment);
    }

    .token.punctuation {
        color: var(--punctuation);
    }

    .token.property,
    .token.symbol,
    .token.tag,
    .token.constant,
    .token.deleted {
        color: var(--property);
    }

    .token.boolean,
    .token.number {
        color: var(--boolean);
    }

    .token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.inserted {
        color: var(--selector);
    }

    .token.operator {
        color: var(--operator);
        background-color: transparent;
    }

    .token.url,
    .token.entity,
    .language-css .token.string,
    .style .token.string {
        color: var(--url);
        background-color: var(--urlBg);
    }

    .token.atrule,
    .token.attr-value {
        color: var(--atrule);
    }

    .token.keyword {
        color: var(--keyword);
    }

    .token.function {
        color: var(--function);
    }

    .token.regex,
    .token.important,
    .token.variable {
        color: var(--regex);
    }
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
            text-shadow: none;
    }
}