:root {
  --theme-background-color: rgb(18, 18, 18);
  --theme-text-color: whitesmoke;
  --theme-bar-color: rgb(23, 23, 23);
  --theme-collapsible-color: rgb(30, 30, 30);
  --theme-content-background-color: rgb(45, 45, 45);
  --theme-color-1: orchid;
  --theme-color-2: rgb(194, 46, 194);
  --theme-color-3: rgb(101, 62, 105);
  --theme-color-4: rgb(84, 50, 93);
}

body {
  font-family: Montserrat Regular, sans-serif;
  color: white;
  background-repeat: repeat;
  background-color: var(--theme-background-color);
  overflow-y: scroll;
}

@media screen and (min-width: 1000px) {
  body {
    max-width: 75%;
    margin: auto;
  }
}

.bar {
  border-radius: 10px;
  background-color: var(--theme-bar-color);
  margin: 0;
  text-shadow: 2px 2px var(--theme-color-2);
}

.header {
  background-image: url("media/F76_P66_LHero.webp");
  background-position: center center;
  background-size: cover;
  padding: 20px 20px;
  position: relative;
}

#collapsebuttondiv {
  padding: .75em;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
}

.collapsebutton,
.feedbackbutton {
  background-color: var(--theme-color-2);
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  border: 1px solid var(--theme-color-2);
}

.collapsebutton:hover,
.feedbackbutton:hover {
  border-color: var(--theme-text-color);
}

.footer {
  align-items: center;
  display: flex;
  justify-content: left;
  margin-top: .35em;
  padding: 15px 20px;
}

.content {
  padding: 0px 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: var(--theme-content-background-color);
  border-radius: 0px 0px 10px 10px;
}

.collapsible-triangle {
  padding-right: 8px;
  width: .5em;
  color: var(--theme-color-1);
}

.note-count {
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  color: var(--theme-color-1);
  font-size: 1.17em;
  margin-left: auto;
  margin-right: .5em;
}

.miner-note-icon {
  position: relative;
  font-size: 1.17em;
  height: 2em;
  color: var(--theme-color-1);
}

.fa-sticky-note-o {
  color: var(--theme-color-2);
}

.button {
  cursor: pointer;
  padding: 10px;
  margin: 5px 0px 0px 0px;
  text-align: left;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--theme-collapsible-color);
  border-radius: 10px 10px 10px 10px;
  transition-delay: 0.2s;
  transition: border-radius 0s ease-out;
  transition-delay: 0.2s;
  border: 1px solid var(--theme-collapsible-color);
}

.button #text {
  color: var(--theme-text-color);
  font-family: futura-pt, sans-serif;
  font-weight: 700;
}

.button.active {
  border-radius: 10px 10px 0 0;
  transition: border-radius 0s ease-out;
}

.button:hover {
  border-color: white;
}

.paragraph {
  margin: .7em 0em .7em 0em;
  font-weight: 400;
  line-height: 1.65em;
}

.hr-sect {
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  display: flex;
  flex-basis: 100%;
  align-items: center;
  margin: 8px 0px;
  color: var(--theme-color-2)
}

.hr-sect:after {
  content: "";
  flex-grow: 1;
  background: var(--theme-color-2);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 8px;
}

.miner-note strong {
  color: var(--theme-text-color);
}

.miner-note {
  color: var(--theme-text-color);
  margin-bottom: 1em;
  padding: .7em;
  line-height: 1.65em;
  background-color: var(--theme-color-3);
  display: inline-block;
  border-radius: 10px;
}

.miner-highlight {
  color: var(--theme-text-color);
  background-color: var(--theme-color-3);
  border-radius: 4px;
  padding: .2em;
}

.miner-strike {
  text-decoration: line-through;
  text-decoration-color: var(--theme-color-4);
  text-decoration-thickness: .2em;
}

.formID {
  border-radius: 5px;
  display: inline-block;
  background-color: var(--theme-color-4);
  color: var(--theme-text-color);
  padding: 0em .4em;
  margin: .1em 0em .1em 0em;
}

.column-container {
  display: flex;
  /* Enable flexbox for horizontal layout */
  flex-wrap: wrap;
  /* Allow columns to wrap to the next line if needed */
  justify-content: space-around;
  /* Distribute space evenly around columns */
}

.column {
  background-color: var(--theme-color-4);
  margin: .2em;
  border-radius: 10px;
  padding: 0em .7em;
}

/* Media query for larger screens (desktop) */
@media (min-width: 768px) {
  .column {
    flex: 1;
    /* Make columns take up equal available space */
  }
}

/* Media query for smaller screens (mobile) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    /* Stack columns vertically on smaller screens */
  }

  .column {
    width: 100%;
    /* Make each column full width on mobile */
  }
}

a {
  color: lightskyblue;
}

li {
  margin: .4em 0em .4em 0em;
}

ul {
  list-style: none;
  padding-left: 1.2em;
  /* space for your custom bullet */
}

li {
  position: relative;
}

/* List code generated by Copilot */
li::before {
  content: "•";
  position: absolute;
  left: -1.2em;
  top: 0.2em;
  font-size: 1em;
  line-height: 1;
}

/* Level 1 */
ul>li::before {
  content: "•";
}

/* Level 2 */
ul ul>li::before {
  content: "◦";
}

/* Level 3 */
ul ul ul>li::before {
  content: "▪";
}

strong,
h1,
.article-el-h2,
.article-el-h3,
.article-el-h4,
.article-el-h5 {
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  color: var(--theme-text-color);
}

.article-el-h1 {
  margin: 0;
  font-size: 2em;
}

.article-el-h2 {
  font-size: 1.5em;
}

.article-el-h3 {
  font-size: 1.17em;
}

.article-el-h4 {
  font-size: 16px;
}

.article-el-h5 {
  font-size: 0.83em;
}

.bleed {
  color: darkred;
}

.poison {
  color: green;
}

.fa-snowflake-o {
  color: lightblue;
}

.fa-crosshairs {
  color: black;
}

.fa-bolt {
  color: lime;
}

div.gallery-container {
  text-align: center;
  display: inline-block;
  width: 100%;
}

div.gallery {
  margin: 5px;
  width: 180px;
  display: inline-block;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.image {
  margin: 5px;
  float: left;
  width: 180px;
}

div.image img {
  width: 100%;
  height: auto;
}

div.desc {
  text-align: center;
}

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