/* COLORS */
:root {
    --main-color: rgb(0, 0, 0);
    --border-color: rgb(67, 67, 67);
    --accent-color: greenyellow;
    --text-color: honeydew;
    --second-text-color: rgb(156, 156, 156);
    --third-text-color: rgb(198, 198, 198);
    --p-color: honeydew;
    --link-color: greenyellow;
    --link-hover-color: lightgoldenrodyellow;
    --marquee: greenyellow;
}

::selection {
  color: black;
  background: var(--accent-color);
}

/* MAIN FONT*/
@font-face {
    font-family: 'MainFont'; /*a name to be used later*/
    src: url('main-assets/main-fonts/OnliLight.woff'); /*URL to font*/
}

 /* ACCENT FONT */
@font-face {
    font-family: 'AccentFont'; /*a name to be used later*/
    src: url('main-assets/main-fonts/1942-report.ttf'); /*URL to font*/
}

 /* ACCENT FONT */
@font-face {
    font-family: 'MainBold'; /*a name to be used later*/
    src: url('main-assets/main-fonts/OnliBold.woff'); /*URL to font*/
}

 /* EVERYTHING */
html {
    background-color: rgb(0, 0, 0);
    color: var(--text-color);
    font-size:12px;
    font-family: 'MainFont';
    scrollbar-gutter: both-edges;
    overflow-x:hidden;
    border-collapse:collapse;
    margin: 0px;
    padding: 0px;
    image-rendering: pixelated;
}

p {
    letter-spacing:1px;
    line-height: 18px;
}

/* BIG TITLE HEADERS */
h1 {
    font-family: 'AccentFont';
    letter-spacing: 10px;
    font-size: 40px;
    margin:0px;
    padding:0px 20px;
    text-align: right;
    border-bottom: 1px dashed var(--border-color);
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgb(27, 27, 27) 80%);
}

h2 {
    font-family: 'AccentFont';
    font-size: 18px;
    margin: 5px;
    padding: 0px;
    text-align: left;
}

h3 {
    font-family: 'MainBold';
    font-size:12px;
    margin:5px;
    padding: 0px 3px;
    border-right: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    text-align: right;
}

/* BOLD TEXT */
b {
    font-family: 'MainBold';
    font-size: 12px;
    margin:0px;
    padding: 0px;
    color: var(--text-color)
}

/* LINKS */
a {
    color: var(--link-color);
    font-style: italic;
    text-decoration: none;
    cursor: crosshair;
}

/* LINKS HOVER */
a:hover {
    font-family: 'MainBold';
    color: var(--link-hover-color);
    text-decoration: underline;
    font-style:normal;
}

a img:hover {
    filter: brightness(125%)
}

/* LINKS VISITED */
a:visited {
    color: var(--link-color)
}

/* BASIC IMAGE STYLING */
img {
    margin: 5px;
}

ul {
    margin:0px;
    padding-left:5px;
    margin-top:3px;
    color: var(--second-text-color);
}

li {
    text-align: left;
    letter-spacing:1px;
    margin-bottom:5px;
    list-style-type: none;
    background-color:rgba(0, 0, 0, 0.494);

}

/* SCROLLING TEXT */
marquee {
    color: var(--marquee);
    height: 23px;
    width:100%;
    margin:3px 0px 0px 0px;
    padding:0px;
    direction: left;
    letter-spacing: 3px;
    font-size: 12px;
}

/* MARQUEE DECO IMAGE */
marquee img {
    vertical-align: middle;
}

/* MAIN TABLE - TO FIT A 800w X 600h SCREEN */
table {
    background-color: var(--main-color);
    width: 800px;
    height: 600px;
    border:1px solid var(--border-color);
    table-layout:auto;
    border-collapse: collapse;
    overflow:hidden;
    margin:0px;
    padding:0px;
}

/* CUSTOM EASY DIVIDER */
.divider {
    border-bottom: 1px dashed var(--border-color);
    width: 80%;
    margin:auto;
}

/* MAIN HEADER IMAGE */
#td-header {
    background-color: var(--main-color);
    background-image:url(main-assets/main-images/main-banner-3.0.png);
    background-size:cover;
    background-position: center;
    height:300px;
}

/* MAIN CONTENT */
.maincontent {
    background-color: var(--main-color);
    background-image: url(main-assets/main-images/maincontent-bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    width:630px;
    height:100%;
    margin:0px;
    padding:0px;
    overflow: hidden;
}

/* CONTENT PARAGRAPHS */
.maincontent p {
    color: var(--p-color);
    padding: 3px 5px;
    margin:7px 5px 3px 5px;
    background-color:rgba(0, 0, 0, 0.494);
}

/*STAUTS WRAPPER TEXT*/
#status-wrapper p {
    margin: 3px 3px;
    color: var(--second-text-color);
    vertical-align: middle;
    letter-spacing: 0px;
}

/*STAUTS WRAPPER TEXT*/
#status-wrapper img {
    margin: 0px;
    padding:0px;
}

/* SIDE NAV MENU BOX*/
td.side-box {
    background-color: var(--main-color);
    border-left: 1px solid var(--border-color);
    list-style-type: none;
    text-decoration: none;
    width: 170px;
    height: 100%;
    white-space: wrap;
    display:block;
}

/* SIDE NAV LIST ENTRIES */
.td-side-list li{
    list-style-type: none;
    text-decoration: none;
    margin-bottom:0px;
    background-size:10%;
}

/* SIDE NAV HEADER */
.nav-header {
    border-bottom:1px solid var(--border-color);
    border-left: none; /* To avoid confliction with p borders */
    text-align: right;
    padding: 0px;
    margin:0px;
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgb(27, 27, 27) 80%);
    letter-spacing: 4px;
    width:100%;
}

/* FOOTER */
#footer {
    height:30px;
    border-top:1px solid var(--border-color);
    padding: 5px;
}

/* FOOTER TEXT */
#footer p {
    border: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: var(--second-text-color);
}