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

:root{
	--textColor: #039;
	--headlineColor: #69e;
	--backgroundColor: #fea;
  --siteBackgroundColor: #ffffff;
  --footerColor: darkblue;
  --footerGradientTop: #06f;
  --footerGradientBottom:  #6cf;
  --inputBorder: #999;
}

img{
	display: block;
}

html {
	height: 100%;
}

body{
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: var(--backgroundColor);
}

main{
	margin: 0 auto;
	background-color: var(--siteBackgroundColor);
  width: auto;
  min-width: 700px; 
	padding: 10px;
  box-shadow: 5px 0 5px rgba(128,128,128,0.5);
}

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

p.results{
  white-space: nowrap;
}

legend{
  font-size: smaller;
}

input.new,fieldset.new{
  border-radius: 4px; 
  width: 100%;
}

input{
  border: none; 
}

fieldset{
  border: inset 1px var(--inputBorder);
  margin: 5px 0;
}

input.old{
  border: solid 1px var(--inputBorder);
  border-radius: 4px;
  width: 5em;
  text-align: right;
  margin: 5px;
}

input.room{
  width: 15em;
  text-align: left;
}

input.submit{
  width: auto;
  border: 1px outset;
  background-color: var(--backgroundColor);
  box-shadow: 2px 2px 2px 0 var(--inputBorder);
}

input.submit:hover{
  color: var(--backgroundColor);
  background-color: var(--textColor);
  border: 1px inset;
}

h1,h2,h3,h4,h5,h6{
	font-family:  bree, times, serif;
	color: var(--headlineColor);
	padding: 5px;
}

footer.footer{
	background-color: var(--footerColor);
  background-image: linear-gradient(to bottom, var(--footerGradientTop), var(--footerGradientBottom));
  min-width: 700px;
  margin: 0 auto;
	font-size: smaller;
	padding: 5px;
  box-shadow: 5px 0 5px  rgba(128,128,128,0.5);
  z-index: -1;
}

footer > span{
    color: white;
}

/*     Desktop and tablet    */

@media only screen and (min-width: 650px){
  main,footer.footer{
  
  }
}