:root {
  --bgcolormt9: Azure;
  --bordercolormt9: Navy;
}

.full, .half, .third, .quarter {
  --bgcolormt9: #ffd480;
}
.resultfull, .resulthalf {
  --bgcolormt9: Azure;
}
.menubtn, .mainmenubtn {
  --bgcolormt9: #996600;
}

body {
    font-family: 'Arial', sans-serif;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: Azure;
}

input[type=text]:focus {
background-color: AliceBlue;
border-radius:5px;
}

input[type=text] {
  width: 3em;
  border:solid;
  background-color: Gainsboro;
  border-radius:5px;
  border:inset;
  text-align: center;
  font-weight:bold;
  font-size:1.1em;
}

input[type=number] {
  width: 3em;
  border:solid;
  background-color: Cornsilk;
  border-radius:5px;
  border:inset;
  text-align: center;
  font-weight:bold;
  font-size:1.1em;
}

a:link {
  text-decoration: none;
  color:CornSilk;
}
a:visited {
  text-decoration: none;
  color:CornSilk;
}
a:hover {
  text-decoration: none;
  color:CornSilk;
}
a:active {
  text-decoration: none;
  color:CornSilk;
}

#outline {
  width: 95%;
  max-width:400px;
  align-items: center;
  align-content:center;
  margin: auto;
  border: double;
  border-width: thick;
  border-radius: 10px;
  border-color: Navy;
  background-image: linear-gradient(#ffe680, #fff5cc);
  padding:5px;
}

.wrapper{
  display: flex;
  /*justify-content: space-around;*/
  width: 100%;
  justify-content: center;
}

.heading {
  text-align:center;
  font-weight:bold;
  font-size:1.1em;
}

.alert{
  width:95%;
  margin: auto;
  border-radius: 10px;
  background-color: Cornsilk;
  font-size: 0.9em;
  text-align: center;
  font-weight: bold;
  color: DarkRed;
}

.title {
  width: 95%;
  border: solid;
  border-radius: 20px;
  background-color: #e6f5ff;
  border-style: ridge;
  padding:1px;
  margin:auto;
  margin-bottom: 5px;
  font-weight: bold;
  font-size:1em;
  text-align: center;
  color:  #003d66;
  box-shadow: 4px 4px;
}

.mainmenubtn {
  box-sizing: border-box;
  width: 48%;
  font-weight:bold;
  font-size:0.9em;
  margin-bottom:4px;
  background-color: var(--bgcolormt9);
  border:solid;
  border-radius: 10px;
  padding: 4px;
  text-align: center;
  display:inline-block;
  align-self: auto;
}

.plaintext {
  text-align:center;
  font-weight:bold;
  font-size: 1em;
  margin: 2px;
}

.menu {
  text-align:center;
  margin-bottom: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
  font-size:1.0em;
  background-color: Black;
  width: 99%;
  border-radius: 50px;
  border:solid;
  color: White;
  align-self:center;
}
.menu:hover {
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24),0 10px 20px 0 rgba(0,0,0,0.19);
}

.menubtn {
  width: 60%;
  padding: 25px;
  margin: auto;
  margin-bottom: 20px;
  font-size: 1.4em;
  font-weight: bold;
  background-color: var(--bgcolormt9);
  border: solid;
  border-radius: 10px;
  text-align: center;
  align-self: center;
}

.team {
width:95%;
text-align:center;
clear:left;
font-weight:bold;
text-decoration:underline
}

.third {
  width: 30%;
  max-width: 100px;
  margin:2px;
  border:none;
  border-radius: 10px;
  padding: 2px;
  font-weight:bold;
  text-align: center;
  background-color: var(--bgcolormt9);
  display:inline-block;
}

.full {
  width: 98%;
  font-weight:bold;
  border-radius: 10px;
  padding: 5px;
  text-align: right;
  margin-bottom: 4px;
  background-color: var(--bgcolormt9);
}

.half {
  width: 46%;
  font-weight:bold;
  border-radius: 10px;
  padding-bottom: 2px;
  text-align: center;
  background-color: var(--bgcolormt9);
  display:inline-block;
}

.quarter {
  font-size: 0.9em;
  width: 23%;
  margin:1px;
  font-weight:bold;
  border-radius: 10px;
  padding-bottom: 2px;
  text-align: center;
  background-color: var(--bgcolormt9);
  display:inline-block;
}

.resultfull {
  width: 295px;
  align-self: center;
  text-align: center;
  margin:5px;
  border-radius: 5px;
  font-weight:bold;
  padding: 5px;
  font-size:1.1em;
  background-color: var(--bgcolormt9);
  display:inline-block;
}

.resulthalf {
  width: 145px;
  margin:1px;
  border-radius: 5px;
  font-weight:bold;
  padding-bottom: 2px;
  padding-left: 5px;
  font-size:1.3em;
  text-align: center;
  background-color: var(--bgcolormt9);
  display:inline-block;
}

.inputtext {
  font-weight:bold;
  font-size:1.1em;
  width:50px;
}

.inputlabel {
  width:150px;
  display:inline-block;
  font-weight: bold;
  text-align:right;
}

.inputfield {
  font-weight:bold;
  display:inline-block;
  font-size:1.1em;
  width:30px;
}

.inputcontainer {
  width: 70%;
  border: solid;
  border-radius: 10px;
  background-color: LightSteelBlue;
  border-style: ridge;
  padding:1px;
  margin:auto;
  margin-bottom: 5px;
  font-weight: bold;
  font-size:1.2em;
  text-align: right;
}

#myBtn {
  width: 100%;
  padding: 4px;
  margin: auto;
  border: solid;
  border-radius: 10px;
  background-color: #806000;
  border-style: ridge;
  color: White;
  border-style:outset;
  font-weight: bold;
  font-size: 1.2em;
}

.menubox {
  width: 98%;
  background-color: White;
  border: solid;
  margin-bottom: 5px;
  margin-top: 10px;
  border-weight: bold;
  box-shadow: 0 4px 4px 4px;
}