@font-face {
    font-family: "JetBrains Mono";
    src: url(../font/JetBrainsMono-Regular.woff2);
}

@font-face {
    font-family: "Roboto";
    src: url(../font/Roboto-Regular.woff2);
}

@font-face {
    font-family: "Fervojo";
    src: url(../font/Fervojo-Bold.woff2);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.container div {
    margin: 20px;
    padding: 10px;
}

.container hr {
    border-top: 3px solid #787878;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 2px;
}

.container h1 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 250%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container h2 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 220%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container h3 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 190%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container h4 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 170%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container h5 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 150%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container h6 {
    color: #c3c3c3;
    font-family: Fervojo, serif;
    font-size: 130%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 100%;
}

.container a {
    text-decoration: none;
    color: #457d7d;
    font-family: Roboto, serif;
    letter-spacing: 1px;
}

.container a:link, a:visited {
    color: #58748d;
    text-decoration: none;
}

.container a:hover {
    color: #58748d;
    text-decoration: underline;
}

.container a:active {
    color: #c3c3c3;
    background: #101010;
}

.container p {
    color: #c3c3c3;
    font-family: Roboto, serif;
    font-size: 100%;
    display: inline;
    text-indent: 100px;
    letter-spacing: 1px;
    line-height: 120%;
}

.container ul {
    list-style-type: circle;
    font-family: Roboto, serif;
    color: #c3c3c3;
}

.container ol {
    font-family: Roboto, serif;
    color: #c3c3c3;
}

.container table {
    border: 2px solid #101010;
    font-family: Roboto, serif;
}

.container th {
    border: 1px solid #101010;
    font-family: Roboto, serif;
    color: #c3c0c3;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.container td {
    font-family: Roboto, serif;
    color: #c3c3c3;
    text-align: center;
    padding: 2px;
}

.container input {
    color: #c3c3c3;
    font-family: Roboto, serif;
    background: #101010;
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    height: 20px;
    width: 200px;
}

.container blockquote {
    border-left: #828b95 10px solid;
    background-color: #24282a;
    padding: 5px;
    border-radius: 2px 7px 7px 2px;
}

.container mark {
    background-color: #457d7d;
    color: #080f13;
    padding: 2px;
}

.container img {
    border-radius: 10px;
}

.container em {
    text-decoration: underline;
}

.container > .footer {
    margin: 0;
    padding: 0;
}

.container > .footer small {
    color: #686868;
    font-family: Roboto, serif;
    font-size: 80%;
    display: inline;
    letter-spacing: 1px;
    line-height: 120%;
    user-select: none;
}