*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background-color: #ececec;
  color: #111111;
}

.canvas {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  gap: 16px;
}

.identity__logo {
  width: 80px;
  height: auto;
  display: block;
}

.identity__tagline {
  margin: 0;
  font-size: clamp(0.7rem, 0.9rem + 0.5vw, 0.9rem);
  line-height: 1.5;
  letter-spacing: 0em;
  text-transform: uppercase;
}

.identity__cities {
  white-space: nowrap;
}

.canvas::after {
  content: "";
  position: absolute;
  width: 225vmin;
  height: 225vmin;
  right: -80vmin;
  bottom: -100vmin;
  background-image: url("images/555_studio_logo_blackOutline.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.05; /* increase slightly (e.g. 0.05) to make it more visible */
  transform: rotate(-25deg);
  pointer-events: none;
}