body {
  background-image: url("images/photo-1550537687-c91072c4792d.avif");
  background-repeat: repeat-y;
  background-size: cover;
  background-attachment: scroll;
}


.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100px 300px;
  grid-template-areas: 
  "m m m c c c c c c c c c"
  "m m m c c c c c c c c c"
  "m m m c c c c c c c c c"
  "f f f f f f f f f f f f"
  ; 
}

.header {
  grid-area: h;
  height: 50px;
}

.menu {
  grid-area: m;
  border-radius: 2.5%;
}

.content {
  grid-area: c;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  height: auto;
  padding: 20px 20px 20px 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, .15);  
  backdrop-filter: blur(5px);
  border-radius: 2.5%;
}

.footer {
  grid-area: f;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-align: center;
  margin-top: 100px;
}

h1 {
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 850;
  text-shadow: 2px 2px 2px #294169;
  color: black;
}

h2 {
  font-family: "Oswald", sans-serif;
  font-size: x-large;
  margin-top: 125px;
}

h6 {
  text-align: left;
  margin-top: 5px;
  margin-left: 5px;
}
.nav-link {
  align-content: center;
  font-family: "Oswald", sans-serif;
  color: black;
  margin-left: 30px;
  margin-right: 30px;
  font-weight: 500;
  text-shadow: 1px 1px 1px #294169;
}

.nav-link:hover {
  color: #7D6674;
  background-color: rgba(255, 255, 255, .15);  
  backdrop-filter: blur(5px);
  border-radius: 2.5%;
  margin-left: 20px;
  margin-right: 20px;
  font-weight: 600;
  text-shadow: 1px 1px 1px black;
}

.nav-column {
  margin-left: 10px;
}

.accordian {
  --bs-accordion-color: rgba(255, 255, 255, .15); 
}

.image:hover {
  top: 0;
  left: 0;
  opacity: 0.5;
  box-shadow: 0 0 2px 1px  rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
  border-radius: 4px;
  padding: 5px;
}

a {
  text-decoration: none;
}

button {
  background-color: rgba(255, 255, 255, .15);  
  backdrop-filter: blur(5px);

}

input {
  margin-top: 5px;
}

textarea {
  margin-bottom: 20px;
}