* {
  box-sizing: border-box;
  font-family: "MS Gothic", "MS PGothic", sans-serif;
}

body {
  background-color: black;
  color: white;
  margin: 0;
  padding: 0;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: rgb(190, 190, 190);
}

::selection {
  color: black;
  background-color: white;
}

/* ===================== */
/* == Layout Structure == */
/* ===================== */

.mainwrapper {
  max-width: 860px;
  margin: auto;
}

/* Header placeholder */
div.header02 {
  width: 438px;
  height: 155px;
  margin: 5px auto;
}

footer {
  text-align: center;
  margin: 20px auto;
}

/* ============ */
/* == Banners == */
/* ============ */

.banner2 {
  max-width: 100%;
  width: 860px;
  height: auto;
  min-height: 20px;
  margin: 3px auto;
  background-color: #a37a7a;
  padding: 3px 0;
}

#bannertype {
  color: black;
  font-weight: bold;
  margin-top: 3px;
}

/* Banner styling */
.banner {
  background-color: white;
  height: 25px;
  width: 860px;
  max-width: 100%;
  margin: 3px auto;
}

/* ================================= */
/* == Main Columns (Side & Main) == */
/* ================================= */

.sideframe {
  width: 175px;
  height: 500px !important;
  border: 1px solid white;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.mainframe {
  width: 510px;
  height: 500px !important;
  border: 1px solid white;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll !important;
  box-sizing: border-box;
}

.sidecontent {
  width: auto;
  margin: 10px;
}

.maincontent {
  width: auto;
  margin: 10px;
}

.maincontent::after {
  content: "";
  display: table;
  clear: both;
}

/* ======================== */
/* == Left Sideframe Split == */
/* ======================== */

.sideframe.left-sideframe {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left-section {
  border-bottom: 1px dashed white;
  padding-bottom: 10px;
  margin-bottom: 10px;
  flex-grow: 1;
}

.left-top-section {
  min-height: 230px;
  flex-basis: 40%;
}

.left-bottom-section {
  min-height: 250px;
  flex-basis: 60%;
  border-bottom: none;
  display: flex;
  flex-direction: column;
}

.sideframe.left-sideframe .left-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.left-section:not(.left-bottom-section) {
  border-bottom: 1px dashed white !important;
}

.left-section .sidecontent {
  margin: 5px;
  width: auto;
}

p {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

.thumbnail-grid {
  display: grid !important;
}

/* Quick Links (Bottom Left) */
.quick-links p {
  line-height: 1.8;
  margin: 0;
  text-align: left;
}
.quick-links img {
  margin-right: 5px;
  vertical-align: middle;
}
.quick-links a {
  color: white;
}
.quick-links a:hover {
  color: rgb(190, 190, 190);
}

/* Bnuuy Link Hover */
.about-link {
  cursor: pointer;
}

/* ========================= */
/* == Right Sideframe Content == */
/* ========================= */

/* Kins Marquee Container (Used .changelog class in HTML) */
.changelog {
  width: 150px;
  height: 120px;
  border: 1px solid white;
  overflow: hidden;
  margin: 0 auto 10px auto;
}

/* Likes/Dislikes Container */
.likes-dislikes {
  border: 1px solid white;
  padding: 5px 10px;
  min-height: 150px;
  overflow-y: auto;
  margin-bottom: 10px;
  text-align: left;
}
.likes-dislikes b {
  display: block;
  margin-bottom: 3px;
}

/* Social Links Container */
.social-links {
  text-align: center;
  margin-bottom: 10px;
}
.social-links p {
  margin-bottom: 5px;
}

/* ============================== */
/* == Typography & ID Styles == */
/* ============================== */

h2,
h3 {
  margin: 10px 0;
  text-align: center;
}

#h3navmargins {
  margin-bottom: -5px;
}

#h3rightmargins {
  margin-bottom: 10px;
}

#hleading {
  line-height: 18px;
}

#paragraphstyling {
  text-align: center;
  line-height: 13px;
  margin: 15px;
}

#paragraphstyling2 {
  text-align: left;
  line-height: 1.4;
  margin: 15px;
}

#changelogparagraphstyling {
  text-align: left;
  line-height: 1.3;
  margin: 9px;
}

#leftalign {
  text-align: left;
}

#deadlinkstyling {
  color: gray;
  margin-top: -15px;
}

/* =================== */
/* == Scrollbar Styles == */
/* =================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #333;
}

::-webkit-scrollbar-thumb {
  background: rgb(100, 100, 100);
  border: 1px solid #333;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(150, 150, 150);
}