@font-face {
  font-family: 'courier new';
  src: url('/fonts/CourierNewRegular.woff');
  font-weight: normal;
}

@font-face {
  font-family: 'courier new';
  src: url('/fonts/CourierNewBold.woff');
  font-weight: bold;
}

*{
  box-sizing: border-box;
  cursor: url('icons/cursor.png'), pointer;
  position: relative;
  margin: 0;
  padding: 0;
}

body {
  color: white;
  font-family: "courier new";
  font-size: 103%;
  background-color: #29474b;
  padding:8px;
}

a {
  color: white;
  text-decoration: none;
  display: block;
  font-size: 95%;
}

td div {
  display: inline;
}

td b {
  font-weight: 900;
  color: #C0F2FF;
}

.back {
  float: right;
  z-index: 10;
}

.back:hover {
  transform: translateX(-8px);
}
audio {
  background: white;
  filter: sepia(100%) hue-rotate(140deg) saturate(400%) contrast(50%) brightness(150%);
  height:20px;
  overflow: hidden;
  border-radius:20px;
  margin-left:20px;
  margin-top:20px;
}

.section {
  padding: 20px 5px 5px 5px;
  margin-bottom: 15px;
  border-bottom: 2px solid #A9EBFC;
  overflow-y: hidden;
}

.spacedList {
  padding-left:50px;
  margin-top: 15px;
}

.spacedList li {
  margin-bottom: 15px;
}

.title {
  font-size: 36px;
  border-bottom: 2px solid #A9EBFC;
  margin-bottom: 30px;
  display: block;
  width: 100%;
}

.category {
  border-bottom: 2px solid #A9EBFC;
  padding: 20px 5px 5px 5px;
  text-align: center;
  font-size: 25px;
}

.imgArray {
  display: flex;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  justify-content: center;
}

.imgArray img:hover {
  transform: scale(1.05);
}

.imgArray li {
  margin: 26px;
  text-align: center;
  list-style: none;
}

.imgArray img {
  margin-bottom: 5px;
}

.oc {
  width: 220px;
  height: auto;
  padding:5px;
  border-style: solid;
  border-color: #A9EBFC;
}

.infobox {
  float: right;
  margin-left: 13px;
  margin-bottom: 13px;
  clear: left;
  border-style: solid;
  border-color: #A9EBFC;
  line-height: 1.4em;
}

.infobox-container {
  font-size: 77%;
  padding: 6px;
  width: 26em;
}

.infobox-imgholder {
  padding: 10px;
}

.infobox-name {
  font-size: 160%;
}

.infobox-header {
  font-size: 120%;
}

.infobox-label {
  width: 32%;
}

.infobox-header,.infobox-name {
  background-color: #427f94;
  text-align: center;
  font-weight: bold;
}

.infobox-label,.infobox-data {
  text-align: left;
}

.infobox-label,.infobox-data,.infobox-header {
  vertical-align: top;
}

.infobox-img {
  width: 230px;
  height: auto;
}