body {
  background-color: #210F04;
  background-image: url("https://adamappled.neocities.org/assets/homepage/backgroundtile.png");
  background-size: 30%;
  color: white;
  font-family: Monospace;
  font-size: 1rem;
}

.box {
  max-width: 950px;
  margin: 30px auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 240px minmax(0,1fr); 
}

/* HEADER */

header {
  grid-row: 1 / 2 ;
  grid-column: 1 / 3;
}

header span{
  display: flex;
  justify-content: flex-end;
}

.top_bar{
  display: flex;
  justify-content: center;
  max-width: 100%;
  height: auto;
}

/*MAIN GRID */

.sidebar {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  display: grid;
  grid-gap: 10px;
  align-content: flex-start;
}

.main_contents{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  display: grid;
  grid-gap: 10px;
  align-content: flex-start;
}

/*NAVBAR */

nav {
  border-style: double;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: max-content;
  background-color: #F1B849;
  border-color: #D63901;
}

.navbutton {
  color: #D63901;
  background-color: transparent;
  text-decoration: none;
  width: 100%;
  font: inherit;
  text-align: left;
  transition: .2s ease;
  font-weight: 700;
  font-size: 1.25rem;
}

.arrowbutton{
  color: #D63901;
  background-color: transparent;
  text-decoration: none;
  font: inherit;
  text-align: left;
  font-weight: 700;
  display: none;
}

@media (hover: hover) {
  .navbutton:hover {
    color: white;
    background-color: black;
  }
}

.nav_list{
  list-style-type: none;
  margin: 0px;
  padding: .85em;
}

.button_link{
  text-decoration: none;
}

.otherside_submenu{
  display: none;
}

.otherside_submenu.show{
  display: block;
}

/* MAIN BEASTIARY */

mainbeastiary {
  border-style: double;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: max-content;
  background-color: #050504;
  border-color: #A0A0A0;
}

.page {
  display: grid;
  grid-template-columns: auto auto auto;
}

.beast{
  text-align: center;
  align-items: center;
}

.beast img {
  max-width: 160px;
}

/* CONTACT INFO */

contactme {
  border-style: double;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  height: max-content;
  background-color: #050504;
  border-color: #A0A0A0;
}

/* FOOTER */

footer {
  border-style: double;
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  background-color: #F1B849;
  border-color: #D63901;
  color: #D63901;
}

/* Main section styling */

.section_content {
  margin: 20px;
}

.section_centered{
  text-align: center;
}

.bordered_header{
  border-style: double;
  margin: 0px;
  border-collapse: separate;
  padding: 5px 20px;
  border-color: #A0A0A0;
}

/* Link styling */

.box_link {
  color: #F1B849;
}

.dark_link{
  color: #D63901;
}

.dark_link:hover{
  color: white;
}

.box_link:hover{
  color: white;
}