body {
    margin: 0;
    text-align: center;
    user-select: none;
    background: linear-gradient(90deg, orange, purple);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a,
footer,
.showcase h2,
button,
.spinner,
#donateAmount,
#currencyType,
#header {
    border: none;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

footer {
    background: linear-gradient(90deg, purple, orange);
    padding: 5px;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    font-family: monospace;
}

footer a { cursor: not-allowed; }

#left-decoration,
#right-decoration {
    /* No need to set the width, since the script will do it */
    position: fixed;
    height: 100%;
    z-index: -1;
}
#left-decoration { left: 0; }
#right-decoration { right: 0; }

#header {
    font-size: 24px;
    padding: 12px;
}

#branding,
.header-container nav ul,
.showcase {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

#branding,
#branding img {
    color: lightyellow;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    height: 128px;
    width: fit-content;
    margin: 20px auto;
    border-radius: 32px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.4s;
}
#branding { padding: 20px; }

#branding:hover,
#branding img:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.header-container nav ul li {
    display: inline;
    background: purple;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.4s, text-shadow 0.2s;
}

.header-container nav ul li:hover {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}
.header-container nav ul li#active { background: darkslateblue; }

.showcase {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px;
    padding: 0 20px 200px 20px;
    text-align: left;
}

.showcase h2 {
    font-size: 36px;
    width: fit-content;
    margin: 0 40% 20px 40%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: all 0.3s;
}

.showcase h2:hover {
    transform: scale(1.1);
    text-shadow: 4px 4px 8px #000;
}

.showcase div {
    position: relative;
    background: linear-gradient(140deg, #ffe6c8 0 40%, #e6f0ff 40% 100%);
    margin-bottom: 20px;
    padding: 20px;
    width: 300px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.showcase div:before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: -12px;
    left: -12px;
    transform: rotate(75deg);
    background: linear-gradient(75deg, rgba(200,120,200,0.7), rgba(150,90,150,0.9));
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    z-index: -1;
}
.showcase div:nth-child(2n) { transform: rotate(-2deg); }
.showcase div:nth-child(2n+1) { transform: rotate(2deg); }

.showcase div:hover,
.showcase div:focus-within {
    transform: translateY(-20px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}

.showcase div h2,
#currencyType {
    font-size: 24px;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
}

.showcase div h2 {
    margin: 0 auto 10px 0;
    text-shadow: 1px 1px 0 #fff;
    background: linear-gradient(90deg, #ffb347, #fc3);
}
.showcase div h2:hover { text-shadow: 2px 2px 4px #fff; }

.showcase div img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.reveal {
    transform: translateY(64px) scale(0);
    transition: transform 0.5s;
    will-change: transform;
}
.reveal.visible { transform: translateY(0) scale(1); }

form {
    width: 30vw;
    min-width: 500px;
    align-self: center;
    background: #fff;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 200px;
    border-radius: 10px;
    padding: 20px;
}

.hidden { display: none; }

#payment-message {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}

#payment-element { margin-bottom: 24px; }

button {
    background: #05d;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
}
button:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
button:disabled {
    transform: scale(0.98);
    opacity: 0.5;
    cursor: default;
}

.spinner,
.spinner:before,
.spinner:after {
    border-radius: 50%;
    height: 20px;
}
.spinner {
    font-size: 22px;
    margin: 0 auto;
    position: relative;
    width: 20px;
    box-shadow: inset 0 0 0 2px;
    transform: translateZ(0);
}
.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
    width: 10px;
    background: #05d;
    top: 0;
    left: 0;
    border-radius: 20px 0 0 20px;
    transform-origin: 10px 10px;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    height: 10px;
    border-radius: 0 10px 10px 0;
    left: 10px;
    transform-origin: 0 10px;
    animation: loading 2s infinite ease;
}

table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}

td { padding-bottom: 10px; }

table tbody tr:first-child td,
table tbody tr:last-child td {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.TableContent {
    text-align: right;
    color: #6d6e78;
}

.TableLabel {
    font-weight: 600;
    color: #334;
}

#view-details { color: #05d; }

#retry-button {
    background: #05d;
    border-radius: 4px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
}

#donateAmount,
#currencyType {
    color: #000;
    background: transparent;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 10px;
    font-size: 64px;
}

input[type=number] { -moz-appearance: textfield; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInAnimation {
    to { opacity: 1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.visible {
        transition: none !important;
        transform: none !important;
        will-change: none !important;
    }

    * { transition: none !important }
}

@media (max-width: 600px) {
    .showcase,
    #branding {
        flex-direction: column;
        align-items: center;
    }

    form,
    #payment-status {
        width: 80vw;
        min-width: initial;
    }
}