:root {
    --branding-color: #3f51b5;
    --off-white-color: #f5f5f5;
    --off-black-color: #333333;
    --negative-color: #d72723;
    --neutral-color: #956600;
    --positive-color: #447d00;
    --border-radius: 0.3125rem;
}

/* Reset CSS */
body,
h1,
p,
input[type="radio"],
ul {
    margin: 0;
}

/* General Styling */
body {
    max-width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    row-gap: 1.25rem;
    margin: 1.25rem auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--off-black-color);
    background-color: var(--off-white-color);
}

h1 {
    font-size: 2rem;
}

input[type="submit"] {
    float: left;
    border: 0;
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    color: var(--off-white-color);
    background-color: var(--branding-color);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
}

#introduction {
    padding: 1.25rem;
    background-color: var(--branding-color);
    border-radius: var(--border-radius);
    color: var(--off-white-color);
}

#introduction h1 {
        text-align: center;
        margin-bottom: 0.625rem;
    }

#introduction p {
        text-align: justify;
    }

.category {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border: 0.125rem solid var(--branding-color);
}

.category h1 {
        margin-bottom: 1.25rem;
        color: var(--branding-color);
    }

.question p {
        font-weight: bold;
        margin-bottom: 0.625rem;
    }

.question .radio-option:last-of-type {
        margin-right: 1.25rem;
    }

.question:not(:last-child) {
        margin-bottom: 1.25rem;
    }

.radio-option {
    display: inline-flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    row-gap: 0.3125rem;
    margin-left: 1.25rem;
}

.recommendation {
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.recommendation h1 {
        margin-bottom: 1.25rem;
    }

.recommendation p {
        margin-bottom: 0.625rem;
    }

.negative-recommendation {
    border: 0.125rem solid var(--negative-color);
}

.negative-recommendation h1 {
        color: var(--negative-color);
    }

.neutral-recommendation {
    border: 0.125rem solid var(--neutral-color);
}

.neutral-recommendation h1 {
        color: var(--neutral-color);
    }

.positive-recommendation {
    border: 0.125rem solid var(--positive-color);
}

.positive-recommendation h1 {
        color: var(--positive-color);
    }

/* Utility Classes */
.hidden {
    display: none;
}

/* Mobile Styling */
@media screen and (max-width: 48rem) {
    body {
        max-width: 100%;
        margin: 1.25rem;
    }
}