/*Override some browser defaults*/
* {
    margin: 0;
    border: 0; 
    padding: 0;
    box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

p {
    font-family: arial, tahoma, sans-serif;
    color: var(--textColor);
    margin: 5px 0px;
    padding: 0px 5px;   
}


h1,h2,h4,h5,h6 {
    font-family: 'Bree Serif', times new roman, times, serif;

    color:darkblue;
    margin: 3px 0px;   
    padding: 0px 5px;
}


h3 {
    font-family: 'Bree Serif', times new roman, times, serif;
    background-color:#FFF;
    color:darkblue;
    margin: 3px 0px;   
    border: medium; 
    padding: 0px 5px;
}


ul.home {
    margin: 10px;
}

li.home {
    margin: 10px;
}

a.link {
  font-family: arial, tahoma, sans-serif;
  color: var(--linkColor);
  text-decoration: none;
  margin: 0px 5px;
  padding: 0px 0px;   
  }





/* Styling the contact us form */
fieldset,legend{
    color: var(--textColor);
}

input,select {
    border-radius:4px;
    border: medium;	
    border: 1px solid grey;  	
    border-style: inset;
    /*  box-shadow: 2px 2px 1px grey;   */
    padding: 5px ;
    margin: 2px 5px 2px 5px;
}



fieldset {
  background-color: var(--fieldsetBackground);
}

legend { 
  padding: 2px 5px 2px 2px;
  font-family: arial, tahoma, sans-serif;
  font-size: smaller;
  color: var(--legendText)
}

fieldset {
  padding: 0 5px 0 5px;
  margin: 10px;
  border: solid 1px var(--inputBorder);
  border-radius: 4px;
  width: auto;
  /* box-shadow: 3px 3px 5px #ccc; */
}

input,textarea {
  color: var(--textColor);
  background-color: var(--inputBackground);
  margin: 0 0 .4rem 0;
  width: 100%;
  border: none;
  font-family: sans-serif;
}

.required{
  color: var(--legendText);
  font-size: smaller; 
}

.send{
  font-family: arial, tahoma, sans-serif;
  color: var(--backgroundColor); 
  border: 3px outset var(--backgroundColor);
  border-radius: 7px;
  background-color: var(--headlineColor);
  width: 5rem;
  padding: 1rem;
  margin: 10px;
  display: block;
  box-shadow: 4px 4px 5px #ccc;
}

.contactSubject {
  color: var(--headlineColor);
  padding: 0;
  margin: 0;
}

.contactText {
  color: var(--textColor);
}


.errorText{
  color: red;
  font-family: monospace;
}









/*
#message{
  border: solid;
  border-width: thin;
  border-radius: 4px;
  width: 100%;
  padding: 5px;
  margin: 5px;
}
*/

/* To make the terms and conditions checkbox invisible - part of the honeypot to trick bots on the 'contact' page */
.terms{
  display: none;
}

/*
button,a {
    margin: 0px;
    border: 15;	
    padding: 5px;   
	background-color:darkblue;
	color:lightblue;
	text-decoration: none;
}
*/




/*Set the style for class .warning */
.warning {
    color: red;	
}


.container {
    padding: 10px;
    width: 60%;
    min-height: 100%; 
    margin: 0 auto 0 auto; 
    background-color: white;  
}




.containerBig {
    padding: 10px;
    width: 60%;
    height: auto; 
    margin: auto;
    background-color: white;
  
}
 


.background {
    background-image: url('../images/moonrise.jpg');     
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    display: flex;
    /*I don't know why the flex-basis value here works - it has to be given, in px (any number will do) for the page to stretch to the full screen height.*/
    flex: 1 0 100px;   
}  


.footer {   
    background-color: #7F86AA;
    padding: 2px 5px; 
    color: darkblue;
    text-decoration: none;
    /*flex-shrink: 0; */
}



/* Styles for menu (from https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive) */
ul.topnav {
    font-family: arial, tahoma, sans-serif;
    color: lightblue;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkblue;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: lightblue;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    transition: .3s ease-in-out;  
}

ul.topnav li a:hover:not(.active) {
  color: darkblue;
  background-color: mistyrose; 
}

ul.topnav li a.active {
  color: darkblue;
  background-color: lightblue;
}

ul.topnav li.right {float: right;}


/*mobile*/ 
@media screen and (max-width: 500px) {
    ul.topnav li.right, 
    ul.topnav li {
      float: none;
  }
  
   ul.topnav li a {
    padding: 5px;
  }
 
/* Make the main body fill more of the width */ 
.container, .containerBig {
  width: 90%;
  }
  
  

}