/* style.css - a simple style sheet */ 
body { margin-left: 5%; margin-right: 5%;   color: white; background: #20207f; font-size: larger; font-family: Verdana, sans-serif;}

#menuitem, a:link, a:visited {
  color: white;
  text-decoration: none;
  display: inline-block;
}

#menuitem, b:link, b:visited {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

b:hover, b:active {
  border: 1px solid white;
  padding: 10px 20px;
  text-align: center;
}

th, td {
  border: 2px solid black;
  border-radius: 4px;
  margin: 4px;
  background: #70A0FF;
  padding: 10px;
}

.wrapper {overflow: auto;}

#main {
margin-left: 5px;
}

#leftsidebar {
  float: none;
  width: auto;
}

#rightsidebar {
  float:none;
  width:auto;
}

#menulist {
  margin: 0;
  padding: 0;
  display: none;
}

.mobilemenu {
  display: none;
  margin: 0;
  padding: 0;
}

#mobilemenu {
  margin: 0;
  padding: 0;
}

body:has(.menubutton > input:checked) .mobilemenu {
  display: unset;
}

.menuitem {
  background: #70A0FF;
  border: 2px solid black;
  border-radius: 4px;
  max-height:25px;
  text-align: center;
  list-style-type: none;
  margin: 4px;
  padding: 6px;
}

#stoppress {
  background: #70A0FF;
  color: white;
  border: 2px solid black;
  border-radius: 4px;
  min-height:100px;
  margin: 4px;
  margin-top: 10px;
  padding: 10px;
}

.mainnav  {
  display: flex;
  width: 100%;
  gap: 1rem;
  padding: 0.5rem 1rem;
  /*background-color: purple;*/
  color: white;
}

@media screen and (min-width: 800px) {
  #leftsidebar {width: 30%; float: left;}
  #rightsidebar {width:60%; float: right}
  #main {margin-left: 30px;}
  #menulist {display: unset;}
  .mainnav {display: none;}
}

.menubutton>input {
  display: none;
}

#menubuttoninput {
  display: none;
}


/*these toggles the display of the menu button, it works because the label after the input element */

.menubutton>input:checked+label .not-active {
  display: none;
}

.menubutton>input:not(:checked)+label .active {
  display: none;
}

nav {
  display: flex;
  width: 100%;
  gap: 1rem;
  padding: 0.5rem 1rem;
  /*background-color: purple;*/
  color: white;
}