@font-face {
    font-display: swap;
    font-family: "Crimson-Pro";
    src: url("/fonts/crimson-pro.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Afacad";
    src: url("/fonts/afacad.woff2") format("woff2");
}

:root {
        --text: #515151;
        --title: #515151;
        --background: #eeeeee;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --text: #aeaeae;
        --title: #aeaeae;
        --background: #1c1c1c;
    }
} */

.pra {
    height: 3em;
}

.center {
    text-align: center;
}

small,
.small {
    font-size: 70%;
}

.smaller {
    font-size: 50%;
}

.large {
    font-size: 150%;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    font-family: "Afacad";
    line-height: 1.5;
}

body {
    font-weight: 400;
    font-size: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 500px !important;
    margin: auto;
    padding: 0em 1em 0em;
    color: var(--text);
    background-color: var(--background);
    opacity: 30%;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 100%;
    }
}

a,
.a {
    color: var(--text);
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
}

.a:hover {
    cursor: pointer;
}

blockquote {
    margin: 2em 0em 2em 1em;
    padding-left: 1em;
    border-left: var(--text) solid 0.1em;
}

input,
textarea {
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    width: 100%;
    margin: 0em 0.5em 0.5em 0em;
    padding: 0.55em;
    border: solid 0.03em var(--text);
}

button,
.btn {
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: inherit !important;
    font-weight: inherit;
    color: var(--text);
    background-color: inherit;
    width: 100%;
    padding: 0.25em;
    border: solid 0.03em var(--text);
    cursor: pointer;
    transition: all 0.05s ease;
}

button:active,
.btn:active {
    transform: scale(0.95);
}

img {
    max-width: 100%;
}

pre {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    overflow: auto;
    padding: 0.5em;
    max-width: 100%;
    max-height: 35em;
    border: solid 0.03em var(--text);
}

div {
    display: block;
}

nav {
    margin-top: 3em;
    margin-bottom: -1.5em;
    font-style: normal !important;
    text-decoration: none !important;
}

footer {
    margin-bottom: 2.5em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Crimson-Pro";
    font-weight: inherit;
    font-size: 130% !important;
    margin: 2.5em 0em 0.5em;
    color: var(--title);
}

#errorMsg,
#passMsg {
    padding: 0.5em;
    border: solid 0.03em var(--text);
}

::selection {
    color: var(--background);
    background: var(--text);
}

::-webkit-scrollbar {
    width: 0.1em;
    height: 0.1em;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}