/* =====================================
   BRANDING
===================================== */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  width: 125px;
  height: 125px;
  overflow: hidden;
  animation: tinyWobble 4s infinite ease-in-out;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.title {
  font-size: 36px;
  color: var(--secondary);
  text-shadow: 4px 4px 0 #000;
}

.subtitle {
  color: var(--outline);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

@media (max-width: 780px) {
  .logo {
    width: 92px;
    height: 92px;
  }

  .title {
    font-size: clamp(26px, 7vw, 34px);
  }
}