body {
  background-image: url("multicolorstarsbkg.jpg");
  color: black;
  font-family: 'Lato', sans-serif; 
  h1, h2, h3 {
  font-family: 'Cinzel', serif;
}
}

.holy-grail-grid {
  display: grid;
  grid-template-areas:
    'header'
    'main-content'
    'left-sidebar'
    'right-sidebar'
    'footer';
  grid-gap: 10px;
  margin: 16px;
  padding: 24px;
}

.holy-grail-grid > * {
  padding: 1rem;
  border-radius: 18px;
}

/* assign columns to grid areas */
.holy-grail-grid > .header {
  grid-area: header;
  background: #000000;
  font-family: 'Cinzel', serif;

}

.holy-grail-grid > .header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.holy-grail-grid > .header a {
  color: floralwhite;
  text-decoration: none;
}

.holy-grail-grid > .header a:hover {
  text-decoration: underline;
  background: rgba(0, 0, 0, 0.7);
}

.holy-grail-grid > .main-content {
  grid-area: main-content;
  background: #CBF1F5;
}

.holy-grail-grid > .left-sidebar {
  grid-area: left-sidebar;
  background: #E3FDFD;
}

.holy-grail-grid > .right-sidebar {
  grid-area: right-sidebar;
  background: #E3FDFD;
}

.holy-grail-grid > .footer {
  grid-area: footer;
  background: #E3FDFD;
}

/* sidebar nav */
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav > li {
  position: relative;
  padding: 8px 0;
}

.sidebar-nav > li > a {
  color: black;
  text-decoration: none;
}

.sidebar-nav > li > a:hover {
  text-decoration: underline;
}

.sidebar-nav > li > a::after {
  content: " +";
  display: inline-block;
}

.sidebar-nav > li.open > a::after {
  content: " -";
  transform: none;
}

/* dropdown - hidden by default */
.dropdown {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.dropdown li a {
  display: block;
  padding: 4px 16px;
  color: black;
  text-decoration: none;
  font-size: 0.9em;
}

.dropdown li a:hover {
  text-decoration: underline;
}

/* show dropdown on click */
.sidebar-nav > li.open .dropdown {
  max-height: 200px;
}

/* tablet breakpoint */
@media (min-width: 768px) {
  .holy-grail-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'header header'
      'main-content main-content'
      'left-sidebar right-sidebar'
      'footer footer';
  }
}

/* desktop breakpoint */
@media (min-width: 1024px) {
  .holy-grail-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      'header header header header'
      'left-sidebar main-content main-content right-sidebar'
      'footer footer footer footer';
  }
}

html {
  font-size: calc(15px + 0.390625vw);
}
}