@font-face {
  font-family: "SystemFont";
  font-weight: normal;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Regular');
  font-style: normal !important;
}
@font-face {
  font-family: "SystemFont";
  font-weight: bold;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Bold');
  font-style: normal !important;
}
@font-face {
  font-family: "SystemFont";
  font-weight: bold;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Bold');
  font-style: normal !important;
}
@font-face {
  font-family: "AkkuratBold";
  src: url('../fonts/FontsFree-Net-Akkurat-Bold.eot');
  src: url('../fonts/FontsFree-Net-Akkurat-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Akkurat-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AkkuratBold";
  src: url('../fonts/FontsFree-Net-Akkurat-Bold.eot');
  src: url('../fonts/FontsFree-Net-Akkurat-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Akkurat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "AkkuratBold", sans-serif;
  font-size: 3em;
  padding: 0 3% 3%;
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  width: 100vw;
}
.fixed {
  position: fixed;
  top: -50vh;
  left: -50vw;
  height: 200vh;
  width: 200vw;
}
.content {
  flex-wrap: wrap;
  height: 100%;
  overflow: scroll;
  position: relative;
}
.comment:first-child {
  margin-top: 0 !important;
}
.comment:first-child:not(.hidden) {
  margin-top: 0 !important;
}
.comment-placeholder {
  flex: 1 0 100%;
  align-items: stretch;
}
.comment-box {
  flex: 1 0 100%;
  align-items: stretch;
  max-height: max-content;
}
.comment-box:first-child {
  margin-top: 0 !important;
}
.comment-box:first-child:not(.hidden) {
  margin-top: 0 !important;
}
.comment-box:not(.hidden):first-child {
  margin-top: 0 !important;
}
.comment-box-inner {
  border-width: 3pt;
  border-color: black;
  border-style: solid;
  border-radius: 1em;
  padding: 3%;
  height: max-content;
}
.comment-author {
  font-size: 0.3em;
}
.comment-text {
  font-size: 1em;
}
.level-1 {
  padding-left: 0;
  padding-right: 9%;
  margin-top: 3%;
}
.level-2 {
  padding-left: 3%;
  padding-right: 6%;
  margin-top: 0;
}
.level-3 {
  padding-left: 6%;
  padding-right: 3%;
  margin-top: 0;
}
.level-4 {
  padding-left: 9%;
  padding-right: 0;
  margin-top: 0;
}
.hidden {
  display: none;
}
.space-0 {
  margin-top: 0;
}
.space-0:not(:first-child).level-1 {
  margin-top: 25pt;
}
.space-25 {
  margin-top: 25pt;
}
.space-50 {
  margin-top: 50pt;
}
.bg-full {
  background-size: cover;
  background: url("../include/bg.svg") no-repeat center;
}
.bg-no {
  background: conic-gradient(#000000);
}
.bg-red {
  background-color: #ff0000;
}
.bg-red-green {
  background: #ff0000 linear-gradient(180deg, #ff0000 0%, #00ff00 100%);
}
.bg-red-gray {
  background: #ff0000 linear-gradient(180deg, #ff0000 0%, #888888 100%);
}
.bg-green {
  background-color: #00ff00;
}
.bg-orange {
  background-color: #ff7f00;
}
.bg-orange-yellow {
  background: #ff7f00 linear-gradient(180deg, #ff7f00 0%, #ffff00 100%);
}
.bg-orange-bluegreen {
  background: #ff7f00 linear-gradient(180deg, #ff7f00 0%, #00ffff 100%);
}
.bg-orange-blue {
  background: #ff7f00 linear-gradient(180deg, #ff7f00 0%, #0000ff 100%);
}
.bg-yellow {
  background-color: #ffff00;
}
.bg-yellow-pink {
  background: #ffff00 linear-gradient(180deg, #ffff00 0%, #ff00ff 100%);
}
.bg-yellow-blue {
  background: #ffff00 linear-gradient(180deg, #ffff00 0%, #0000ff 100%);
}
.bg-yellow-orange {
  background: #ffff00 linear-gradient(180deg, #ffff00 0%, #ff7f00 100%);
}
.bg-pink {
  background-color: #ff00ff;
}
.bg-pink-blue {
  background: #ff00ff linear-gradient(180deg, #ff00ff 0%, #0000ff 100%);
}
.bg-pink-green {
  background: #ff00ff linear-gradient(180deg, #ff00ff 0%, #00ff00 100%);
}
.bg-gray {
  background-color: #888888;
}
.bg-gray-yellow {
  background: #888888 linear-gradient(180deg, #888888 0%, #ffff00 100%);
}
.bg-gray-blue {
  background: #888888 linear-gradient(180deg, #888888 0%, #0000ff 100%);
}
.bg-gray-orange {
  background: #888888 linear-gradient(180deg, #888888 0%, #ff7f00 100%);
}
.bg-blue {
  background-color: #0000ff;
}
.bg-blue-green {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #00ff00 100%);
}
.bg-blue-green-violett {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #00ff00 50%, #7f00ff 100%);
}
.bg-blue-green-blue {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #00ff00 50%, #0000ff 100%);
}
.bg-blue-gray {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #888888 100%);
}
.bg-blue-bluegreen {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #00ffff 100%);
}
.bg-blue-orange {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #ff7f00 100%);
}
.bg-blue-yellow {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #ffff00 100%);
}
.bg-blue-green {
  background: #0000ff linear-gradient(180deg, #0000ff 0%, #00ff00 100%);
}
.bg-bluegreen {
  background-color: #00ffff;
}
.bg-bluegreen-violett {
  background: #00ffff linear-gradient(180deg, #00ffff 0%, #7f00ff 100%);
}
.bg-bluegreen-blue {
  background: #00ffff linear-gradient(180deg, #00ffff 0%, #0000ff 100%);
}
.bg-bluegreen-orange {
  background: #00ffff linear-gradient(180deg, #00ffff 0%, #ff7f00 100%);
}
.bg-bluegreen-gray {
  background: #00ffff linear-gradient(180deg, #00ffff 0%, #888888 100%);
}
.bg-bluegreen-green {
  background: #00ffff linear-gradient(180deg, #00ffff 0%, #00ff00 100%);
}
.bg-white {
  background-color: #ffffff;
}
/*# sourceMappingURL=styles.css.map */