:root {
  --body-side-margin: 10vmin;
  --navbar-height:6vh;

  --navbar-position-mode:fixed;
  --navbar-offset-enable:0.0; 
}

html {
  overscroll-behavior:none;
}

body{
  margin: 0 var(--body-side-margin);
}

.good_flash {
  background-color: #47d75f;
  border: 0.3vmin solid #238e06;
}

.bad_flash {
  background-color: #ff6767;
  border: 0.3vmin solid #e20000;
}

.flashes {
  color: #fff;
  text-shadow: 0.5vmin;
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin:1.3vmin;
  border-radius: 0.6vmin;
}

.flashes.closing {
  opacity: 0;
  transform: scale(0.95);
}


.flash_close{
  top: 5px;
  left: 5px;
  cursor: pointer;
}

div.navbar-spacer {
  height:calc(var(--navbar-height));
  width:100%;
}

div.navbar{
  position:var(--navbar-position-mode);
  left: calc(-1 * var(--body-side-margin) * var(--navbar-offset-enable));
  width: calc(100% + calc(var(--body-side-margin) * 2* var(--navbar-offset-enable)));
  background-color: #333;
  z-index: 2000;
}

div.mobile_navbar {
  display: none; /*Changed by JS*/
  width: 100%;
  /*height:var(--navbar-height);*/
  min-height: var(--navbar-height);
  height:fit-content;
  outline: 0.5vh solid #333;
  background-color: white;
  position: fixed;
  z-index: 2000;
  left:0;
  bottom:0;
}

div#mobile_nav_main_content a {
  height:100%;
  padding-top: 1vh;
  padding-bottom: 1vh;
  padding-left: 1vw;
  padding-right: 1vw;
  display: flex;
  color:#333;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  align-items: center;
  /*background-color: #555;*/
}

div.mobile_navbar div#mobile_nav_main_content {
  height: fit-content;
  min-height: 80%;
  width:100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display:flex;
  align-items: center;
  justify-content: space-evenly;
}

div.mobile_navbar div#mobile_navbar_spacer{
  height: 20%;
  width:100%;
}

div.mobile_nav_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



ul.navbar li{
  float:right;
  border-right:1px solid #555;
  height:100%;
}

ul.navbar li.home{
  float:left;
  border-right:1px solid #555;
  height:100%;
}


ul.navbar li a,
ul.navbar li span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 100%;
  text-decoration: none;
  padding-left:0.5vw;
  padding-right:0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
}

ul.navbar li:has(> a) {
  border-radius: 0.2vmin;
  border-color:#111;
}


ul.navbar li a:hover {
  background-color: #111;
  text-decoration: underline;
}

ul.navbar {
  background-color: #333;
  list-style-type: none;
  height:var(--navbar-height);
  margin:0px;
  padding-left: 0vw;
  padding-right: 0vw;
}

.error {
  padding: 1vmin;
  background-color: red;
  border-radius: 0.5vmin;
  border: #dd0000 0.5vmin;
}