:root {
  --background-color: rgba(100, 100, 100, 0.4);
  --font-color: rgb(197, 197, 197);
  --button-border-color: gray;
  --button-clicked-border-color: red;
  --sidenav-background-color: #111;
  --sidenav-transition-time: 0.5s;
  --sidenav-link-color: #818181;
  --sidenav-hover-color: #f1f1f1;
  --glow-color: rgb(97, 97, 223);
  --glow-opacity: 0.8;
  --list-hover-color: rgb(255, 242, 62);
  --list-selected-color: red;
}

body {
  color: var(--font-color);
  font-family: sans-serif;
}

/* custom buttons */
.vbutton {
  border: 3px solid var(--button-border-color);
  padding: 10px 20px;
}

.vbutton.button_clicked {
  border: 6px solid var(--button-clicked-border-color);
}

.vlist {
  border-radius: 16px;
}

.vlist ul {
  padding: 0;
  list-style-type: none;
}

/* Side nav  */
/* Sidenav based on https://www.w3schools.com/howto/howto_js_sidenav.asp */
.sidenav {
  height: 100%; /* 100% Full-height */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--sidenav-background-color);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: var(--sidenav-transition-time);
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover,.sidenav li:hover {
  color: var(--sidenav-hover-color);
}

.sidenav ul {
  padding-left: 20px;
}

/* The navigation menu links */
.sidenav a,.sidenav li {
  padding: 8px;
  text-decoration: none;
  font-size: 25px;
  color: var(--sidenav-link-color);
  display: block;
  max-width: 190px;
  text-align: center;
}

/* Position and style the close button (top right corner) */
.sidenav div.closebtn {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 50px;
  height: 50px;
}

.sidenav .closebtn button {
  border: 0;
  background-color: transparent;
  font-size: 36px;
  color: white;
  border-radius: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* property for the animation of the gradient border background of the selected list item */
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}

li {
  border: 3px solid transparent;
}

li.focussed {  
  /* a clear border lets the background gradient shine through */
  border: 3px dashed var(--list-hover-color);
}

li.selected {
  color: white;
  outline: 2px solid var(--list-selected-color);
  outline-offset: -6px;
}

li {
  border-radius: 1rem;
  color: white;
  padding: 1rem;
}

main {
  transition: margin-left .5s;
  padding: 20px;
}

/* The modal dialog for the configuration */

/* based on https://www.w3schools.com/howto/howto_css_delete_modal.asp */
.modal {
  /* display: none; Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(50, 50, 50, 0.5);
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.help-modal-fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out; /* The fade-out animation */
}

.help-modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
}

.help-content {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 15% auto; /* 15% from the top and centered horizontally */
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 80%;
  max-width: 400px; /* Responsive width */
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Handle the focus element */

/* Keyframes for the glow animation on selected element */
@keyframes glow {
    0% {
        box-shadow: 0 0 7px 5px var(--glow-color);
    }
    50% {
        box-shadow: 0 0 12px 7px var(--glow-color);
    }
    100% {
        box-shadow: 0 0 7px 5px var(--glow-color);
    }
}

/* Apply styles to all focused elements */
*:focus {
    outline: none; /* Remove default outline */
    animation: glow 1.5s infinite; /* Apply glow animation */
}

/* hints/help */
.hint-container {
  position: absolute;
  min-width: 90px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none; /* Allows clicks to pass through to the button */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  margin: 6px;
  padding: 6px;
}