/* Opmaak (portrait modus [smartphone] ) */
 
html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 }

h1 {
 font-size: 125%;
}

/* Container omsluit alles op de pagina (header, body & footer), zodat alles een minimale hoogte van %100 van het scherm kan hebben. */
#container {
 min-height: 100%;
 position: relative;
 }

#header {
 background-color: rgb(2, 135, 77);
 color: rgb(255, 255, 255);
 font-size: 1.8rem;
 text-align: center;
 padding: 0.1rem;
 /* line-height: 1.5rem;   /* T.b.v. vertikaal uitlijnen van tekst*/
 font-family: 'Rock Salt', sans-serif;
 letter-spacing: 0.7rem;
 }

#body {
 color: rgb(65, 65, 65);
 text-align: left;
 font-size: 0.9rem;
 padding-top: 1.0rem;
 padding-left: 7.5%;
 padding-right: 7.5%;
 padding-bottom: 3.0rem;	 /* Vrije ruimte voor footer */
 font-family: 'Noto Sans', sans-serif;
 }

#footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 background-color: rgb(95, 69, 42);
 text-align: center;
 /* Tekstkleur van hyperlink is in html file verwerkt, op deze plek werkt het niet. */
 height: 3.0rem;   /* Hoogte van footer */
 line-height: 1.0rem;   /* T.b.v. vertikaal uitlijnen van tekst*/
 font-size: 0.9rem;
 font-family: 'Noto Sans', sans-serif;
 }
 
/* Opmaak invoerveld */
.input[type=text] {
 box-sizing: border-box;
 border: 1px solid black;
 border-color: rgb(75, 75, 75);
 text-align: left;
 font-size: 0.8rem;
 padding: 0.3rem 0.6rem;
 margin: 1.0rem 0.0rem 2.0rem; /* top, left & right, bottom*/
 border-radius: 0.1rem;
 font-family: 'Noto Sans', sans-serif;
 }
 
/* Opmaak knop */
.button {
 background-color: rgb(2, 135, 77);
 color: rgb(255, 255, 255);
 border: none;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
 font-size: 0.9rem;
 padding: 0.5rem 1.0rem;
 margin: 0.0rem 0.0rem 1.0rem; /* Top, left & right, bottom*/
 border-radius: 0.2rem;
 font-family: 'Noto Sans', sans-serif;
 }
.button:hover {
 opacity: 0.75;
 }

/* Afwijkingen opmaak indien landscape modus [desktop/laptop] */
@media only screen and (orientation: landscape) {
 #body {
  font-size: 1.1rem;
  }
 }