html body { background-color: #212529ff !important; color: #ced4daff !important; font-family: "Special Elite", monospace; font-weight: 400; font-style: normal; }

body { width: 80%; margin-left: 10%; margin-right: 10%; }

a { color: #e9ecefff; text-decoration: none; border-bottom: 2px solid; }

.section__title { font-size: 2em; border-bottom: 0px; }

.intro .hello { font-size: 6em; }

.intro .tagline { font-size: 2em; }

.intro { margin-bottom: 3em; }

.section { margin: 2em; }

.footer .copyright .emoji { width: 20px; height: 20px; }

.resume-link { margin: 2em; }

.section h1.title { border-top: 2px dotted #495057ff; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5em; }

.gallery img { width: 100%; cursor: pointer; border-radius: 4px; transition: transform 0.2s ease; }

.gallery img:hover { transform: scale(1.02); }

.modal { display: none; position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; }

.modal img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }

.modal.active { display: flex; }

.piece-card { margin: 0; display: flex; flex-direction: column; gap: 0.5em; }

.piece-card figcaption { display: flex; flex-direction: column; gap: 0.4em; }

.piece-card .piece-title { border-bottom: 0; font-size: 1.1em; }

.buy-button, .buy-size { font-family: inherit; font-size: 1.1em; min-height: 48px; padding: 0.5em 1em; border-radius: 6px; border: 2px solid #f8f9faff; background: #f8f9faff; color: #212529ff; cursor: pointer; }

.buy-button:hover, .buy-size:hover, .buy-button:focus-visible, .buy-size:focus-visible { background: #dee2e6ff; outline: 3px solid #adb5bdff; outline-offset: 2px; }

.buy-size:disabled { opacity: 0.6; cursor: wait; }

.buy-size.is-loading { opacity: 1; outline: 3px solid #adb5bdff; }

.buy-from { opacity: 0.75; }

.buy-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); gap: 0.6em; }

.buy-size-label { white-space: nowrap; }

.buy-size { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em; padding: 0.4em 0.3em; white-space: nowrap; }

.buy-size-price { font-weight: bold; }

.buy-shipping { font-size: 1.15em; font-weight: bold; color: #e9ecefff; margin: 0.6em 0 0; }

.buy-status { min-height: 1.5em; font-size: 1.1em; }

.buy-note, .buy-what { font-size: 0.9em; color: #adb5bdff; }

.buy-type { margin-bottom: 0.8em; }

.buy-type .buy-what { margin: 0.3em 0; font-size: 1em; color: #e9ecefff; }

.buy-dialog { max-width: 48em; max-height: 92vh; overflow-y: auto; width: 90%; background: #212529ff; color: #ced4daff; border: 2px solid #495057ff; border-radius: 10px; padding: 1.5em; }

.buy-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }

.buy-dialog h2 { margin-top: 0; }

.buy-dialog-piece { font-size: 1.3em; color: #e9ecefff; }

.buy-close { float: right; font-size: 2em; line-height: 1; min-width: 48px; min-height: 48px; background: none; color: #e9ecefff; border: 0; cursor: pointer; }

.piece .piece-images img { max-width: 100%; max-height: 80vh; cursor: zoom-in; border-radius: 4px; margin: 0 1em 1em 0; }

.buy-box { margin: 1.5em 0; max-width: 50em; }

.back-link a { border-bottom: 0; }