html, body {
 height: 100%;
 font-family: Arial, sans-serif;
 margin: 0;
 overflow-x: hidden;
}
p {
 display: inline-block;
 margin-left: 5px;
 margin-right: 5px;
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(.side-bar-toggle) {
  transform: scale(1.05);
  border-color: #42d7e2;
  }
}
@media all and (max-width: 550px) {
  .side-bar {
    visibility: hidden;
  }
  .side-bar.show {
    visibility: visible;
  }
}
@media all and (min-width: 550px) {
  .side-bar-toggle {
    visibility: hidden;
  }
}
.side-bar-toggle.move {
  margin-left: 136px;
  position: fixed;
}
.side-bar-toggle {
  background-color: #198fd3;
  border-style: solid;
  border-width: 2px;
  border-top: 0px;
  border-left: 0px;
  border-color: black;
  position: fixed;
  height: 25px;
  width: 30px;
  z-index: 1000;
}
.side-bar {
 background: linear-gradient(to bottom, #ffffff00 0%, #ffffff90 100%);
 background-color: #198fd3;
 position: fixed;
 z-index: 1000;
 width: 136px;
 height: 100%;
 margin: 0px;
 top: 0px;
 left: 0px;
 display: flex;
 flex-direction: column;
 align-items: center;
 border-right-style: solid;
 border-right-color: black;
 border-right-width: 2px;
 border-radius: 0px;
 box-shadow: 2px 0px 10px 1px #3f3f3f;
}
.logo {
 scale: 1.5;
 width: 100%;
 margin: 5px;
 margin-top: 10px;
 opacity: 100%;
}
.logo:hover {
  transform: rotate(1deg);
}
.navigation-title, .social-title {
  background: linear-gradient(to bottom, #ffffff33, #ffffff11),
  linear-gradient(to bottom, #42a7e2 50%, #005E99 100%);
  border-style: solid;
  border-width: 2px;
  border-color: #004a79;
  border-radius: 4px;
  text-align: center;
  color: white;
  text-shadow: black 1px 1px;
  margin: 0px;
  margin-top: 15px;
  width: 85%;
}
.navigation-items, .social-items {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 90%;
 margin: 0px;
 margin-top: 4px;
}
button {
  -webkit-tap-highlight-color: transparent;
}
.home, .black-arrow-archive, .chance-counter, .prospero-tracker, .refund-the-world, .odds-submit, .counter-clear, .all-clear {
  background: linear-gradient(to bottom, #ffffff33, #ffffff11),
  linear-gradient(to bottom, #ffffff 50%, #c2c2c2 100%);
  border-style: solid;
  border-width: 2px;
  border-color: #c7c7c7;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  width: 90%;
  margin: 2px;
}
.social-items form  {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 margin: 0px;
}
.tweet, .bsky {
  background: linear-gradient(to bottom, #ffffff33, #ffffff11),
  linear-gradient(to bottom, #ffffff 50%, #c2c2c2 100%);
  border-style: solid;
  border-width: 2px;
  border-color: #c7c7c7;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  width: 90%;
  margin: 2px;
}
.year-actual {
 color: black;
 display: inline;
 position: absolute;
 font-size: 75%;
 margin: 10px;
 left: 0;
 right: 0;
}
.year-sidebar {
 display: inline-block;
 position: fixed;
 text-align: center;
 height: 50px;
 width: 80px;
 bottom: 0;
}
.main-content-area {
  text-align: justify;
  margin-top: 10%;
  margin-bottom: 20%;
}