body {
   --color-border: lightgray;
   --color-banner-background: white;
   --color-text: #333;
   --spacing: 20px;
   --padding: var(--spacing);
   --padding-extra: 25px;
   --paragraph-spacing: 10px;
   --font-size-normal: 11pt;
   --font-size-small: 8pt;

   color: var(--color-text);
   margin: 0;
   padding: 0;
   background-color: #f6f4ef;
   font-family: sans-serif;
}

img.queen {
   width: 16px;
   aspect-ratio: 1;
}

img.clock {
   width: 15px;
   margin-right: calc(var(--spacing) / 3);
}

.banner {
   position: relative;
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--color-banner-background);
}

#main-content-banner {
   min-height: 100vh;
   padding: var(--padding);
   gap: var(--spacing);
}

.not-rendered { display: none; }
.hidden { opacity: 0; }

.time-container {
   text-align: center;
   font-size: large;
   font-weight: 600;
   user-select: none;
}

#canvas {
   width: 100%;
   aspect-ratio: 1;
   touch-action: none;
   -webkit-user-select: none;
   user-select: none;
}

.controls {
   display: flex;
   gap: var(--spacing);
}

.controls button {
   color: var(--color-text);
   flex: 1;
   font-size: 12pt;
   font-weight: bold;
   background-color: inherit;
   border: 1px solid #444;
   border-radius: 25px;
   outline: none;
   padding: 8px;
   cursor: pointer;
   margin: 1px;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
}

.controls button:not(.disabled):hover {
   border-width: 2px;
   background-color: rgba(0, 0, 0, 0.03);
   margin: 0;
}

.controls button:active {
   background-color: rgba(0, 0, 0, 0.09);
}

.controls button.disabled {
   background-color: lightgray;
   color: gray;
   border: none;
   cursor: not-allowed;
}

.text-block {
   display: flex;
   flex-direction: column;
   gap: var(--paragraph-spacing);
   font-size: var(--font-size-normal);
   padding: var(--padding-extra) var(--padding);
   border: 1px solid var(--color-border);
   border-radius: 2px;
   line-height: 1.4em;
}

.text-block ol {
   display: flex;
   flex-direction: column;
   padding-left: inherit;
   margin: 0;
   gap: var(--paragraph-spacing);
}

.instructions { margin-bottom: 0;}

.examples-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--spacing);
}

.examples-grid .card p { margin: 0; }

.animate { animation: pulse 1s; }

@media (min-width: 450px) {
   .banner {
      width: 450px;
      margin: auto;
   }
}

@keyframes pulse {
0% {
   transform:
      translate(var(--center-x), var(--center-y))
      scale(1)

      translate(
      calc(-1 * var(--center-x)),
      calc(-1 * var(--center-y))
      );
}
50% {
   transform:
      translate(var(--center-x), var(--center-y))
      scale(1.4)

      translate(
      calc(-1 * var(--center-x)),
      calc(-1 * var(--center-y))
      );
}
100% {
   transform:
      translate(var(--center-x), var(--center-y))
      scale(1)

      translate(
      calc(-1 * var(--center-x)),
      calc(-1 * var(--center-y))
      );
}
}