/* USHER - Universal Site Header, Easily Repeatable */

header {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  margin: 2em auto 2em;
}

body {
  background-image: 
    url("../images/sitelogo-full.png"),
    radial-gradient(circle, rgba(176, 21, 47, 1) 7%, rgba(168, 0, 33, 1) 47%, rgba(79, 3, 3, 1) 100%);
  background-repeat: repeat, no-repeat;
  background-position: top left, center;
}

#big-logo {
  img {
    width: 450px;
    transition: 200ms ease;
    filter: drop-shadow(0 5px 5px black);
  }
  img:hover {
    scale:101%;
    filter:drop-shadow(0 5px 10px black);
  }
  img:active{
    scale: 99%;
    filter:none;
    transition: 0ms;
  }
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  ul {
      display: flex;
      justify-content: center;
      align-content: center;
      padding: 0;
      margin: 0;
      background: #000000;
      background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(105, 105, 105, 1) 100%);
      border-radius: 10px 10px 0 0;
  }
  li {
      list-style-type: none;
      a {
        line-height: 1;
        display: block;
        color: white;
        font-weight: bold;
        text-shadow: 0 2px 2px black;
        font-size: 14px;
        padding: 0.5em 1.5em;
        text-decoration: none;
      }
      a:hover {
          background: #a60000;
          background: linear-gradient(0deg, rgba(166, 0, 0, 1) 0%, rgba(105, 105, 105, 1) 100%);
          text-shadow: none;
      }
      a:active {
          background: #a60000;
          background: linear-gradient(0deg, rgba(166, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
      }
  }
  .opened-page {
        a {
          background: #a60000;
          background: linear-gradient(0deg, rgba(166, 0, 0, 1) 0%, rgba(105, 105, 105, 0) 100%);
          text-shadow: none;
        }
      }
}

.wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 2em 2em;
  box-shadow: 0 0 10px black;
  background-color: #2b2b2b;
  border-radius: 10px;
  margin-bottom: 2em;
}