:root {
    --expanded-nav-width: 400px;
    --slider-scale: 0.5;
  }

  .sidenav:hover {
    font-size: 24px;
  }

  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    /*  background-color: rgba(0, 0, 0, 0.6); */
    background-image: linear-gradient(rgba(0, 0, 255, 0.6), rgba(0, 0, 0, 0.6));
    overflow-x: hidden;
    transition: 1.0s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: silver; /* #818181; */
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover, .offcanvas a:focus {
    color: white; /* #f1f1f1; */
    /*cursor: not-allowed;*/
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 24px;
    margin-left: 50px;
    margin-bottom: 20px;
  }
  
  a.no-click {
    color: white; /* #f1f1f1; */
    cursor: not-allowed;
  }
  
  #close-nav-button:hover {
    color: cyan;
    cursor: pointer;
  }

  .list-link {
    color: white;
    font-size: 20px;
    text-shadow: 2px 2px 4px black, 0 0 25px white, 0 0 10px orange;
    text-decoration: none;
  }
  a.list-link:hover {
    color: cyan;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 4px 4px 8px black, 0 0 25px white, 0 0 10px cyan;
  }

  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
  
    .sidenav a {
      font-size: 18px;
    }
  }
  
  .close-icon {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 2px;
    margin-right: 7px;
    cursor: pointer;
  }
  
  .close-icon:hover {
    text-shadow: 2px 2px 4px grey, 0 0 25px white, 0 0 7px cyan;
  }
  
  .bigger-close-icon {
    font-size: 40px;
  }

  .shadow-menu a:link, .shadow-menu a:visited {
    color: darkblue;
    text-decoration: none;
  }
  .shadow-menu a:hover {
    color: navy;
    text-shadow: 2px 2px 4px grey, 0 0 25px white, 0 0 7px cyan;
  }
  .shadow-menu a:active {
    color: DarkOrange;
    text-shadow: 2px 2px 4px grey, 0 0 25px white, 0 0 7px cyan;
  }

  dialog {
    background: rgba(25, 25, 25, 0.75);
    color: silver;
    width: 600px;
    top: 50px;
    border: 2px solid orange;
    border-radius: 10px;
  }


.dialog-header {
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

.dialog-header-close {
  float: right;
}
.dialog-header-close:hover {
  color: cyan;
  cursor: pointer;
}