body {
  font-family:times;
  background:pink;
  color:#451e0c;
}

#page {
}

#bar {
  background-color: rgba(255, 255, 255, 0.8);
  position:absolute;
  top:0;
  left:0;
  padding:5px;
  width:300px;
  height:100vh;
}

h1 {
  font-size:2em;
  text-align:center;
  margin:0px;
  font-family:birds;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 1px #451E0C);
}

#bar p {
  margin:0px;
  padding:5px;
}

#center {
 width:650px; 
 height:100vh;
 top:0;
 position:absolute;
 overflow:auto;
 left:310px;
 padding:10px;
}

#character-box {
  background:white;
  height:180px;
  padding:5px;
  margin-bottom:10px;
}

.character-img {
  float:left;
  margin-right: 5px;
  width: 175px;
  border-radius: 5px;
  border: 2px solid #451e0c;
  height: 175px;
  overflow: hidden;
}

.character-img img {
  width:175px;
  object-fit: contain;
  object-position: 0px -20px;
}

#dina-fox {
  background:url("/media/characters/dina.jpeg") center -70px / 300px;
}

#troy-barnes {
  background:url("/media/characters/Troy_close_up_Season_Five.webp") center / 175px;
}

#descrption {
  position:relative;
}

table {
  text-align:left;
  gap:5px;
  margin:0px;
  padding:0px;
}

tr {
  margin-left:10px;
  padding:0px;
}

th {
  font-family:Arial;
  margin:0px;
  padding:0px;
}

td {
  font-family:PC98;
  margin:0px;
  padding:0px;
}



.date {
  margin:0px;
  background:#451e0c;
  border-radius:5px ;
  color:white;
  font-family:pc98;
  font-style:italic;
}

#character-box p {
  margin:0px;
}

h2 {
  margin:0px;
  position:relative;
  font-family:arial;
}