:root {
  --white: rgb(240, 236, 236);
  --bg-colour: var(--white);
  --fg-colour: rgb(240, 139, 15);
  --hero-bg-colour: #a2a5a1;
  --bright-white: white;
  --grey: gray;
  --dark-grey: #333333;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-colour);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.hero-image-large {
  background-image: url("../img/misty_morning_med.jpg");
  background-color: var(--hero-bg-colour); /* Used if the image is unavailable */
  height: 100%; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.hero-image {
  background-image: url("../img/sunset_pier_hero.jpg");
  background-color: var(--hero-bg-colour); /* Used if the image is unavailable */
  height: 15rem; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

h1 {
  color: var(--white);
}

h2 {
  color: var(--dark-grey);
  font-size: 1.2rem;
  font-weight: 500;
}

h3 {
  color: var(--white);
}

h4 {
  color: #504f4e;
}

 h5 {
  color: var(--white);
 }

 p {
  font-size: 0.8rem;
  font-weight: 200;
 }

 ul, ol {
  font-size: 0.8rem;
  font-weight: 200;
 }

 .plaintext {
  font-style: normal;
  text-decoration: none;
 }
 .largetext {
  font-style: normal;
  text-decoration: none;
  font-size: xx-large;
  font-weight: bold;
 }

 .colour-white {
  color: var(--white);
 }

 .colour-dark {
  color: var(--dark-grey);
 }

 .bg-colour-white {
  background-color: var(--white);
 }

 .bg-colour-grey {
  background-color: var(--grey);
 }




.menu-button {
  font-size: .8rem;
  color: var(--fg-colour);
  background-color: var(--bg-colour);
  margin: 0;
  border-width: 0px;
  font-weight: bold;
}
.menu-button:hover {
  border-width: 2 0 2 0;
  font-weight: bold;
  border-color: var(--fg-colour);
}

.menu-button-selected {
  font-size: .8rem;
  font-weight: bold;
  color: var(--fg-colour);
  background-color: var(--bg-colour);
  border-width: 2 0 2 0;
  border-color: var(--fg-colour);
}

.menu-bar-button {
  height: 2rem;
  padding: 0.5em 0em 0em 1em; /* t r b l*/
  margin: 0;
}

.menu-bar {
  height: 3rem;
  padding: 0em 1em 0em 1em; /* t r b l*/
  margin: 0;
}



header {
  height: 18em;
  width: 100%;
}

#maincontent {
  position: absolute;
    top: 18em; /* Header Height */
    bottom: 3em; /* Footer Height */
    width: 100%;
    
}

footer {
  height: 3em;
  width: 100%;
  background-color: var(--grey);
  position: fixed;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  color: rgb(63, 63, 63);
  background-color:var(--bright-white);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  padding:1em;
  margin: 0.5em;
  align-items: center;
  align-content: center;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add rounded corners to the top left and the top right corner of the image */
.card-image {
  border-radius: 5px 5px 0 0;
  width: 60%;
}

.rounded {
  border-radius: 25rem;
}

.border {
  border: var(--bg-colour);
  border-style: solid;
  border-width: 1;
}

div.left {
  float: left;
}

div.right {
  float: right;
}
.center {
  align-items: center;
  align-content: center;
  text-align: center;
}
.alignright {
  align-items: right;
  align-content: right;
  text-align: right;
}

.flex-center {
  display: flex;
  justify-content: center;
}
div.spacer {
  height: 2em;
}

div.spacer-medium {
  height: 3em;
}

div.spacer-large {
  height: 5em;
}

div.spacer-xlarge {
  height: 10em;
  /*border: 1px solid red;*/
}

div.logo {
  height: 10em;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}

.padded {
  padding: 0em 0em 0em 1em; /* t r b l*/  
}

.padded-right {
  padding: 0em 1em 0em 0em; /* t r b l*/  
}

.padded-selected {
  border-style: solid;
  padding: 0em 0em 0em 1em; /* t r b l*/
  border-width: 2 0 2 0;
}

.padded:hover {
  border-style: solid;
  border-width: 2 0 2 0;
}