.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.logo {
  cursor: pointer;
  width: 30%;
  max-height: 80%;
}

.logo-header {
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-bg-controls);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: color;
}

.logo-header:hover {
  color: var(--color-text-active);
}

.logo-wasm {
  fill: rgb(101, 79, 241);
}

.logo-rustic path,
.logo-wasm path {
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: fill;
}

.logo-rustic:not(:hover) path,
.logo-wasm:not(:hover) path {
  fill: var(--color-bg-player-panel);
}

.logo-rustic:not(:hover) path:nth-child(5),
.logo-rustic:not(:hover) path:nth-child(7) {
  fill: var(--color-bg-app);
}