html, body {
    margin: 0;
    overflow: hidden;
}

body {
  background-color: #F2F3F4;
  font-family: Typewriter-Regular;
  color: #710C04;
  font-size: 15px;
  }

@font-face {
   font-family: Typewriter-Regular;
   src: url(XTypewriter-Regular.ttf);
}

@font-face {
   font-family: Typewriter-Regular;
   src: url(XTypewriter-Bold.ttf);
   font-weight: bold;
}

a:link {
  text-decoration: underline;
  color: #710C04;
}

a:visited {
  text-decoration: underline;
  color: #710C04;
}

a {
  -webkit-tap-highlight-color: transparent;
}

p {
    padding-bottom: 1px;
    text-indent: 50px;
    text-align: justify;
}

#header {
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

#date {
    text-align: right;
    font-size: 10px;
}

#figures {
    font-size: 10px;
    text-align: center;
}

* {
  box-sizing: border-box;
}

.left-column {
  width: 45%;
  padding: 10px;
  height: 75vh;
  overflow-y: scroll;
  overflow-x: hidden;
  bottom: 10%;
  left: 0;
  position: fixed;
}

.left-column::-webkit-scrollbar {
    display: none;
}

.right-column {
  width: 45%;
  padding: 10px;
  height: 75vh;
  overflow-y: scroll;
  overflow-x: hidden;
  bottom: 10%;
  right: 0;
  position: fixed;
}

.right-column::-webkit-scrollbar {
    display: none;
}

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

.post {
   margin-right: 10px;
   margin-bottom: 10px;
}

.navigation {
    position: fixed;
    bottom: 10%;
    right: 50%;
    text-align: center;
}

.warning {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.footer {
   position: fixed;
   left: 0;
   bottom: 2%;
   width: 100%;
   text-align: center;
   font-size: 10px;
}

ul {
    text-align: justify;
}

/* for future use of collapsible content

.collapsible {
  color: #710C04;
  cursor: pointer;
  font-size: 15px;
  margin-left: 18px;
  padding: 0;
}

.content {
  display: none;
  overflow: hidden;
  padding: 0;
}
*/

/* Adapted from: https://eggramen.neocities.org/code/css_testpages */
body {
  background-color: #F2F3F4;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  font-family: Typewriter-Regular;
  font-size: 15px;
  width: 85%;
}

a {
  color: #710C04;
}

a:hover {
  color: #710C04;
}

.container {
  background: #F2F3F4;
  padding: 1em;
  max-width: 69em;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #710C04;
}

input[type="text"],
input[type="url"],
textarea {
  width: 100%;
  box-sizing: border-box;
  border-color: #710C04;
  resize: vertical;
  padding: 0.5em;
  margin-bottom: 1em;
  border-radius: 5px;
  background: #F2F3F4;
  color: #710C04;
  font-family: Typewriter-Regular;
}

input[type="submit"] {
  background: #F2F3F4;
  color: #710C04;
  font-weight: bold;
  font-size: 1.3em;
  border: none;
  border-radius: 5px;
  padding: 0.5em 1em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: Typewriter-Regular;
}

input[type="submit"]:hover {
  background: #F2F3F4;
}

#guestbooks___guestbook-made-with {
  text-align: right;
  color: #710C04;
}

#guestbooks___guestbook-messages-container {
  margin-top: 1em;
 color: #710C04;
}

hr {
  border: 0;
  margin: 1em 0;
}

@media (max-width: 640px) {
  .container {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    padding: 15px;
  }
}