@font-face {
  font-family: "Nimbus";
  src: url("/assets/fonts/NimbusMono-Regular.otf") format("opentype");
}

 @font-face {
     font-family: "Satoshi";
     src: url("/assets/fonts/Satoshi-Light.ttf") format("truetype");
 }

h1, h3, p { margin: 0; }
a { text-decoration: none; color: inherit; }

body {
  margin: 0;
  padding: 10px;
  font-family: 'Nimbus', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  background: rgb(22,22,22);
  color: white;
}

body.alt-font {
  font-family: 'Satoshi', sans-serif;
  letter-spacing: .5px;
}

.underline { text-decoration: underline;}

.settings-bar {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.settings-btn,
.back-btn {
  border: none;
  outline: none;
  font-size: 1.5rem;
  background: transparent;
  color: inherit;
  transition: all 0.3s ease;
}

.settings-btn:hover { transform: scale(1.1); }
.back-btn {
  position: fixed;
  top: 10px;
  left: 15px;
}
.back-btn:hover { transform: translateX(-5px); }

.body-text {
  margin-top: 100px;
  width: 800px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.title,
.chunks { display: flex; flex-direction: column; gap: 5px; }
.chunks { gap: 20px; }

.chunk { line-height: 1.5; font-size: 18px; }

.divider {
  height: 1px;
  background: rgb(83,83,83);
  width: 100%;
  border-radius: 1px;
  opacity: 0.5;
}


body.light { background: white; color: #222; }
body.dark  { background: rgb(22,22,22); color: white; }
body.black { background: black; color: white; }

@media (max-width: 600px) {
  .body-text { max-width: 350px; }
  .settings-bar, .back-btn { position: absolute; }
}