body, html {
    height: 100%;
    scroll-behavior: smooth;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (header.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/hero.jpg");

  /* Set a specific height */
  height: 30%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
} 

 /* The sidebar menu */ 
.side-nav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 250px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: auto;
  right: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 50px;
}

/* The navigation menu links */
.side-nav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.side-nav a:hover {
  color: #f1f1f1;
}

.side-nav ul {
    list-style-type: none;
}

/* Main Level */
.side-nav ul{
  margin:0px 0px;
  padding: 0px 0px;
}

.side-nave li {
    padding: 0px;
}

/* Second Level */
.side-nav ul ul{
  margin-left:15px;
}

/* Third Level */
.side-nav ul ul ul{
  margin-left:20px;
}

/* Fourth */
.side-nav ul ul ul ul{
  margin-left:25px;
}

/* Fifth Level */
.side-nav ul ul ul ul ul{
  margin-left:30px;
}

/* Style page content */
.container {
  /* margin-left: 250px; */
  margin: 0px 10px 0px 250px; 
  padding: 0px 10px;
}

.nav-checkbox {
  position: fixed; 
  top: 0;
  left: 0;
  padding: 5px;
  height: 25px;
  width: 60px;
  z-index: 2;
}

.label-box {
  position: fixed; 
  display:block;
  background-color: #fff;
  border: 1px solid black;
  padding: 5px 5px 8px 5px;
  top: 10px;
  right: 10px;
  z-index: 2; 
}

[type="checkbox"] {
  display: none;
}

[type="checkbox"]:not(:checked) ~ .side-nav {
    display: none;
}

@media screen and (max-width: 800px) {
  .container {margin: 0px 10px 0px 10px}; 
} 

@media screen and (min-width: 800px) {
  .label-box {
    display: none;
  }
  [type="checkbox"]:not(:checked) ~ .side-nav {
      display: initial;
      left: 0px;
      right: auto;
      padding-top: 25px;
  }
  [type="checkbox"]:checked ~ .side-nav {
      display: initial;
  }
  .side-nav {
    display: initial;
  }
} 

.body-black {
  background-color: black;
}

.header-gray {
  background-color: #555;
  padding: 5px;
  display: inline-flexbox;
}

.img-screen {
  margin: 2%;
  /* max-width: 96%; 
  height: 100vh; */
  color: lightgrey;
}

.img-magic-item {
  max-height: 250px;
  /* display: inline-block;  */
}

.img-map {
  width: 100%;
}

.menu {
  width: 30px;
}

footer { 
  margin-top: 15px;
  bottom: 0px;
  height: 20%; 
  position: relative;
}

details[open] summary ~ :not(img) {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -50px}
  80%   {opacity: 0.9; margin-left: 10px}
  100%  {opacity: 1; margin-left: 0px}
}