/* Base */
html {
    background-color: #222;
    min-height: 100%;
    line-height: 1.5;
}

body::before {
    content: "";
    position: fixed;
    inset: -20px;
    background-image: url("/themes/retro_dark/background.png");
    background-size: cover;
    background-position: center;
    filter: blur(1px);
    z-index: -1;
}

body {
    color: #fafafa;
    font-family: "monospace";
    min-height: 100%;
    line-height: 1.5;
}

#content {
    background-color: rgba(34, 34, 34, 0.92); /* #222 @ 92% */
    padding: 2rem clamp(1rem, 4vw, 3rem);
    border-radius: 0.4rem;
    box-sizing: border-box;
}

::selection {
    background-color: #2ecc40;
    color: white;
}

/* Responsive content positioning */
@media only screen and (min-width: 1020px) /* Large screens */ {
    body {
        padding: 10vh 25vw;
    }
}

@media only screen and (max-width: 1020px) and (min-width: 750px) /* Small screens */ {
    body {
        padding: 5vh 10vw;
    }
}
@media only screen and (max-width: 750px) /* Small screens */ {
    body {
        padding: 2vh 5vw;
    }
}

/* Headers */
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 1.7rem;
}
h1 > .subtitle,
h3,
h4,
h5,
h6 {
    font-size: 1.3rem;
}
.title {
    margin-bottom: 2.5rem;
} /* Padding & Margin */
* {
    margin: 0;
    padding: 0;
}
pre,
blockquote,
ul,
ol,
p,
table {
    margin: 1rem 0;
}
h1,
h2 {
    margin-top: 2rem;
    line-height: 2rem;
}
h3,
h4,
h5,
h6 {
    margin-top: 1rem;
} /* Links  */
a,
a:visited {
    color: #01ff70;
    text-decoration: underline;
}
a:hover,
a:focus,
a:active {
    color: #2ecc40;
} /* Code */
pre {
    font-family: "monospace";
    padding: .5rem;
    background-color: #333;
    padding: 0.5rem;
    border-radius: 0.2rem;
    font-size: 1.0rem;
    color: #EEE;
    overflow-x: auto;
}
code {
    font-size: 1.0rem;
    border-style: solid;
    border-width: 1px;
} /* Blockquotes */
blockquote {
    border-left: 3px solid #01ff70;
    padding-left: 1rem;
}
li {
    list-style-position: inside;
} /* Tags */
.tag {
    margin-top: 0.5rem;
    display: block;
    color: white;
    font-size: var(--font-size-xsmall);
}
.tag > span {
    font-weight: 400;
    font-size: 0.8rem;
    background-color: #444;
    text-transform: uppercase;
    border-radius: 2px;
    width: fit-content;
    height: auto;
    padding: 1px 5px;
} /* Keywords */
.todo {
    color: #2ecc40;
}
.done {
    color: #444;
} /* Overflows */
.outline-text-2,
.outline-text-3,
.outline-text-4 {
    max-width: 100%;
    overflow-x: auto;
} /* Table */
tr:nth-child(even) {
    background-color: #333;
}
th,
td {
    padding: 0.5rem;
    text-align: center;
}
.underline {
    text-decoration: underline;
}
img {
    max-width: 100%;
    height: auto;
}

.org-bold {
    /* bold */
    font-weight: bold;
}
.org-bold-italic {
    /* bold-italic */
    font-weight: bold;
    font-style: italic;
}
.org-bookmark {
    /* bookmark-face */
    color: #ff7f00;
}
.org-keyword {
    color: #8ac6f2;
    font-weight: bold;
}
.org-comment {
    /* font-lock-comment-face */
    color: #99968b;
}
.org-comment-delimiter {
    /* font-lock-comment-delimiter-face */
    color: #99968b;
}
.org-constant {
    /* font-lock-constant-face */
    color: #e5786d;
}
.org-css-property {
    /* css-property */
    color: #8ac6f2;
    font-weight: bold;
}
.org-css-selector {
    /* css-selector */
    color: #cae682;
}
.org-cursor {
    /* cursor */
    background-color: #bebebe;
}
.org-error {
    /* error */
    color: #ffc0cb;
    font-weight: bold;
}
.org-escape {
    /* font-lock-escape-face */
    font-weight: bold;
}
.org-function-call {
    /* font-lock-function-call-face */
    color: #cae682;
}
.org-function-name {
    /* font-lock-function-name-face */
    color: #cae682;
}
.org-preprocessor {
    /* font-lock-preprocessor-face */
    color: #e5786d;
}
.org-property-name {
    /* font-lock-property-name-face */
    color: #cae682;
}
.org-property-use {
    /* font-lock-property-use-face */
    color: #cae682;
}
.org-regexp {
    /* font-lock-regexp-face */
    color: #95e454;
}
.org-regexp-grouping-backslash {
    /* font-lock-regexp-grouping-backslash */
    font-weight: bold;
}
.org-regexp-grouping-construct {
    /* font-lock-regexp-grouping-construct */
    font-weight: bold;
}
.org-string {
    /* font-lock-string-face */
    color: #95e454;
}
.org-type {
    /* font-lock-type-face */
    color: #92a65e;
    font-weight: bold;
}
.org-variable-name {
    /* font-lock-variable-name-face */
    color: #cae682;
}
.org-variable-use {
    /* font-lock-variable-use-face */
    color: #cae682;
}
.org-warning-1 {
    /* font-lock-warning-face */
    color: #ccaa8f;
}
.org-builtin {
    /* font-lock-builtin-face */
    color: #e5786d;
}
.org-doc {
    /* font-lock-doc-face */
    color: #95e454;
}
.org-doc-markup {
    /* font-lock-doc-markup-face */
    color: #e5786d;
}