| body { | |
| padding: 2rem; | |
| font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; | |
| } | |
| h1 { | |
| font-size: 16px; | |
| margin-top: 0; | |
| } | |
| p { | |
| color: rgb(107, 114, 128); | |
| font-size: 15px; | |
| margin-bottom: 10px; | |
| margin-top: 5px; | |
| } | |
| .card { | |
| max-width: 620px; | |
| margin: 0 auto; | |
| padding: 16px; | |
| border: 1px solid lightgray; | |
| border-radius: 16px; | |
| } | |
| .card p:last-child { | |
| margin-bottom: 0; | |
| } | |
| #imagePreview { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| #removeImage { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| #removeImage:hover { | |
| transform: scale(1.1); | |
| background-color: #ef4444; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .animate-spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| #imagePreview { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| #removeImage { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| #removeImage:hover { | |
| transform: scale(1.1); | |
| background-color: #ef4444; | |
| } | |