* {
  font-family: Verdana, sans-serif;
  color: #330e00;
  line-height: 1.5;
}

html {
  background-color: #ff7f50;
  background-image: url(/assets/images/background.webp);
}

body {
  margin: 0;
}

.sidebyside, .body {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.body {
  margin: 2em auto;
  padding: 0 1em;
  max-width: 980px;
}
.body .main {
  width: 80%;
  padding: 0 2em;
  overflow: scroll;
  /*
  p, h1, h2, h3 {
      background-color: color.scale($text-background, $lightness: -10%, $alpha: -70%);
      padding: 0.2em 1em;
  }
  */
}
.body .leftbar {
  width: 20%;
}

.leftbar div {
  border: 1px dashed #330e00;
  margin: 1em 0;
  padding: 0.2em;
  position: relative;
}
.leftbar div p {
  margin: 0.5em 0.2em;
}
.leftbar div .boxtitle {
  position: absolute;
  top: -0.85em;
  left: 1em;
  margin: 0;
  background-color: #ffece5;
}
.leftbar div .date {
  font-size: 0.8em;
  line-height: 0.5em;
  font-style: italic;
  text-align: right;
}

.box {
  border: 2px solid #f7936e;
  border-radius: 5px;
  padding: 0 8px;
  background-color: #ffece5;
}

nav {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  margin-bottom: 1em;
}
nav a {
  text-align: center;
}

.logo {
  width: 100%;
  aspect-ratio: 4/1;
  margin: 0.5em 0;
}

a {
  padding: 0.2em 0;
}

a.currentPage {
  font-weight: bold;
  background-color: rgb(255, 193.5569230769, 170.92);
}

.dark-on-hover:hover {
  background-color: rgb(255, 165.2615384615, 132.2);
}

img {
  margin: 1em 0;
  max-width: 100%;
}

.pagetitle {
  background: linear-gradient(to right, lightblue, lightcoral, white, lightcoral, lightblue);
  background-clip: text;
  color: transparent;
  width: fit-content;
  -webkit-text-stroke: #330e00 1.5px;
  margin: 1em auto 0 auto;
  text-align: center;
  font-size: 3em;
}

code {
  font-family: "SauceCodePro NF", "DejaVu Sans Mono", monospace;
  background-color: rgb(255, 193.5569230769, 170.92);
  padding: 0 1px;
}

li {
  padding: 1px 0;
}
li > p {
  margin: 0;
}

.red {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}

/* Improve viewing of images inside text */
:is(a, p):not(.imglink) > img {
  margin: 0;
  position: relative;
  top: 0.5em;
}

.imglink {
  display: block;
  padding: 0;
  margin: 0;
}

/* Display page sections */
.sections {
  width: fit-content;
  border: 1px solid #f7936e;
  padding-right: 1em;
  background-color: rgb(248.5, 239, 235.5);
}
.sections h3 {
  padding-left: 1em;
}

/* Reponsive design to make things look better on mobile */
@media screen and (max-width: 600px) {
  .body {
    flex-flow: row wrap;
  }
  .body .leftbar,
  .body .main {
    width: 100%;
  }
}

/*# sourceMappingURL=style.css.map */