@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://file.garden/aidqo1apcUNtRMgv/gifs/Untitledonline-video-cutter.com-ezgif.com-optimize.gif");
    background-size: center;
    background-position: center;

    color: var(--text-main);

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

    display: flex;
    justify-content: center;

    padding: 20px 80px;
}

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

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

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

/* ===================================
   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;
}

.top-marquee {
    font-family: "Arial", serif;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    color: var(--text-red);
  font-size: 25px;
}

/* ===================================
   NAVIGATION
=================================== */

.main-nav {

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

    padding: 1px;
}

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

.sidebar {

    width: 180px;
    padding: 1px;
}

.sidebar-left {
    border-right: 1px solid var(--border-dark);
}

.sidebar-right {
    border-left: 10px solid var(--border-dark);
}

.sidebar-widget {

    background: var(--bg-dark);

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

    padding: 4px;

    margin-bottom: 1px;
}

.widget-title {

    font-family: "Dico", serif;

    font-size: 13px;

    color: var(--text-main);

    margin-bottom: 5px;
}

.sidebar-nav {

    list-style: none;
  font-family: "98", serif;
}

.sidebar-nav li {

    margin-bottom: 5px;
}

.search-bar {
  
}

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

.mplayer {
  font-size: 11px;
  font-family: "98", serif;
  width: 170px;
  overflow: hidden;
  background-color: #FF0000;
  padding-bottom: 1px;
}

.mplayer-iframe {
 width: 160px;
}

.mplayer h3 {
  margin: 0 0 5px 8px;
}

.musicselection {
  overflow-y: scroll;
  height: 100px;
  margin: 5px;
  background-position: center;
  background-image: url(https://file.garden/aidqo1apcUNtRMgv/images/1000125023-Photoroom.png);
  padding: 5px;
  line-height: 17px;
  width: 150px;
  filter: drop-shadow(#000 4px 4px 0px);
  border: black solid 1px;
}

.musicselection p {
  margin: 0 0 5px 0;
}

.musicselection a {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 2px black; 
}

.musicselection a:hover {
  text-decoration: underline;
  color: #ffcc00;
}

/* ===================================
   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 {

    color: var(--text-red);
    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;
}

.container {
  display: flex; 
  gap: 2px; 
  align-items: flex-start;
}
.info-box{
  height: 190px;
  width:250px;
  position: relative;
  overflow: hidden;
  background-color: #9A9693;
  
  .info-box-title {
  background-color: #5a5a5a;
  font-family: "98", serif;
  color: white;
  padding: 2px;
  border-bottom: 1px solid #333;
  
.info-box-content {
  padding: 2px; 
  max-height: 180px; 
  overflow-y: auto;
  background-color: #C6C4C3;
  font-family: "98", serif;
  color: var(--text-muted);
    }
/* ===================================
   QUOTES
=================================== */

.quote-box {

    margin: 15px;

    padding: 10px;

    border: 1px solid #fae8e8;

    background: #ba020e;

    font-style: italic;
}

/* ===================================
   IMAGES
=================================== */

.profile-image {

    height: 150px;

}

.pfp-blinkie {
width: 150px;
}
  
  .pic-marquee {
display: flex;
}


/* ===================================
   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;
}