@import url('page.css');

@keyframes push-animation {
  0% { transform: scale(1.0); box-shadow: 2px -2px #ccc; }
  20% { transform: scale(0.90); box-shadow: none; }
  100% { transform: scale(1.0); box-shadow: 2px -2px #ccc; }
}

h2 {
  padding: 1em 0;
}

p.instructions {
  font-style: italic;
  text-align: center;
}

div.copyable {

  span {
    display: inline-block;
    border: 1px dotted grey;
    border-radius: 2px;
    padding: 4px 4px 3px 3px;
    margin: 6px;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px -2px #ccc;
    font-family: "Courier Prime", monospace;

    &:hover {
      background: #ddf;
    }

    &.is-animating {
      animation: push-animation 0.3s ease-out;
    }
  }
}

.short {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.long {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}