/*
  header settings.
*/

header {
  grid-area: header;
  margin: 0;
  padding: 0;
  height: 5vh;
  width: 100%;
  display: inline-flex;
}

#logo, #logoTag {
  clear: both;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, var(--color-orig-3) 15%, var(--color-orig-0) 15% 85%, var(--color-orig-3) 85%);
}

#logo {
  margin: 0;
  padding: 0;
  width: min-content;
  object-fit: contain;
  align-items: center;
  overflow: hidden;
}

#logo > svg {
  margin: 20% 2rem;
  padding: 0;
  fill: var(--color-orig-2);
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  min-width: 49px;
  min-height: 10px;
  max-width: 780px;
  max-height: 160px;
}

#logoTag {
  width: 100%;
  height: 100%;
  justify-content: right;
  padding: 0 20px 0 0;
}

#logoTag > p {
  font-size: 2.0vmin;
  font-weight: bolder;
  color: var(--color-orig-3);
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.7));
}