@charset "UTF-8";
*:focus {
  outline: none !important;
}

body {
  background-color: #E4B7C7;
  background-size: 4px 4px;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
  color: #654493;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  margin: 0;
  min-height: 100vh;
  box-shadow: inset 0 0 150px rgba(101, 68, 147, 0.4), inset 0 0 150px rgba(101, 68, 147, 0.3);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  letter-spacing: 0.1rem;
}

.container {
  padding: 0 4rem;
}

header {
  padding: 1rem 0;
}

h1 {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.7rem;
  text-shadow: 0.3rem 0.3rem 0 rgba(101, 68, 147, 0.3);
}
h1 span {
  margin-right: -0.7rem;
}
h1 small {
  font-weight: 500;
  text-transform: none;
  text-shadow: none;
  letter-spacing: 0.1rem;
}
h1 small::before {
  content: "–";
}

.pattern {
  border-top: 2px solid #654493;
}

.pattern-inner {
  height: 40px;
  background-size: 50px 3px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px;
  background-position: 0 0, 22px 4px, 22px 5px, 22px 6px, 22px 7px, 28px 12px, 28px 13px, 28px 14px, 28px 15px;
  background-image: linear-gradient(90deg, #654493 , #654493  10px, transparent 10px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #654493  1px, #654493  2px, #654493  2px, #654493  3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #654493  13px, #654493  14px, #654493  14px, #654493  15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #654493  1px, #654493  2px, #654493  2px, #654493  3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.9) 12px, rgba(77, 73, 62, 0.9) 13px, #654493  13px, #654493  14px, #654493  14px, #654493  15px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px, transparent 12px, rgba(77, 73, 62, 0.4) 12px, rgba(77, 73, 62, 0.4) 13px, rgba(77, 73, 62, 0.8) 13px, rgba(77, 73, 62, 0.8) 14px, rgba(77, 73, 62, 0.9) 14px, rgba(77, 73, 62, 0.9) 15px, rgba(77, 73, 62, 0.4) 15px, rgba(77, 73, 62, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #654493  1px, #654493  2px, #654493  2px, #654493  3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.9), rgba(77, 73, 62, 0.9) 1px, #654493  1px, #654493  2px, #654493  2px, #654493  3px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(77, 73, 62, 0.4), rgba(77, 73, 62, 0.4) 1px, rgba(77, 73, 62, 0.8) 1px, rgba(77, 73, 62, 0.8) 2px, rgba(77, 73, 62, 0.9) 2px, rgba(77, 73, 62, 0.9) 3px, rgba(77, 73, 62, 0.4) 3px, rgba(77, 73, 62, 0.4) 4px, transparent 4px);
  background-repeat: repeat-x;
}

a {

  cursor: pointer;
  font: inherit;
  border: none;
  padding: 0.4rem 1rem;
  background-color: rgba(101, 68, 147, 0.35);
  color: #654493;
  box-sizing: content-box;
  position: relative;
  border: 1px solid transparent;
  border-left: none;
  border-right: none;
}
a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 0;
  background-color: #BC397B;
  transition: width 0.2s;
}
a::after {
  content: "";
  display: none;
  position: absolute;
  background: #BC397B;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -4px;
}
a:hover, a:focus {
  background-color: transparent;
  color: #E4B7C7;
  border-color: #BC397B;
  text-decoration: none;
}
a:hover::before, an:focus::before {
  width: 100%;
}
 a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:active {
      text-decoration: none;
}

main {
  flex: 1;
}

.ghost {
    opacity: 0;
}

.content {
  padding-left: 2rem;
  background-image: linear-gradient(90deg, rgba(101, 68, 147, 0.2), rgba(101, 68, 147, 0.2) 14px, transparent 14px, transparent 20px, rgba(101, 68, 147, 0.2) 20px, rgba(101, 68, 147, 0.2) 23px, transparent 23px);
  margin-bottom: 2rem;
}