:root {
  color-scheme: dark;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--uit-color-background-window);
}

body {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.color-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--uit-spacing-large);
  block-size: 100%;
  min-block-size: 0;
  padding: var(--uit-spacing-large);
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uit-spacing-small);
  text-align: center;
}

.square-rail {
  min-block-size: 190px;
  align-items: center;
}

.square-button {
  inline-size: 148px;
  block-size: 148px;
  min-inline-size: 148px;
  border-radius: 18px;
  transform: rotate(8deg);
  transition: transform 180ms ease, filter 180ms ease;
}

.square-button:nth-child(2) {
  transform: rotate(-7deg);
}

.square-button:nth-child(3) {
  transform: rotate(11deg);
}

.square-button:focus-visible {
  transform: rotate(0deg) scale(1.08);
  filter: brightness(1.22);
}

.color-coral {
  background: #ff6b6b;
}

.color-mint {
  background: #58d6b0;
}

.color-violet {
  background: #9b7bff;
}