:root {
  --primary: #32b1cc;
  --primary-dark: #288da3;
  --primary-light: #9be0f0;
  --primary-lighter: #c8f5ff;
  --secondary: #68b558;
  --surface: #ffffff;
  --greys: #555555;

  --radius: 0.5rem;
}

body {
  font-family: Geneva, Verdana, sans-serif;

  margin: 0;
  font-size: 18px;
  min-height: 100vh;

  color: var(--greys);

  background-image: radial-gradient(var(--primary), var(--secondary));
}

.outer {
  min-width: 100vw;
  min-height: 80vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;

  background-color: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 0 0.125rem 0.125rem var(--surface);

  padding: 1.25rem 1.5rem;

  cursor: pointer;
}

.image-container {
  position: relative;
}

.image-container .photo {
  max-width: 10rem;
  max-height: 10rem;

  border-radius: 9999px;
}

.image-container .badge {
  position: absolute;
  right: 0;
  bottom: 0;

  max-width: 2rem;
  max-height: 2rem;

  background-color: var(--surface);
  padding: 0.125rem;

  border: 0.125rem solid var(--primary);
  border-radius: 9999px;
}

.title {
  font-size: 1.5rem;
}

.desc {
  font-size: 1rem;
}

.small {
  font-size: 0.75rem;
}

input {
  font-size: 1.5rem;

  padding: 0.125rem 0.5rem;
  border: 2px solid #ccc;
  border-radius: var(--radius);
  background-color: #f0f0f0;

  text-align: center;
}

input:active,
input:target,
input:focus-within,
input:focus-visible,
input:visited,
input:focus {
  border: unset;
  outline: 2px solid #aaa;
}

.buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: var(--greys);

  font-size: 1.5rem;

  margin-top: 0.5rem;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background-color: var(--primary-lighter);
}

.buttons .button:hover {
  transition: 0.25s;
  background-color: var(--primary-light);
}

.buttons .button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons .button .icon img {
  max-width: 2rem;
  max-height: 2rem;
}