:root {
    --color-main: #008eac;
    --color-main-alt: #00b4da;
    --color-main-contrast: white;
    --color-other: #d8d8d8;
    --color-other-alt: #c5c5c5;
    --color-light: white;
    --color-dark: black;
    --container-width: 600px;
}
body {
    margin: 0;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
input, textarea, select, button, a.button {
    padding: 0.4em;
    background-color: var(--color-other);
    border: none;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
fieldset > div {
    padding: 0.2em 0;
}
fieldset > div input:not([type="radio"],[type="checkbox"]), fieldset > div textarea, fieldset > div select {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
button, a.button {
    background-color: var(--color-other);
    cursor: pointer;
    text-decoration: none;
}
button:hover, a.button:hover {
    background-color: var(--color-other-alt);
}
button.primary, a.button.primary {
    background-color: var(--color-main);
    color: var(--color-main-contrast);
}
button.primary:hover, a.button.primary:hover {
    background-color: var(--color-main-alt);
}
button.big, a.button.big {
    font-size: 1.2em;
}
.background-main {
    background-color: var(--color-main);
    color: var(--color-main-contrast);
}
.p {
    padding: 0.5em;
}

#header {
    height: 50px;
    background-color: var(--color-light);
    padding: 0.2em 1.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header img {
    height: 80%
}
.nav-area > * {
    margin: 0 auto;
    max-width: calc(var(--container-width) + 100px);
}

/* Donation step styles */
#donation-steps {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
details.donation-step { 
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-light);
}
details.donation-step summary {
    background-color: var(--color-main);
    padding: 0.5em;
    list-style: none;
    cursor: pointer;
}
details.donation-step summary h2 {
    margin: 0 auto;
    max-width: calc(var(--container-width) + 100px);
    font-size: 1em;
    padding-bottom: 0.4em;
}
details.donation-step summary .chevron-icon {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(1);
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
    float: right;
}
details.donation-step summary .chevron-icon::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 4px solid;
    border-right: 4px solid;
    transform: rotate(-45deg);
    right: 4px;
    top: 6px
}
details.donation-step[open] summary .chevron-icon::after {
    transform: rotate(45deg);
}
details.donation-step summary .donation-step-heading-detail {
    display:none;
    margin: 0 auto;
    max-width: calc(var(--container-width) + 100px);
}
details.donation-step[data-status="done"] summary .donation-step-heading-detail {
    display: block;
}
details.donation-step .donation-step-footer {
    display: none;
    text-align: end;
}
details.donation-step[data-status="done"] .donation-step-footer {
    display: block;
}

details.donation-step .donation-step-detail {
    background-color: var(--color-light);
    color: var(--color-dark);
    margin: 0 auto;
    padding: 0.5em;
    max-width: var(--container-width);
}
details.donation-step[disabled] summary {
    pointer-events: none;
    user-select: none;
    color: var(--color-other);
}
details.donation-step[disabled] .donation-step-detail {
    display: none;
}
details.donation-step[open] {
    flex-grow: 1;
}

/* Desktop styles */
@media (width >= 800px) {
    body {
        display: grid;
        grid-template-columns: [start] auto [middle] 600px [end];
        grid-template-rows: [start] 50px [top] auto [bottom] 8em [end];
    }

    #header {
        grid-column: start / end;
        grid-row: start / top;
    }

    .nav-area {
        grid-column: start / middle;
        grid-row: top / bottom;
        border-right: 2px solid var(--color-light);
    }

    #donation-steps {
        grid-column: middle / end;
        grid-row: top / bottom;
    }

    .footer {
        grid-column: start / end;
        grid-row: bottom / end;
    }
}