body
{
  margin:0% 3%;
  padding: 0;
  background: #232323;
  color: BlanchedAlmond; /* Page Text Color */
  font-family: "Arial", sans-serif;
  font-size: calc(0.75em + 1vmin);

  /* ==== BACKGROUND IMAGE FORMATTING ==== */
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  /* Background image is fixed in the viewport so that it doesn't move when 
  the content's height is greater than the image's height */
  background-attachment: fixed;
  /* This is what makes the background image rescale based
  on the container's size */
  background-size: cover;
  /* Set a background color that will be displayed
  while the background image is loading */
  background-color: Linen;
}


h1 {
font-family: 'Courgette', cursive;
text-shadow: black 0px 0px 60px;
font-size: calc(120% + 2vmin);
text-align: center;
}

h2 {
font-family: 'Acme', sans-serif;
text-shadow: black 0px 0px 60px;
font-size: calc(100% + 1vmin);
}

h3 {
font-family: 'Roboto', sans-serif;
text-shadow: black 0px 0px 60px;
font-size: calc(80% + 0.8vmin);
margin: 0;
}

p {
padding: 10px;
font-family: 'Roboto', sans-serif;
background: rgba(0, 0, 0, 0.6);
}

hr {
margin: 0 auto;
width: 70%;
max-width: 400px;
border: 0;
height: 4px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.25));
}


.hr-light {
width: 100%;
max-width: 2000px;
height: 8px;
background-image: linear-gradient(to right, rgba(255, 222, 173, 0), rgba(255, 222, 173, 1), rgba(255, 222, 173, 0));
}

/* ======== Links ============ */

a {
  text-decoration: none;

}
a:link {
  color: DodgerBlue;
}
a:visited {
  color: DodgerBlue;
}
a:hover {
  color: DarkSlateBlue;
  font-weight: bold;
}


/* ======== iframe ============ */

iframe {
opacity: 0.9;
}

iframe:hover {
opacity: 1.0;
}


/* ======== Buttons and Checkboxs ============ */

.light-button {
  background-color: BlanchedAlmond;
  border: none;
  color: Black;
  text-align: center;
  opacity: 0.7;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  padding: 3px;
  margin: 3px;
  font-size: calc(0.75em + 1vmin);
}

.light-button:hover {opacity: 1}

.larger-checkbox {
  transform: scale(1.5);
}



/* ======== Radio Buttons ============ */

.radio-overlay {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-overlay input[type='radio'] {
  display: none;
}

.radio-overlay label {
  color: Black;
  font-weight: normal;
}

.radio-overlay label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-overlay input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}




/* ======== Images ============ */


.image-left {
  height: auto;
  float: left;
  padding: 4px;
  margin: 4px;
  width: 100%;
  max-width: 400px;
}

.image-right {
  height: auto;
  float: right;
  padding: 4px;
  margin: 4px;
  width: 100%;
  max-width: 400px;
}

.image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1000px;
}


/* ======== Grid image gallery ============ */

.parent-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.child-grid {
  background: rgba(0, 0, 0, 0.6);
  padding: 5px;
}

/* ======== Input Text Field Box ============ */

.input-box {
  width: 75%;
  margin: 5px;
  padding: 5px;
  font-size: calc(0.75em + 1vmin);
  background-color: BlanchedAlmond;
}

/* ======== Search Results Text Format ============ */

.search-result-format {
  background-color: White;
  color:black;
  padding: 5px;
  opacity:0.8;
  width: 95%;
}




/* ============================================ */
/* Navigation menu styling and toggle */

/* Hidden Checkbox */
.nav-checkbox {
  padding: 10px;
  position: relative;
}

.nav-checkbox:after {
  content: '';
  display: block;
  clear: both;
}

/* Hamburger */
.toggle {
  display: inline-block;
  float: left;
  margin-left: -41px;
}

.toggle a {
  background-color: Linen;
  height: 40px;
  width: 40px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  font-size: 22px;
  line-height: 40px;
  color: Black;
  border-radius: 3px;
  vertical-align: top;
}

.toggle .fa:before {
  content: '\f0c9';
  transition: .3s;
}

/* Menu List */
.menu {
  width: 80%;
  max-width: 490px;
  font-size: calc(80% + 1vmin);
  background: AntiqueWhite;
  position: absolute;
  top: 60px; /*height of menu container*/
  left: -500px; /*must be same as width*/
  margin: 0;
  padding: 0;
  list-style: none;
  transition: .3s;
  z-index: 10;
}

.menu li {
  display: block;
  padding: .2em;
  text-decoration: none;
}

.menu li:hover {
  	color: red;
	background: LightGray;
}

/*position the checkbox directly beneath the toggle*/
.hidden-toggle {
  height: 41px;
  width: 41px;
  vertical-align: top;
  float: left;
  margin-left: 0px;
  cursor: pointer;
  opacity: 0; /*make it invisible*/
  transition: .3s;
}

/*show the menu when checkbox is active*/
.hidden-toggle:checked ~ .menu {
  left: 0;
}

/*change icon when menu is active*/
.hidden-toggle:checked ~ .toggle .fa:before {
  content: '\f00d';
}


/* END Navigation Menu Styling */
/* ============================================ */


@media print {
    #print-results {
        font-size: 10pt;
    }
}