HadesRandomizer.css

body {
  background-color: #161616;
  color: #f1f1f1;
  font-family: sans-serif;
}

footer {
  float: left;
  width: 100%;
  font-size: 0.6em;
  text-align: center;
  color: #494949;
}

body a {
  color: #f1f1f1;
}

footer a {
  color: #494949;
}

.prompt {
  font-weight: bold;
}

.buttonright {
  float: right;
}

.column {
  float: left;
  width: 50%;
}

.mred {
  color: darkred;
}

.mgreen {
  color: darkseagreen;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

button {
  background-color: black;
  color: white;
  border: 1px solid #666666;
  transition-duration: 0.4s;
}

button:hover {
  background-color: black;
  color: white;
  border: 1px solid #ffffff;
}

.static > label {
  display:block;
  background-color: #393939;
  padding: 0.5rem;
  height: auto;
  line-height: auto;
  border: 1px solid #bdbdbd;
}
.static p {
  color: #f1f1f1;
  padding: 0.5rem;
  font-size: 0.8em;
  line-height: 1.7em;
  text-align: left;
  background-color: #292929;
  margin: 0px;
  border: 1px solid #eeeeee;
}
.accordion label {
  display:block;
  background-color: #393939;
  padding: 0.5rem;
  height: auto;
  line-height: auto;
  border: 1px solid #bdbdbd;
}
.accordion p {
  color: #f1f1f1;
  padding: 0.5rem;
  font-size: 0.8em;
  line-height: 1.7em;
  opacity: 0;
  display: none;
  text-align: left;
  background-color: #292929;
  margin: 0px;
  border: 1px solid #eeeeee;
}

.internalaccordion .hiddentext {
  opacity: 0;
  display: none;
}

#mirrorrankstile {
  display: none;
  position: relative;
}
#mirrorrankstile:checked ~ .hiddentext {
  display: inline;
  opacity: 1;
}
#mirrorrankstile ~ label > .arrow::after {
  content: "Show...";
  font-style: italic;
  border: 1px dotted #eeeeee;
  cursor: pointer;
}
#mirrorrankstile:checked ~ label > .arrow::after {
  content: "Hide";
}

#pactrankstile {
  display: none;
  position: relative;
}
#pactrankstile:checked ~ .hiddentext {
  display: inline;
  opacity: 1;
}
#pactrankstile ~ label > .arrow::after {
  content: "Show...";
  font-style: italic;
  border: 1px dotted #eeeeee;
  cursor: pointer;
}
#pactrankstile:checked ~ label > .arrow::after {
  content: "Hide";
}

/* parameters tile (hides checkbox) */
#paramtile {
  display: none;
  position: relative;
}

/* options tile */
#optionstile {
  display: none;
  position: relative;
}
#optionstile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#optionstile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#optionstile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}

/* weapons tile */
#weaponstile {
  display: none;
  position: relative;
}
#weaponstile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#weaponstile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#weaponstile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}

/* keepsakes tile */
#keepsakestile {
  display: none;
  position: relative;
}
#keepsakestile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#keepsakestile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#keepsakestile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}

/* companion tile */
#companiontile {
  display: none;
  position: relative;
}
#companiontile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#companiontile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#companiontile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}

/* heat tile */
#heattile {
  display: none;
  position: relative;
}
#heattile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#heattile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#heattile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}

/* heat tile */
#mirrortile {
  display: none;
  position: relative;
}
#mirrortile:checked ~ .hiddentext {
  display: block;
  opacity: 1;
}
#mirrortile ~ label > .arrow::after {
  content: "+";
  float: right;
}
#mirrortile:checked ~ label > .arrow::after {
  content: "-";
  float: right;
}