body { padding: 0.5rem; }
main { max-width: 800px; margin: 0 auto; }

h2 { font-weight: normal; margin-top: 3rem; }

.card-paintbox { margin: 1em 0; width: max-content; border-radius: 1em; font-size: min(1em, 4vw); border: 2px solid #ccc; overflow: hidden; }
/* .card-paintbox { max-width: 800px; } */
/* .card-paintbox { height: 100%; max-height: min(calc(100vh - 6rem), 800px); width: 100%; max-width: 1200px; } */
.controls { display: flex; justify-content: space-between; align-items: center; background-color: #ccc; padding: 1em 1.5em; }
.colors { display: flex; justify-content: space-between; align-items: center; background-color: #ccc; padding: 1em 1.5em; }
.colors > * { display: flex; justify-content: center; align-items: center; column-gap: 0.5ch; }

#card-redo { transform: scaleX(-1); }
#card-undo { padding: 0 0.1em; background-color: transparent; border: none; font-family: inherit; font-size: 3em; transition: background 0.3s ease-in-out; }
#card-redo { padding: 0 0.1em; background-color: transparent; border: none; font-family: inherit; font-size: 3em; transition: background 0.3s ease-in-out; }
#card-clear { padding: 0 0.5em; background-color: transparent; border: none; font-family: inherit; font-size: 1.5em; transition: background 0.3s ease-in-out; }
button:not(:disabled) { cursor: pointer; }
#card-undo:not(:disabled):hover,
#card-redo:not(:disabled):hover,
#card-clear:hover { background-color: var(--accent-color-light); }

.card-drawing { position: relative; overflow: hidden; touch-action: none; }
#card-svg { position: relative; width: 100%; cursor: crosshair; }
#card-svg { display: block; width: 100%; height: auto; }

.card-drawing { width: calc(100vh - 10em); }
@media screen and (orientation: portrait) and (max-width: 500px) {
   .card-drawing { width: calc(100vw - 2em); }
}

.deleted { opacity: 0; }

.save-card {
   display: block;
   width: max-content;
   padding: 0.4em 0.8em;
   margin: 3rem auto;
   font-size: 1.5rem;
   text-align: center;
   background-color: var(--accent-color);
   border: none;
   color: white;
   text-decoration: none;
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   border-radius: var(--l); 
   transition: 0.5s box-shadow ease-in-out;
   cursor: pointer;
}
.save-card:hover {
   box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.save-card:disabled {
   opacity: 0.5;
}
.save-card.loading {
   cursor: wait;
}

form > * > input { font-family: inherit; font-size: inherit; border: 2px solid #ccc; border-radius: 1em; padding: 0.5em; display: block; margin-bottom: 1em; margin-top: 0.5ch; width: 100%; max-width: 30ch; }
form > * > textarea { font-family: inherit; font-size: inherit; border: 2px solid #ccc; border-radius: 1em; padding: 0.5em; display: block; margin-bottom: 1em; margin-top: 0.5ch; width: 100%; min-height: 10ch; resize: none; }
#svg-data { opacity: 0; pointer-events: none; height: 0; resize: 0; }