html {
  font-family: Verdana, sans-serif;
}

body {
  background-color: lightgrey ;
  color: yellow;
  float: left;
  border: none;
  text-decoration: none;
  font-size: 16px;
}
  
.accessible {
  display: block;
  background-color: black;
  text-align: left;
  width: 90% ;
  padding: 5% ;
}

#header.accessible {
  display: block ;
}

.accessible a {
  text-decoration: underline ;
  color: yellow ;
  font-weight: bold ;
}

.accessible a:visited {
  text-decoration: underline ;
  color: yellow ;
}

h1.accessible {
  font-size: 130% ;
  font-weight: bold;
}

h2.accessible {
  font-size: 115% ;
  font-weight: bold;
}

h3.accessible {
  font-size: 105% ;
}


.section {
  display: block ;
  float: left ;
  align-items: center ;
  width: 100% ;
  height: auto ;
  border-style: solid ;
  border-radius: 15px ;
  border: 2px green ;
  margin: 5px ;
  left: 50% ;
  right: 50% ;
}

.hline {
  display: block ;
  float: left ;
  background: yellow ;
  width: 100% ;
  height: 3px ;
}
  
.output {
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: yellow;
  float: center;
  border: none;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-size: 6vw ;
  font-weight: bold;
  width: 89vw ;
  height: 15vh ;
  margin: 1vw ;
  border-radius: 15px;
  box-shadow: 9px 9px #999;
  top: 50%;
  left: 50%;
}

.button {
  background-color: black;
  color: yellow;
  border-style: solid ;
  border-color: yellow ;
  border-width: 2px ;
  
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-size: 6vw ;
  font-weight: bold;
  width: 28vw ;
  height: 15vh ;
  margin: 1vw ;
  border-radius: 15px;
  box-shadow: 9px 9px #999;
    top: 50%;
  left: 50%;
}

.button:hover {
  background-color: yellow ;
  color: black ;
}

.button:active {
  background-color: yellow ;
  color: black ;
  box-shadow: 5px 5px #666;
  transform: translate(4px,4px);
}

.menubutton {
  background-color: black;
  color: yellow;
  border-style: solid ;
  border-color: yellow ;
  border-width: 2px ;
  
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  margin: 1vw ;
  border-radius: 4px;
  box-shadow: 4px 4px #999;
    top: 50%;
  left: 50%;
}

.menubutton:hover {
  background-color: yellow ;
  color: black ;
}

.menubutton:active {
  background-color: yellow ;
  color: black ;
  box-shadow: 2px 2px #666;
  transform: translate(1px,1px);
}

label {
  width: 200px ;
}
  
.formfield {
  background-color: yellow ;
  color: black ;
  border-style: solid ;
  border-color: yellow ;
  border-width: 2px ;
  margin: 3px ;
  border: 3px ;
}