.app-header {
  z-index: 1000;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 88px;
  width: 100%;
}

body.scrolled .app-header {
  height: 64px;
  background-color: var(--black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}

.app-header .app-header-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
}

.app-header-left-content {
  width: 50%;
}

.app-header-center-content {
  width: 200px;
  position: absolute;
  left: 16px;
}

@media (min-width: 768px) {
  .app-header-center-content {
    left: calc(50% - 100px);
  }
}

.app-header-center-content .app-header-logo {
  display: block;
  padding-top: 8px;
}

.app-header,
.app-header-logo img {
  transition: all 560ms ease;
}

.app-header-logo img {
  transform-origin: top;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.40));
}

@media (min-width: 768px) {
  body:not(.scrolled) .app-header-logo img {
    transform: scale(1.16);
  }
}

.app-header-right-content {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}