html {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 100%;
  background-color: white;
}

ul {
  padding: 5px;
  list-style-type: none;
}

#slim-nav {
  /*
    slim-nav in intended to be displayed only when there isn't enough room for
    the sidebars, so it is disabled by default.
  */
  display: none;

  width: 80%;
  margin: 0 auto;
  padding: 5px;
  top: 0.5em;
  position: sticky;
  background-color: lightgrey;
  justify-content: space-between;
}

#right-margin {
  width: 20%;
  padding: 5px;
  position: fixed;
}

#right-margin {
  margin-right: 10px;
  text-align: right;
  right: 0;
}

#page {
  height: 100%;
  max-width: 750px;
  min-width: 300px;
  margin: 0 auto;
  padding: 5px;
}

#page table, #page td, #page th {
  border-collapse: collapse;
  border: 2px solid grey;
  padding: 5px;
}

code {
  /*
    "fix my font size" is not a font family.
    See https://mkhl.codeberg.page/monospace-font-size, he (mkhl) explains it
    really well.
  */
  font-family: "fix my font size", monospace;
}

.banner {
  text-align: center;
}

.page-title {
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-body {
  padding: 10px;
  text-align: left;
}

.page-note {
  margin: 10px auto 10px auto;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid grey;
  background-color: #e9e9e9;
}

.project-entry {
  max-width: 90%;
  margin: 10px auto 10px auto;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid grey;
  text-align: center;
}

.project-entry p {
  text-align: left;
}

.important {
  border: 2px solid maroon;
  background-color: lightcoral;
}

@media screen and (max-width: 540px) {
  html {
    font-size: 100%;
  }

  #right-margin {
    display: none;
    width: 80%;
    background-color: white;
  }

  #slim-nav {
    display: flex;
  }

  #right-margin:target {
    display: block;
  }
}