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 ABOUT ME */

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

/* MAIN ABOUT ME */

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

/* CONTACT INFO */

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

/* 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;
}

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

.section_content_dark {
  /* margin: -10px;*/
  font-size: 0.9rem;
  padding: 7px;
  word-wrap: break-word;
  
}

/* Link styling */

.box_link {
  color: #F1B849;
}

.dark_link{
  color: #D63901;
}

.dark_link:hover{
  color: white;
}

.box_link:hover{
  color: white;
}


/* CURSOR Start https://www.cursors-4u.com */ 
* {
  cursor: url(https://cur.cursors-4u.net/food/foo-3/foo258.ani), url(https://cur.cursors-4u.net/food/foo-3/foo258.png), auto !important;
} 
/* End https://www.cursors-4u.com */
  

@media(max-width: 800px){
  .box {
    grid-template-columns: 230px 1fr;
    grid-template-areas: 
    "header_grid header_grid"
    "nav_grid nav_grid"
    "aboutme_grid aboutme_grid"
    "contactme_grid contactme_grid"
    "indieweb_grid indieweb_grid"
    "footer_grid footer_grid"
  }
  
  .sidebar{
    display: contents;
  }
  
  .main_contents{
    display: contents;
  }
  
  header {
    grid-area: header_grid;
  }

  nav {
    grid-area: nav_grid;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  
  .nav_section_content {
    margin: 20px;
  }
  
  .button {
    display: inline;
    list-style: none;
  }
  
  .arrowbutton{
    display: block;
    margin-left: auto;
    margin-right: auto;
    font: inherit;
  }
  
  .rotate svg{
    transform: rotate(180deg);
  }
  
  .nav_list{
    display: none;
  }
  
  .nav_list.hide{
    display: list-item;
    list-style-type: none;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
  }
    
  contactme {
    grid-area: contactme_grid;
  }

  aboutme {
    grid-area: aboutme_grid;
  }
  
  indieweb {
    grid-area: indieweb_grid;
  }

  footer {
    grid-area: footer_grid;
}
}