* {
  box-sizing: border-box;
}
header,
nav,
#navbar,
main,
footer {
  display: block;
}

html {
  --aa-dark-green: hsl(0,0%,0%);
  --aa-highlight: hsl(32, 10%, 85%);
  --aa-brown: hsl(32, 25%, 45%);
  --aa-tan: hsl(32, 25%, 95%);
  --aa-dktan: hsl(32, 25%, 60%);
}

body {
  margin: 0;
  background-color: hsl(0,0%,0%);
  color: hsl(0,0%,0%);
  font-family: Verdana, Arial, sans-serif;
}

header {
  background-color: hsl(0,0%,0%);
  color: var(--aa-highlight);
  font-family: Georgia, serif;
  background-image: url(media/networksecurityicon.jpg);
  background-position: left;
  background-repeat: no-repeat;
  text-align: right;
  margin: 0;
  padding-right: 10px;
}

h1 {
  line-height: 76px;
  height: 76px;
  padding-right: 10px;
  margin: 0;
}

h2 {
  color: var(--aa-brown);
  font-family: Georgia, serif;
}

h3 {
  color: #003;
}

a {
  color: var(--aa-brown);
}
a:visited {
  color: rgb(255, 255, 255);
}
a:hover {
  background-color: var(--aa-highlight);
}

a.hmbgr {
  background-color: hsl(0,0%,0%);
  color: var(--aa-highlight);
  padding: 0.95em;
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}
a.hmbgr:hover {
  background-color: var(--aa-highlight);
  color: hsl(0,0%,0%);
}

nav {
  background-color: var(--aa-tan);
  font-weight: bold;
  border: 2px solid var(--aa-dktan);
  padding: 0.2em;

  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
nav a {
  text-decoration: none;
  padding: 0 0.5em 0 0.5em;
  font-size: 1.2em;
}
nav a:link {
  color: hsl(0,0%,0%);
}
nav a:visited {
  color: hsl(0,0%,0%);
}
nav a:hover {
  background-color: var(--aa-highlight);
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
.menu-chosen {
  background-color: white;
}

main {
  display: block;
  background-color: #ffffff;
  padding: 1px 20px 20px 20px;
}
.captitle  {
  font-weight: bold;
  color: hsl(197,16%,22%);
}
.mob-video   {
  width: 420px;
  height: 236px;
}
.mob-scratch   {
  width: 363px;
  height: 302px;
}
#homehero,
#intertidalhero,
#fossilhero,
#NOC {
  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#homehero {
  background-image: url(media/circuits.jpg);
}
#intertidalhero {
  background-image: url(media/Virus.jpg);
}
#fossilhero {
  background-image: url(media/Mother-board.jpg);
}
#NOC {
  background-image: url(media/NOC.jpg);
}

.excursion {
  color: #050;
  font-size: 1.5em;
  font-style: italic;
  font-family: Georgia, serif;
}

dt {
  font-weight: bold;
  color: var(--aa-brown);
  border-bottom: 2px solid var(--aa-brown);
  margin-left: 1em;
  margin-right: 1em;
}
dd {
  margin-bottom: 1em;
}

footer {
  font-size: 0.7em;
  font-style: italic;
  padding: 0;
  background-color: hsl(202,61%,6%);
  color: white;
}
footer a {
  color: var(--aa-dktan);
  text-decoration: none;
}
footer a:hover {
  background-color:hsl(202,61%,6%);
  color: var(--aa-tan);
}

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
th {
  padding: 5px;
  background: var(--aa-brown);
  color: white;
}
td {
  padding: 5px;
  border: 2px solid var(--aa-tan);
  text-align: center;
}
tr:nth-child(even) {
  background-color: var(--aa-highlight);
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child {
  border-left: 0;
}
table tr td:last-child {
  border-right: 0;
}

.leftJustify {
  text-align: left;
}
.rightJustify {
  text-align: right;
}

label.error {
  text-align: left;
  margin-top: 5px;
  font: italic 0.9em Arial;
  color: red;
}

#mobile {
  display: none;
}
#desktop {
  display: inline;
}
@media only screen and (max-width: 768px) {
  h1 {
    line-height: 51px;
    padding-right: 1.75em;
    height: 51px;
    margin: 0;
    font-size: 1.5em;
  }
  nav {
    padding: 0;
  }
  nav a {
    display: block;
    padding: 0.2em;
    font-size: 1em;
  }
  nav ul {
    margin: 0;
    padding: 0;
  }
  nav li {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
  }
  nav li:last-child {
    border-bottom: 0px;
  }
  main {
    padding: 0.4em;
  }
  #mobile {
    display: inline;
  }
  a.hmbgr {
    display: block;
  }
  #navbar {
    display: none;
  }
  #desktop {
    display: none;
  }
  #homehero,
  #intertidalhero,
  #fossilhero {
    display: none;
  }
}

#addy {
  text-align: left;
  float: left;
  margin: 0;
  padding: 2em;
}

#copy {
  text-align: right;
  float: right;
  margin: 0;
  padding: 2em;
}

.grid-container {
  display: inline-grid;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: auto auto;
  background-color: var(--aa-highlight);
  padding: 10px;
  grid-column-gap: 5px;
  grid-row-gap: 10px;
}

/* <!-- Chief Squad files created by Joh Crosby., (c) 2019-2020 -->