:root {
    --lt-color:#FDF9EF;
    --mid-color:#E9E3D2;
    --dk-color:#BEAC8B;
    --dkest-color:#9B8C68;
    --accent:#E23C12;
    --accent2:#CF9E41;
}
 html, body {
    background-color: #302b28;
    color:var(--dkest-color);
    margin-top: 2px;
    margin-bottom: 5%;
    /* Font stuff here */
    font-family: "Press Start 2P", system-ui;
    font-style: normal;
    font-size:10px;
    line-height: 15px;
    /* vvvvv The most important things right down here vvvvv */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: auto;
}
 body a {
     color:var(--accent);
     font-weight:bold;
}
 ul.list li {
     padding-bottom:5px;
}
 ul {
     list-style: none;
     padding: 0;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
}

/* LEFT NAVBAR STYLES */
 
 .navbar_background {
    background-image: url('Images/NavbarImage.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 5px;
    border-radius: 10px;
    padding: 10px;
    width: 200px;
    height: 600px;
    top: 5%;
    right: 15%;
    box-shadow:  0 4px 8px #302b28;
    position: relative;
 }
 .navbar_content {
    position: absolute;
    padding: 10px;
    background-color:var(--lt-color);
    border:1px solid var(--accent);
    width: 80%;
    height: 85%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    overflow: scroll;
}
 .navbar a {
     text-decoration:none;
     font-size: 11px;
}
 .navbar ul {
     list-style:none;
     text-decoration:none;
     line-height: 25px;
     padding-left: 20px;
 }
 .navbar li {
    text-decoration: none;
 }
 .navbar h1, h2, h3, p{
    margin: 5px;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
}

/* ALL MAIN STYLES */

.main_background {
    background-image: url('Images/MainImage.png');
    background-repeat: no-repeat;
    border-radius: 5px;
    width: 900px;
    height: 600px;
    box-shadow:  0 4px 8px #302b28;
    position: relative;
 }
 .main_content {
    background-color: var(--lt-color);
    padding: 10px;
    width: 75%;
    height: 90%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    position: absolute;
}
.row {
  display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

 /* DEV LOG STYLES */
 
 .dl_background {
    background-image: url('Images/DevLogImage.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    width: 35%;
    height: 35%;
    top: 70%;
    left: 75%;
    box-shadow:  0 4px 8px #302b28;
    position: absolute; 
}
 #dl_content {
    background-color: var(--lt-color);
    border: 2px solid var(--accent2);
    padding: 5px;
    height: 85%;
    width: 85%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    position: absolute;
    overflow:scroll;
}

/* STATUS STYLES */

.status_background {
    background-image: url('Images/StatusImage.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    width: 18%;
    height: 55%;
    top: 7%;
    left: 90%;
    box-shadow:  0 4px 8px #302b28;
    position: absolute;
}
 #status_content {
    background-color: var(--lt-color);
    border: 2px solid var(--accent2);
    padding: 5px;
    height: 70%;
    width: 75%;
    top: 41%;
    left: 50%;
    translate: -50% -50%;
    position: absolute;
    overflow:scroll;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}
/* COMMENT OUT OR DELETE THE BELOW CODE FOR TWO SIDEBARS */

/* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
   .main-content {
     width:600px;
     border-right:none;
}
 #right-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
}
 #container {
     max-width:1000px;
}