@font-face {
  font-family: Luminari;
  src: url(/fonts/Luminari.otf);
}
body {
  background-image: url('/agentverse-graphics/pages.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Georgia, Big-Caslon, Palatino, serif;
  font-size: 16px;
  line-height:1.3;
  color:white;
}
h3 {
  text-align:center;
  font-family: Luminari, Big Caslon, Palatino, serif;
}
h4 {
  font-family: Luminari, Big Caslon, Palatino, serif;
}
.container {
  margin:10px;
  display:grid;
  grid-template-columns: minmax(260px, 1fr) minmax(706px, 2fr) minmax(300px, 1fr);
}
.navbar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);  
  margin:10px;
  padding:10px;
  width:200px;
  height:500px;
  background-color:rgba(0, 0, 0, 0.75);
  border:1px solid rgba(0, 0, 0, 0.80);
  border-radius:5px;
}
.navgif {
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px;
  transition:0.3s ease;
  width:150px;
  filter: drop-shadow(5px 5px 7px black);
}
.navgif:hover {
  transform:scale(1.05);
}
.bodydiv {
  margin-top:20px;
  margin-bottom:20px;
  width:680px;
  background-color:rgba(0, 0, 0, 0.75);
  border:1px solid rgba(0, 0, 0, 0.80);
  border-radius:5px;
}

.one {
  height:150px;
  width:680px;
}
.versetitle {
  height:150px;
  margin:0px 25px 0px 25px;
}
.two {
  display:grid;
  grid-template-columns:340px 340px;
}
.about {
  width:270px;
  height:200px;
  margin:0px 15px 15px 25px;
  padding:15px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
  overflow:auto;
}
.chara {
  width:270px;
  height:200px;
  margin:0 25px 15px 15px;
  padding:15px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
  overflow:auto;
}
.three {
  display:grid;
  grid-template-columns:480px 200px;
}
.worldb {
  width:390px;
  height:180px;
  margin:15px 0 15px 50px;
  padding:15px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
  overflow:auto;
}
.four {
  display:grid;
  grid-template-columns:200px 480px;
}
.prose {
  width:400px;
  height:210px;
  margin:15px 50px 15px 0;
  padding:10px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
  overflow:hidden;
}
.five{
  width:680px;
}
.fiveinner {
  margin:15px auto 30px auto;
  width:600px;
  height:35px;
  padding:15px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
  overflow:hidden;
  display:grid;
  grid-template-columns:205px 205px 205px;
}
.bottomb {
  display:block;
  margin-right: 15px;
  transition:0.3s ease;
  filter: drop-shadow(5px 5px 7px black);
}
.bottomb:hover {
  transform:scale(1.05);
}
.six {
  height:20px;
  line-height:20px;
  border-radius:0px 0px 5px 5px;
  color:black;
  font-size:12px;
  text-align:center;
  background-image: url('/agentverse-graphics/avbar.png');
  background-repeat: no-repeat;
}

.rightcontainer {
  position:fixed;
  top: 50%;
  transform: translateY(-50%);  
  width:250px;
  margin:10px;
}
.rightone {
  width:250px;
  height:150px;
  background-color:rgba(0, 0, 0, 0.75);
  border:1px solid rgba(0, 0, 0, 0.80);
  border-radius:5px;
  margin:25px 0px 35px 0px;
  overflow:auto;
}
.plist {
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px;
  transition:0.3s ease;
  filter: drop-shadow(5px 5px 7px black);
}
.plist:hover {
  transform:scale(1.05);
}
.righttwo {
  width:250px;
  height:350px;
  background-color:rgba(0, 0, 0, 0.75);
  border:1px solid rgba(0, 0, 0, 0.80);
  border-radius:5px;
  margin:25px 0px 35px 0px;
  overflow:auto;
}
.update {
  width:180px;
  margin:15px auto 15px auto;
  padding:10px;
  background-color:#3b3b3b;
  border-radius:5px;
  filter: drop-shadow(5px 5px 7px black);
}