:root{
  --textColor: #151C22;
  --headlineColor: #374454;
  --backgroundColor: #D3DAD4;
  --other1Color: #74ABB2;
  --paleColor: #eee;
}


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  }

body{
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-image: url("../images/desk.jpg");
  background-opacity: 0.5;
  background-size: cover;
}

header{
  background-color: var(--backgroundColor);
}

main{
  background-color: var(--backgroundColor);

  margin: 0 auto;
  min-height: 100%;
}

main.index{
  max-width: 650px;
}

main.checker{
  min-width: 650px;
}

nav {
  display: flex;
  flex-direction: row;
}

nav a.menu {         
  font-family: roboto, sans-serif;
  color: var(--textColor);
  background-color: var(--backgroundColor);
  text-decoration: none;
  font-size: large;
  font-weight: 600;
  padding: 5px 10px;
}

nav a.active{
  color: var(--paleColor);
  background-color: var(--textColor);
}

nav a.menu:hover:not(.active){
  color: #fff;
  background-color: var(--other1Color);
}

p,span,legend{
  color: var(--textColor);
  font-family: roboto, sans-serif;
  padding: 5px;
  margin: 5px;
}

span.value{
  padding: 0;
  padding-bottom: 0;
}

span.thisTotal{
  padding: 0;
  margin: 0;
  font-weight: 600;
  color: red;
}

legend{
  font-size: smaller;
  margin-bottom: 0;
  padding-bottom: 0;
}

fieldset{
  border-radius: 4px;
}

h1,h2,h3,h4,h5,h6{
  color: var(--headlineColor);
  font-family: 'Bree Serif', serif;
  padding: 5px;
  margin: 5px;
}

form{
  padding: 5px;
  margin: 10px 5px;
  
}

input{
  padding: 5px;
  margin: 5px;
  border-radius: 4px;
  color: var(--textColor);
  background-color: var(--paleColor);
}

input.send{
  color: var(--textColor);
  background-color: var(--other1Color);
  font-weight: 600;
  border: outset 3px ;
}

input.send:hover{
  color: var(--paleColor);
  background-color: var(--textColor);
  border: inset;
}

/*To reduce/abolish the margins and padding around the pound sign near the inputs  */
span.poundSign{
  margin: 0 0 0 5px;
  padding: 0;
}

span.additionAfter:after{ 
  content: " + ";
  }

span.additionAfter:last-child:after{
  content: " = ";
}

.additionAfter{
  padding: 0;
  margin: 0;
}

.outputPrices{
  display: inline-block;
  margin: 10px 5px 10px 10px;
}

footer{
  font-size: small;
  background-color: var(--backgroundColor);
}

p.footer{
    text-align: center;
}