@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");
}

:root {

    /* Fonts */
    --font-body: Arial, sans-serif;
    --font-labels: "98", serif;
    --font-title: "Dico", serif;

    /* Text Colors */
    --text-main: #fae8e8;
    --text-muted: #947b7b;
    --text-red: #ba020e;
    --text-yellow: #FFE02E;

    /* Borders */
    --border-dark: #1a1a1a;

    /* Backgrounds */
    --bg-dark: #050505;
    --gradient-top: #140213;
    --gradient-bottom: #2e062b;
}

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

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

img {
    max-width: 100%;
    display: block;
}

body {
    background-image: url("https://file.garden/aidqo1apcUNtRMgv/backgrounds/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: underline;
}

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

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

.page-container {
    width: 810px;
    background: linear-gradient(
        var(--gradient-top),
        var(--gradient-bottom)
    );
    border: 1px solid var(--border-dark);
}

.content-layout {
    display: flex;
}

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

.site-header {
    padding: 1px;
}

.top-marquee {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: italic;
    color: var(--text-yellow);

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

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

.main-nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;

    padding: 1px;

    font-family: var(--font-title);
    font-size: 13px;
}

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

.sidebar {
    width: 250px;
    padding: 5px;
}

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

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

.sidebar-heading,
.section-heading {
    font-family: var(--font-title);
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 5px;
}

.section-heading {
    padding-left: 15px;
}

.resource-item {
    font-family: var(--font-labels);
    font-size: 12px;
    color: var(--text-muted);
    padding-left: 5px;
  margin-bottom: 5px;
}
.selfish {
font-size: 20px;
color: var(--text-yellow);
font-family: var(--font-labels)}

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

.main-content {
    flex: 1;
    padding-left: 10px;
  
}

.section-title {
    font-family: var(--font-title);
    font-size: 25px;
    color: var(--text-red);
}

.icon {
display: flex;
 align-items: center;
    gap: 2px;}

/* ===================================
   FEATURED BOX
=================================== */

.highlight-box {
    margin: 3px;
    padding: 1px;

    border: 1px solid var(--text-main);
    background: var(--text-red);

    font-style: italic;
}

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