/* Adjust colours etc. */
:root {
  --FontFamily: Verdana, Helvetica, Arial, sans-serif;
  --MenuTextSize: 20px;
  --ColourDark: #f8f8f8;
  --ColourLight: #dc2f2f;
  --ColourHighlight: #dc2f2f;
  --ColourWhite: #f8f8f8;
  --NumberOfMenuItems: 4;
  --Transition: 0.3s;
  --MarginSmall: 5px;
  --MarginLarge: 10px;
  --PaddingSmall: 5px;
  --PaddingLarge: 10px;
  --Corners: 5px;
}

/**********************************************************************************************/
/* Responsive framework. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--FontFamily);
  overflow-x: hidden;
}

body{
  background-color: var(--ColourDark);
}

h1, h2, h3, p{margin-top: var(--MarginLarge); line-height: 2.0;}
h1{font-size: 2.0em;}
h2{font-size: 1.4em;}
h3{font-size: 1.2em;}
p, li{font-size: 1.0em; line-height: 1.6;}

ul{
  list-style-position: inside;
  list-style-type: square;
  color: var(--ColourLight);
  line-height: 1.6;
}

strong{
  font-style: italic;
  font-weight: bold;
}

hr{
  border: calc(var(--PaddingSmall) * 0.5) solid var(--ColourLight);
  margin-top: calc( var(--MarginLarge) * 5.0);
  margin-bottom: calc( var(--MarginLarge) * 5.0);
}

span.reverse{
  display: inline;
  transform: scaleX(-1);
}

.Banner {
  display: block;
  position: fixed;
  width: 100%;
  background-color: var(--ColourLight);
  color: var(--ColourDark);
  margin: auto;
  padding: 0;
  z-index: 99;
}

#Header {
  height: auto;
  top: 0;
}

#Footer {
  height: auto;
  bottom: 0;
}

#Menu, #FooterLinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: auto;
}

#Menu div,
#Menu div a,
#FooterLinks div,
#FooterLinks div a 
{
  display: inline-block;
  /* border: 1px solid var(--ColourDark); */
  width: calc(100vw / var(--NumberOfMenuItems));
  text-align: center;
  background-color: var(--ColourLight);
  color: var(--ColourDark);
  transition: var(--Transition);
  font-size: var(--MenuTextSize);
  text-decoration: none;
  padding: var(--PaddingLarge);
}

#Menu div a:hover, 
#FooterLinks div a:hover
{
  background-color: var(--ColourDark);
  color: var(--ColourLight);
  transition: var(--Transition);
}

#Menu div a img{
  height: calc( var(--MenuTextSize) * 1.2);
  border: 0;
  background: var(--ColourLight);
}


#Main {
  height: 100%;
  width: 100%;
  margin: var(--MarginLarge);
  padding: calc( var(--PaddingLarge) * 5);
  /*background-color: var(--ColourLight);*/
  color: var(--ColourLight);
  z-index: 0;
}

a{
  color: var(--ColourLight);
  background-color: var(--ColourDark);
  transition: var(--Transition);
}

a:hover{
  color: var(--ColourDark);
  background-color: var(--ColourLight);
  transition: var(--Transition);
}

blockquote{
  border: calc(var(--PaddingSmall) * 0.5) solid var(--ColourLight);
  color: var(--ColourLight);
  background-color: var(--ColourDark);
  display: block;
  height: auto;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--MarginLarge);
  line-height: 1.6;
}

.QuoteSource{
  font-style: italic;
  text-align: right;
  line-height: 1.6;
}

.imgquote{
  text-alignment: center;
  display: flex;
  justify-content: center;
  height: auto;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--MarginLarge);
  border: calc(var(--PaddingSmall) * 0.5) solid var(--ColourLight);
}


@media (width < 600px) {

  h1{font-size: 1.4em;}
  h2{font-size: 1.2em;}
  h3{font-size: 1.0em;}
  p, li{font-size: 0.8em; line-height: 1.6;}

  .Banner {
    display: block;
    position: static;
  }

  #Menu, #FooterLinks {
    display: flex;
    height: calc( var(--MenuHeight) * var(--NumberOfMenuItems) );
    width: 100vw;
    flex-direction: column;
    justify-content: center;
  }

  #Menu div,
  #Menu div a,
  #FooterLinks div,
  #FooterLinks div a 
  {
    display: block;
    width: 100vw;
  }

  .imgquote{
    width: 90%;
  }

}

/*******************************************************************************************************************/
/* SCROLL BARS */

/* Width */
::-webkit-scrollbar{
	width: var(--PaddingLarge);
}

/* Track */
::-webkit-scrollbar-track{
  background: var(--ColourDark); 
  box-shadow: inset 0 0 var(--PaddingSmall) var(--ColourDark); 
  /*border-radius: var(--Corners);*/
}
 
/* Handle */
::-webkit-scrollbar-thumb{
  background: var(--ColourLight); 
  /*border-radius: var(--Corners);*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
  background: var(--ColourDark);
  box-shadow: inset 0 0 var(--PaddingSmall) var(--ColourLight); 
  transition: var(--Transition);
}

/*******************************************************************************************************************/
/* FORMS */

input[type=email], input[type=text], textarea{
  color: var(--ColourLight);
  background: var(--ColourDark);
  border: calc( var(--PaddingSmall) * 0.5) solid var(--ColourLight);
}

input[type=submit]{
  color: var(--ColourDark);
  background: var(--ColourLight);
  padding: var(--PaddingSmall);
  border: calc( var(--PaddingSmall) * 0.5) solid var(--ColourLight);
}

input:focus, textarea:focus, input[type=submit]:focus{
  background-color: var(--ColourWhite);
  color: var(--ColourLight);
  border: calc( var(--PaddingSmall) * 1.0) solid var(--ColourLight);
}

/**********************************************************************************************/
/* Fancy appearance stuff. */