:root {
  --main-gradient: linear-gradient(153deg,
      rgba(0, 39, 64, 0.8618040966386554) 0%,
      rgba(0, 103, 85, 0.8842130602240896) 100%);
  --error-gradient: linear-gradient(153deg,
      rgba(64, 0, 48, 0.8618040966386554) 0%,
      rgba(103, 0, 0, 0.8842130602240896) 100%);
  --bg-pattern: url("data:image/png;base64,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");
  --bg-pattern-size: 4.6875rem;
}

* {
  box-sizing: border-box;
  transition: all 125ms ease-out;
}

.background-overlay {
  background-image: var(--bg-pattern);
  background-repeat: repeat;
  background-size: var(--bg-pattern-size);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

body.error .background-overlay {
  filter: blur(2px);
}

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  letter-spacing: 0.035em;
}

.captcha-title {
  padding: 8px;

  * {
    margin: 0;
  }

  &__warning {
    color: red;
    display: none;
  }

  &__subtitle {
    margin-bottom: 8px;
    color: #787878;
    font-weight: bold;
    letter-spacing: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 1rem;
  }

  &__version-info {
    color: #909090;
    font-size: 0.5rem;
  }

  &__command {}

  &__classification {
    font-size: 1.2rem;
    font-family: monospace;
    background: rgb(99, 255, 155);
    padding: 2px;
  }
}

.captcha-wrap {
  display: flex;
  flex-direction: column;
  padding: 5px;
  font-family: Helvetica;
  background: white;
  box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.33);
  border-radius: 4px;
  z-index: 1;
}

.captcha {
  display: grid;
  background: white;
  height: 325px;

  align-items: stretch;
  justify-items: stretch;

  --rows: 3;
  --cols: 3;
  --aspect-ratio: 1;

  aspect-ratio: 1/var(--aspect-ratio);
  grid-gap: 0px;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  padding: 3px;
  transition: all 0ms ease-out;
}

.captcha-cell {
  display: block;
  position: relative;
  border: 1px solid white;
  transition: all 0ms ease-out;
  cursor: pointer;
  transform: scale(1);
}

.captcha-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.captcha-cell:hover {
  transform: scale(0.95);
  transition: all 125ms ease-out;
  z-index: 1;
}

.captcha-cell.selected {
  border: 1px solid lightblue;
  outline: 2px solid lightblue;
  transform: scale(0.9);
  z-index: 1;
}

.captcha-actions {
  padding: 8px;
}

button {
  width: 100%;
  padding: 8px;
  font-family: Helvetica;
  border-radius: 4px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--main-gradient);
  border: none;
  cursor: pointer;

  color: white;
}

body.error {
  button {
    background: var(--error-gradient);
    color: red;
  }

  .captcha-title__warning {
    display: block;
  }

  .captcha-title__greeting {
    display: none;
  }

  .captcha-title__classification {
    background: rgba(255, 150, 150);
  }

  .captcha-cell.selected {
    border-color: rgb(255, 50, 50);
  }
}