body {
//  background-color: var(--base-color-white);
  background-color: #f0f0f0;
}

header {
  width: 100%;
  text-align: center;
  padding-top: calc(var(--base-spacing-height));
}

#header-logo {
  margin: 0;
  text-align: center;
  width: 100%;
}

#header-logo:hover {
  opacity: 0.6;
}

#gnav {
  width: 100%;
  text-align: center;
  margin-top: calc(var(--base-spacing-height));
}

#gnav.fixed {
  position: fixed;
  opacity: 0.8;
  margin-top: 0;
  top: 10px !important;
  left: 0 !important;
  z-index: 2;
}

#gnav.fixed:hover {
  opacity: 1;
}

#gnav.bounce {
  animation: bounceIn 0.5s ease;
}

#gnav-list {
  width: 1024px;
  background-color: var(--base-color-primary);
  margin: 0 auto;
  padding: 1em 0;
  border-radius: var(--base-border-radius);
}

.gnav-item {
  display: inline-block;
  padding: 0;
  margin: 0 0.3em;
  line-height: 1em;
  color: var(--base-color-white);
}

.gnav-link {
  opacity: 0.6;
}

.gnav-link.active {
  opacity: 1;
}

#page {
  padding: calc(var(--base-spacing-height)) 0;
}

#page-title {
  font-size: calc(var(--base-font-size)*2);
  width: 100%;
  text-align: center;
}

#page-body {
  width: var(--base-page-width);
  margin: calc(var(--base-spacing-height)) auto 0 auto;
}

footer {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(var(--base-spacing-height)*3/2);
  padding: calc(var(--base-spacing-height)) 0 ;
  color: var(--base-color-black);
  line-height: 1.4em;
  text-align: center;
  background-color: #dddddd;
  text-align: center;
  border-radius: calc(var(--base-border-radius));
}

footer a {
  color: var(--base-color-black);
}

#footer-nav {
  width: 100%;
  text-align: center;
  margin-bottom: 0.7em;
}

.footer-nav-item {
  display: inline-block;
  padding: 0 0.5em;
  line-height: 1em;
}

.footer-nav-link {
  color: var(--base-color-black);
}

#footer-organizer {
  margin-top: calc(var(--base-spacing-height)*1/3);
}

#footer-copyright {
  margin-top: calc(var(--base-spacing-height)*1/3);
}