* {
  box-sizing: border-box;
}

body {
  background-color: #bfb8b8;
  color: #181818;
  font-family: "Ubuntu Mono", monospace;
  padding: 1ch;
}

br{
  line-height: 1ch;
}

a:link {
  color: #678bbe;
}

a:visited {
  color: #812a33;
}

a:hover {
  color: #bfb8b8;
  border-style: dashed;
  border-width: 1px;
}

a:active {
  color: #bfb8b8;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

p ~ p {
 margin-top: 1em; 
}

.flexSized {
  display: flex;
  flex-direction: row;
}

@media only screen and (max-width: 800px) {
  .flexSized {
     flex-direction: column;
  }
}

.flexSized > * {
  flex: 50%;
  margin: 1ch;
}

.sneakyPopup {
  visibility: hidden;
  color: #bfb8b8;
  background-color: #678bbe;
  border-color: #bfb8b8;
  border-style: solid;
}

.sneakyParent:hover .sneakyPopup {
  visibility: visible;
}

.primaryBox {
  margin: 0ch;
  width: 100%;
}

.red {
  color: #812a33;
}

.blue {
  color: #678bbe;
}

.grey {
  color: #bfb8b8;
}

.black {
  color: #181818;
}

.BGred {
  background-color: #812a33;
}

.BGblue {
  background-color: #678bbe;
}

.BGgrey {
  background-color: #bfb8b8;
}

.BGblack {
  background-color: #181818;
}

.aside {
  color: #678bbe;
  font-size: 69%;
  vertical-align: .125em;
}

ruby {
  ruby-position: inter-character;
}

@keyframes byogSwap {
  0% {color: #bfb8b8; text-shadow: 0px 3px #812a33, 0px 6px #678bbe;}
  33% {color: #678bbe; text-shadow: 0px 3px #bfb8b8, 0px 6px #812a33;}
  67% {color: #812a33; text-shadow: 0px 3px #678bbe, 0px 6px #bfb8b8;}
}

.byog {
  /*text-color: #bfb8b8;*/
  text-shadow: 0px 3px #812a33, 0px 6px #678bbe;
}

.byogAnim:hover {
  animation: byogSwap 1s steps(1, end) infinite;
}

.byogBox {
  box-shadow: 0px 2.5px #812a33, 0px 5px #678bbe;
}

.spacer {
  max-width: 1ch;
  min-width: .5ch;
  max-height: 1ch;
  min-height: .5ch;
}

.sideWays {
  width: 33%;
  flex-grow: 0;
}

.sideWays > details {
  writing-mode: sideways-lr;
  min-height: 15ch;
  width: 100%;
}

.sideWays > details > summary {
  writing-mode: sideways-lr;
  text-align: end;
  list-style: none;
  &::after {
    content: " +";
  }
  [open] &::after {
    content: " ▼";
  }
}

.sideWays > details > div {
  writing-mode: horizontal-tb;
  position: relative;
  top: -10ch;
  width: 100%;
}

.detSum {
  /*display: inline-block;*/
  width: 100%;
  vertical-align: top;
  border-style: solid;
  border-width: thick;
  border-color: #812a33;
  transition: border-color .5s;
}

.detSum > div {
  margin: 3px;
}

.detSum > summary {
  background-color: #812a33;
  transition: background-color .4s;
  font-weight: bold;
  /*list-style: none;
  &::before {
    content: "+ ";
  }
  [open] &::before {
    content: "▼ ";
  }*/
}

.detSum:hover {
  border-color: #678bbe;
}

.detSum:hover > summary {
  background-color: #678bbe;
}