html, body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--side-spacing);
}

main {
    max-width: var(--max-page-width);
    background-color: var(--color-primary-beige);
    display: flex;
    flex-flow: column nowrap;
    gap: 64px;
    padding: var(--side-spacing);
    width: 100%;
}

section {
    display: flex;
    gap: 64px;
}

section:first-of-type {
    justify-content: space-between;
}

section:first-of-type h1 span {
    align-items: center;
    justify-content: center;
}

span {
    display: flex;
    gap: 4px;
    flex-flow: column;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
}

section div {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
}

h1, h3, p {
    margin: 0;
    display: flex;
    gap: 16px;
    align-items: center;
}

#details {
    flex-flow: row nowrap;
    gap: 40px;
}

.alert-error p {
    color: var(--color-primary-blue);
}

h3 {
    gap: 0;
}

#white-text>span {
    color: white;
}

#white-text:hover>span {
    color: var(--color-primary-blue);
}


/* Start mobile specific rules */
@media only screen and (max-width:850px) {
    html, body {
        padding: 0;
    }

    main {
        min-height: 100%;
        width: 100%;
        padding: calc(2 * var(--side-spacing));
        gap: 24px;
    }

    section {
        flex-flow: column;
        gap: 32px;
    }
    
    section:last-of-type {
        border-top: 1px solid var(--color-gray-1);
        padding-top: 24px;
        padding-bottom: 0;
    }
    
    #details {
        justify-content: space-evenly;
        align-items: flex-end;
        border: solid var(--color-gray-1);
        border-width: 1px 0;
        padding: 24px 0;
    }

    h1, h3, p {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}