/*RED THEME*/
.theme-red body {
  background: #5a0000;
  color: #f3d8b2;
}

.theme-red .sidebar {
  background: #4b0000;
}

.theme-red .sidebar h2 {
  color: #ffae00;
  border-bottom: 1px solid #aa4444;
}

/*buttons on left stay red on red theme (home, sitemap, etc)*/
.theme-red .sidebar a:visited {
  color: #f3d8b2;
}

/*buttons on left stay blue on blue theme (home, sitemap, etc)*/
.theme-blue .sidebar a:visited {
  color: #bedbe6;
}

.theme-red .changelogdivider {
  border-bottom: 1px solid #aa4444;
}
  

.theme-red.sidebar a {
  color: #f3d8b2;
}

.theme-red .sidebar a:hover {
  color: #ffae00;
}

.theme-red .theme-btn {
  background: #e5d3b3;
  color: black;
}

.theme-red .content {
  background: #600000;
}

.theme-red .content h1 {
  color: #ffae00;
}

.theme-red .date {
  color: #ffae00;
}

.theme-red .top-banner {
  background: #5d0000;
}

.theme-red .right-image {
  background: #4b0000;
}

/*BLUE THEME*/
.theme-blue body {
  background: #234553;
  color: #bedbe6;
}

.theme-blue .sidebar {
  background: #002f40;
}

.theme-blue .sidebar h2 {
  color: #bedbe6;
  border-bottom: 1px solid #69a1b5;
}

.theme-blue .sidebar a {
  color: #bedbe6;
}

.theme-blue .sidebar a:hover {
  color: #36a6cf;
}

.theme-blue .changelogdivider {
  border-bottom: 1px solid #bedbe6;
}

.theme-blue .theme-btn {
  background: #bedbe6;
  color: black;
}

.theme-blue .content {
  background: #274d5c;
}

.theme-blue .content h1 {
  color: #bedbe6;
}

.theme-blue .date {
  color: #bedbe6;
}

.theme-blue .top-banner {
  background: #234a59; 
}

.theme-blue .right-image {
  background: #002f40;
}


body {
  margin: 0;
  font-family: Georgia, serif;
  transition: background 0.3s, color 0.3s;
}

/*top banner*/
.top-banner img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/*main layout*/
.wrapper {
  display: flex;
  min-height: calc(100vh - 200px);
}

/*sidebar*/
.sidebar {
  width: 260px;
  padding: 20px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 10px 0;
}

.sidebar h2 {
    border-bottom: 2px solid;
  padding-bottom: 5px;
  margin-bottom: 15px;
      /* space after the line */

}

/* default red */
.divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ffae00;
  margin: 20px 0;
}

/*blue theme override*/
body.theme-blue .divider {
  background-color: #bedbe6; /*blue*/
}

/*removes underline under sidebar urls*/
.sidebar a {
  text-decoration: none;
}

/*colour for the toggle theme button*/
.theme-btn {
  margin: 20px 0;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
}

/* Content */
.content {
  flex: 1;
  padding: 40px;
}

.divider {
  display: block;
  margin: 10px auto 20px auto;
}

/*scrollbox*/
.scrollbox {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

/*right image*/
.right-image {
  width: 420px;
}

.right-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*red theme*/
body.theme-red {
  background: #5a0000;
  color: #f3d8b2; /*text color for everything in red theme*/
}

body.theme-red .sidebar,
body.theme-red .sidebar p,
body.theme-red .sidebar li {
  color: #f3d8b2; /*makes my † symbols and about text light*/
}


body.theme-red .content,
body.theme-red .content p {
  color: #f3d8b2; /*update log and normal text*/
}

body.theme-red .right-image img {
  filter: hue-rotate(-10deg) saturate(1.5) brightness(1.1); /*makes guyonright more red*/
}

body.theme-blue .right-image img {
  filter: hue-rotate(180deg) saturate(1.5) brightness(0.8); /*makes guyonright more blue*/
}



body.theme-red .divider {
  /*textbased divider will be same color now*/
  color: #ffae00;
}

/*blue theme*/
body.theme-blue {
  background: #234553;
  color: #bedbe6; /*text color for everything in blue theme*/
}

body.theme-blue .sidebar,
body.theme-blue .sidebar p,
body.theme-blue .sidebar li {
  color: #bedbe6; /*fixes my † and about text*/
}

body.theme-blue .content,
body.theme-blue .content p {
  color: #bedbe6; /*fixes update log text*/
}

body.theme-blue .divider {
  color: #bedbe6; /*makes divider blue*/
}




/*ABOUT.HTML*/