/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --link-color: lightskyblue;
  --link-text-decoration: none;
  
  --content-padding: 25px;
  
  --sidebar-margin: 10px;
  --sidebar-width: 200px;
  --sidebar-height: 700px;
  --sidebar-padding: 15px;
  --sidebar-overflow: auto;
  
  --container-width: 1000px;
  
  --row-gap: 5px;
}

body {
  background-color: #9F6BB6;
  background-image: url("purple-plaid.jpg");
  color: white;
  font-family: "DejaVu Sans Mono";
  font-size: 14px;
  line-height: 1.3em;
}
body a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: var(--link-text-decoration);
}
.flex {
  display: flex;
  margin-bottom: var(--row-gap);
}
.content-wrap {
  --content-padding: 25px;
}
.header1 {
  font-family: "Noto Sans";
  font-size: 50px;
  background-color: #21193A;
  background-image: url("dark-purple-plaid.jpg");
  border-style: dashed;
  border-color: #9F6BB6;
  border-width: 2px;
}
.header2 {
  font-size: 15px;
  background-color: #9F6BB6;
  background-image: url("light-purple-plaid.jpg");
  background-size: cover;
  text-align: center;
}
.wrapper {
  padding: var(--content-padding);
  border-style: dashed;
  border-color: white;
  border-width: 1px;
}
.sidebar-wrapper {
  padding: var(--sidebar-padding);
  height: var(--sidebar-height);
  overflow: var(--sidebar-overflow);
}
.journal-wrapper {
  padding: var(--content-padding);
  border-style: dashed;
  border-color: #9F6BB6;
  border-width: 1px;
}
.j-entry {
  text-align: left;
}
.j-entry-title {
  background-color: #9F6BB6;
  padding: 1px;
}
#main-container{
  max-width: var(--container-width);
  margin: 0 auto;
}
#left-sidebar {
  background-color: #181A1B;
  width: var(--sidebar-width);
  max-height: var(--sidebar-height);
  margin-right: var(--sidebar-margin);
  margin-bottom: var(--row-gap);
  border-style: dashed;
  border-color: white;
  border-width: 1px;
}
#content-container {
  background-color: #181A1B;
  text-align: center;
  flex: auto;
  margin-bottom: var(--row-gap);
}
#header-container {
  background-color: rgba(24, 26, 27, 0.8);
  text-align: center;
  font-family: "Courier New";
}
#journal-entries {
  margin-top: var(--sidebar-margin);
  background-color: #131415;
}
#construction {
  background-color: #181A1B;
  text-align: center;
}