/* Body */
body {
  background-color: #120f26;
  font-family: Monospace;
  color: white;
  padding: 30px;
  background-image: url('images/bg.png');
}
.body {
  background-color: #231c4a;
  padding: 10px;
  border: 8px double white;
}

/* Text */
b {
  font-weight: bold;
  color: #d9d7fa;
}
i {
  color: #fff4d6;
}
::selection {
  background-color: #fff4d6;
  color:#120f26;
}
::-moz-selection {
  background-color: #fff4d6;
  color:#120f26;  
}

/* Headers */
h1 {
  background-color: #fff4d6;
  color: #231c4a;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
h2 {
  background-color: #e9e8ff;
  color: #231c4a;
  padding-left: 10px;
}
h3 {
  background-color: #c4c2ff;
  color: #231c4a;
  padding-left: 10px;
}

/* Links */
a:link {
  color: #8d89fa;
}
a:visited {
  color: #8d89fa;
}
a:hover {
  color: #ffdd80;
}
a:active {
  color: white;
}

/* Lists */
ol {
  list-style-type: upper-roman;
  color: #fff4d6;
}
ul {
  list-style-type: disc;
  color: #fff4d6;
}

/* Image */
.mobileFriendly {
  max-width: 10%;
}
.mobileFriendlyLarge {
  max-width: 25%
}
.comicFriendly {
  max-width: 100%
}
.border {
  border: 2px solid white;
}
.responsive {
  width: 100%;
  height: auto;
}
.float-l {
  float: left;
  padding: 10px;
}
.float-r {
  float: right;
  padding: 10px;
}
.clear {
  clear:both;
}

/* Divider */
hr {
  border: 2px solid white;
  border-bottom: 2px solid #c4c2ff;
}

/* Table */
th {
  padding: 2px;
  border: 2px solid white;
}
td {
  padding: 2px;
  border: 1px solid white;
}


/* Collapse */
details {
  user-select: none;
}

details[open] summary .icon {
  transform: rotate(180deg);
}

summary {
  display: flex;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}