/* Click on key run button */
#run {
  transition: all 1s ease-out;
}

#run.contrast {
  background-color: lightcyan;
  font-size: large;
  font-family: monospace;
}

/* Click on key edit button */
dialog[open] {
  animation: myFadeIn 0.4s ease normal;
}

@keyframes myFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

dialog[open]::backdrop {
  background-image: linear-gradient(45deg,
      magenta,
      rebeccapurple,
      dodgerblue,
      green);
  opacity: 0.3;
}

/* invalid input */
article label {
  /* make space for error message */
  margin-bottom: 1rem;
}

input+span {
  visibility: hidden;
  font-weight: bold;
  float: right;
}

input[aria-invalid=true]+span {
  visibility: visible;
  animation: shake 0.3s ease normal;
}

@keyframes shake {
  0% {
    transform: translate(4px, 0);
  }

  50% {
    transform: translate(-3px, 0);
  }

  100% {
    transform: translate(2px, 0);
  }
}

/* large displays */
@media (min-width: 576px) {

  .container {
    max-width: 100%;
  }

  #new-key {
    margin: auto;
  }

  #keys-container {
    display: flex;
    flex-wrap: wrap;
  }

  button {
    max-width: 400px;
  }

  article {
    margin: var(--block-spacing-vertical) auto;
    width: 400px;
  }

  /* top info section */
  details {
    margin: calc(var(--typography-spacing-vertical) * -1.1) auto 1em;
    width: 400px
  }

}

/* css debug */
/* * {
  border: 1px solid red;
} */