body {
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: courier;
}

.homebox{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  box-shadow: 1px 1px 16px 0 #440072;
}

.bigasstext {
  font-size: clamp(30px,5.5vw,60px);
  color: #ffa531;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.homemap {
  width: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.bottomrow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}

.bottomoptions{
  display: flex;
  align-items: center;
  margin: auto;
  font-size: clamp(20px,3.5vw,40px);
  color: #ffa531;
  font-family: courier;
}

.bottomimages{
  display: flex;
  gap: 10px;
}

.pikachu{
  margin-top: 20px;
}

.headerrow{
  display: flex;
  position: fixed;
  background: black;
  top: 0;
  width: 100%;
  max-width: 1000px;
}

.headeroption{
   color: #107C10;
   margin: 8px 16px;
}

a {
  text-decoration: none;
  color: inherit;
}

.box{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  box-shadow: 1px 1px 16px 0 #440072;
  margin-top: 30px;
}

.sectiontitle{
  font-size: clamp(30px,7.5vw,70px);
  color: #ffa531;
  margin-top: 20px;
  margin-bottom: 20px;
}

h1{
  color: #FFF;
  font-weight: 400;
}

p{
  color: #FFF;
}

.textbox{
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
}

.table{
  width: 100%;
  border-collapse: collapse;
}

td, th {
  color: #dddddd;
  text-align: left;  
  font-size: clamp(5px,1.5vw,20px);
}

.rulers, .endeftan, .koseroco, .zhong, .corpos{
  font-size: clamp(30px,8.5vw,60px);
  margin-top: 25px;
}

.rulers{
  color: white;
}
.endeftan {
  color:#57007F
}

.koseroco {
  color:#7F3300
}

.zhong {
  color:#FF00DC
}

.corpos{
  color:#303030
}

.officertable{
  width: 100%;
}

.officertable th, .officertable td{
  padding: 8px 6px;
  border: 1px solid white;
}

.given,.family{
  width: 14%;
  text-align: left;
}

.stat,.gender{
   width: 6%;
}

.birth{
   width: 8%;
}

.dream{
  width: 18%;
  text-align: left;
}