:root{
    --bg: #F6F8FB;           /* page background */
    --surface: #FFFFFF;      /* cards / form bg */
    --text: #0B1220;         /* main text */
    --muted: #6B7280;        /* helper text */
    --accent: #2EA3F2;       /* primary button / highlights */
    --success: #0B7A58;     /* secondary accent */
    --fail: #D32F2F;        /* fail */
}
body{
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 2rem;
}
input{
    border: var(--muted) 2px solid;
}
.heading{
    font-family: 'Inria Serif', serif;
    font-weight: 900;
    text-decoration: underline;
    color: var(--text);
}
/* Preped classes ready for styling */
.flex-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex-container-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main-text{
    font-family: 'PT Serif', serif;
    color: var(--text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 1rem;
}
.btn-primary{
    background-color: var(--accent);
    color: var(--surface);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
}
.hide{
    display: none;
}

#interest-form{
    background-color: var(--surface);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    gap: 1rem;
    width: 300px;
}
#resultCard{
    background-color: var(--surface);
    padding: 2rem;
    border-radius: 0.5rem;
    margin: 1rem 0 0 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    gap: 1rem;
    width: 250px;
}
.muted{
    color: var(--muted);
    font-size: 0.75rem;
}
.success{
    border: 0.4rem solid var(--success);
}
.fail{
    border: 0.4rem solid var(--fail);
}
@media(width <= 500px){
    #interest-form{
        width: 100%;
        padding: 1rem;
    }
    #resultCard{
        width: 75%;
        margin-top: 1rem;
    }
    .main-text{
        font-size: 0.875rem;
    }
    .muted{
        font-size: 0.65rem;
    }
}