@font-face {
    font-family: "98";
    src: url("https://contraband4all.neocities.org/fonts/pc-9800.ttf");
}

@font-face {
    font-family: "Dico";
    src: url("https://contraband4all.neocities.org/fonts/Dico.ttf");
}

@font-face {
    font-family: "PixelArial";
    src: url("https://contraband4all.neocities.org/fonts/pixel-arial-14.otf");
}

@font-face {
    font-family: "Germanica";
    src: url("https://contraband4all.neocities.org/fonts/Germanica.ttf");
}

@font-face {
    font-family: "Alagard";
    src: url("https://contraband4all.neocities.org/fonts/Alagard 2.ttf");
}

@font-face {
    font-family: "AngelicWar";
    src: url("https://contraband4all.neocities.org/fonts/AngelicWar.ttf");
}

:root {

/* MAIN TEXT */
--font-body: Arial, sans-serif;
--font-labels: "98", serif;
--font-title: "Dico", serif;
--font-accent: "PixelArial", monospace;

/* OPTIONAL */
--font-germanica: "Germanica", serif;
--font-alagard: "Alagard", serif;
--font-angelic: "AngelicWar", serif;

/* COLORS */
--text-main: #fae8e8;
--text-muted: #947b7b;
--text-red: #ba020e;

--border-dark: #1a1a1a;
--border-light: #222222;

--bg-dark: #050505;
--bg-light: #080808;

--gradient-top: #140213;
--gradient-bottom: #2e062b;

--accent: #DD99FF;

}


/* ===================================
   RESET
=================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

body {

    background-image: url("https://i.pinimg.com/736x/a1/ea/2c/a1ea2c60e941b7ca25adda054abef246.jpg");
    background-size: cover;
    background-position: center;

    color: var(--text-main);

    font-family: var(--font-body);
    font-size: 12px;

    display: flex;
    justify-content: center;

    padding: 40px 10px;
}

/* ===================================
   LINKS
=================================== */

a {
    color: var(--text-main);
    text-decoration: none;
}

a:hover {
    color: var(--text-red);
}

.main-nav {

    font-family: "Dico", serif;
    display: flex;
    justify-content: left;
    gap: 1px;

    padding: 1px;
}

/* ===================================
   MAIN LAYOUT
=================================== */

.site-container {

    width: 810px;

    background: linear-gradient(
        var(--gradient-top),
        var(--gradient-bottom)
    );

    border: 1px solid var(--border-dark);
}

.page-layout {

    display: flex;
}

/* ===================================
   HEADER
=================================== */

.site-header {
    padding: 1px;
}

/* ===================================
   SIDEBARS
=================================== */

.widget-title {

    font-family: "Dico", serif;

    font-size: 13px;

    color: var(--text-main);

    margin-bottom: 5px;
}

.tiny-scroll{
  font-family: "98", serif;
color: #947b7b;
}


/* ===================================
   MAIN CONTENT
=================================== */

.main-content {

    flex: 1;

    padding: 0px;
}

.post {

    margin-bottom: 5px;
}

.post-header {

    display: flex;

    justify-content: space-between;

    border-bottom: 1px solid var(--border-dark);

    margin-bottom: 1px;

    padding-bottom: 1px;
}

.post-title {

    font-family: "Dico", serif;
    font-size: 14px;
}

.post-date {

    color: var(--text-muted);

    font-family: "Arial", serif;

    font-size: 9px;
}

.post-content p {

    margin-bottom: 10px;
}

.post-footer {

    margin-top: 10px;

    text-align: right;

    font-size: 10px;

    color: var(--text-muted);
    font-family: "Arial", serif;
}


/* ===================================
   QUOTES
=================================== */

.quote-box {

    margin: 10px;

    padding: 3px;

    border: 1px solid #fae8e8;

    background: #ba020e;
  font-family: "98", serif;

}

.quote-box-note {
  font-family: "98", serif;
  color: var(--text-muted);
}
/* ===================================
   IMAGES
=================================== */

.site-header img {
    display: block;
}


/* ===================================
   FOOTER
=================================== */

.site-footer {

    border-top: 2px solid var(--border-dark);
    background: var(--bg-dark);
    padding: 1px;
}
.bottom-marquee {
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}