html{
    font: var(--f-p);
    background-color: var(--c-gray-100);
}
h1, h2, h3, h4{
    margin-block: 0.5rem;
    hyphens: auto;
}

h1{
    font: var(--f-h1);
}
@media(min-width:48rem){
    h1{
        font: var(--f-h1-responsive);
    }
}

h2{
    font: var(--f-h2);
}
@media(min-width:48rem){
    h2{
        font: var(--f-h2-responsive);
    }
}

h3{
    font: var(--f-h3);
}
@media(min-width:48rem){
    h3{
        font: var(--f-h3-responsive);
    }
}

h4{
    font: var(--f-h4);
}
@media(min-width:48rem){
    h4{
        font: var(--f-h4-responsive);
    }
}

a{
    color: var(--c-primary);
    transition: var(--transition);
}

a:hover{
    color: var(--c-primary-700);
}

/* Containers */
.container{
    padding-inline: var(--padding-inline);
    max-width: var(--max-width);
    margin: 2rem auto;
}

.container p{
    font: var(--f-p);
    margin-bottom: 0.75rem;
}
@media(min-width:48rem){
    .container p{
        font: var(--f-p-responsive);
        margin-bottom: 1rem;
    }
}

/* Forms */

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

form .form-item{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

form .form-item label{
    font: var(--f-small-bold);
}

form .form-item input{
    font: var(--f-p);
    padding: 0.75rem;
    border-radius: 0;
    border: 1px solid var(--c-gray-300);
}

form .description{
    margin-bottom: 0.75rem;
    font: var(--f-small);
    color: var(--c-gray);
}

form .form-actions input.button{
    background-color: var(--c-primary);
    border-radius: 0;
    padding: 0.75rem 1rem;
    border: 0;
    cursor: pointer;
    font: var(--f-p);
    color: white;
    margin-top: 0.5rem;
    transition: var(--transition);
}

form .form-actions input.button:hover{
    background-color: var(--c-primary-700);
}

form .form-item.js-form-type-checkbox{
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.5rem;
}

form p{
    font: var(--f-small);
    margin-bottom: 1rem;
}

strong{
    font-weight: 700;
}

em{
    font-style: italic;
}

li > ul,
li > ol{
    padding-top: 0.5rem;
}

ul > li > p,
ol > li > p{
    margin-bottom: 0;
}

sup {
    font-size: 65%;
    vertical-align: top;
}

.button-proa{
    display: flex;
    background-color: var(--c-primary);
    padding: 1rem 1.25rem;
    color: white;
    text-decoration: none;
    width: fit-content;
}
.button-proa:hover{
    background-color: var(--c-primary-700);
    color: white;
}