@import url('/assets/css/base.css');
@import url('/assets/css/brand.css');
@import url('/assets/css/layout.css');
@import url('/assets/css/components.css');

body {
  color: var(--color-primary-1);
  background-color: var(--color-light-2);
}

.main {
  padding-bottom: 8rem;
}

.main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: 700;
}

h1 {
  font-size: 2rem;
  font-weight: 800;
}

.main-title p {
  font-size: 0.75rem;
  opacity: 70%;
}

.main-title p span {
  color: var(--color-error-1);
}

.main-title-stage-indicator {
  --height: 1.75rem;

  width: 1.5rem;
  height: var(--height);
  overflow: hidden;

  font-size: 0.8rem;
  text-align: center;
  color: var(--color-light-2);
  background-color: var(--color-primary-1);
  border-radius: var(--border-radius-s);

  opacity: 70%;
}

.main-title-stage-indicator .container {
  transition: transform 700ms ease;
}

.main-title-stage-indicator li {
  height: var(--height);
  display: grid;
  align-items: center;
}