html,
body {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-container)
}

header {
  background-color: var(--surface-container);
}

main {
  height: 100%;
  padding-bottom: 10px;
}

img {
  border-radius: 50%;
}

.card {
  background: var(--surface);
  color: var(--on-surface);
  padding: 20px 24px;
  border-radius: var(--shape-l);
  width: 500px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  margin-bottom: 10px;
  transition: background 0.2s ease, border-radius 0.2s ease;
}

.card:hover {
  border-radius: var(--shape-xl);
}

.card__name {
  font-size: 1.1em;
  margin: 0;
  font-weight: 600;
}

.card__version {
  color: var(--on-surface-variant);
}

.card__downloads a {
  text-decoration: none;
  color: var(--on-surface);
  padding: 5px 12px;
  transition: background 0.4s ease;
  border-radius: 20px;
}

.card__downloads a.disabled {
  cursor: not-allowed;
}

.card__downloads .icon-button.disabled {
  color: var(--on-surface-variant);
}

.card__downloads .icon-button:not(.disabled):hover {
  transition: background 0.4s ease;
  background: var(--secondary-container);
}

.card__downloads .icon-button:not(.disabled):active {
  background: var(--accent-normal);
}

.card__downloads a.card__button {
  padding: 8px 20px;
  border: 1px solid var(--outline);
}

.card__downloads a.card__button.primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
}

.card__downloads a.card__button.disabled {
  background: var(--surface-variant);
  color: var(--on-surface-variant);
}

.card__downloads a.card__button:not(.disabled).primary:hover {
  filter: brightness(1.1);
}

.card__downloads a.card__button:not(.disabled).primary:active {
  filter: brightness(0.9);
}

.card__downloads a.card__button:not(.disabled):not(.primary):hover {
  background: var(--secondary-container);
}

.card.card__main {
  gap: 10px;
  flex-direction: column;
  text-align: center;
  margin-top: 80px;
  padding: 40px 0px;
}

.card.card__main .card__downloads {
  padding-top: 10px;
}

.card.card__main h2 {
  padding-top: 10px;
}

.card.card__main .card__downloads {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.card__main h2.card__name {
  font-size: 1.3em;
}

@media screen and (prefers-color-scheme: dark) {
  html,
  body {
    background-color: var(--surface)
  }

  .card {
    background-color: var(--surface-container)
  }
}

@media screen and (max-width: 700px) {
  .card {
    width: 70%;
  }
}