/*----- CONTACT SECTION -----*/

.form{
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    container-name: form;
    container-type: inline-size;
    animation: aparecer both;
    animation-timeline: view();
    animation-range: cover 20% contain 40%;
}

.form__form{
    padding: 12px;
    max-width: 600px;
    width: 100%;
    
}

.form__input-container :is(input, textarea){
    width: 100%;
    padding: 9px 6px;
    font-size: 16px;
    margin: 4px;
    border: none;
    box-shadow: 2px 2px 4px #0003;
}

.form__input-container input[type="textarea"] {
    resize: none;
    min-height: 120px;
    font-family: inherit;
}

.form__input-container input[type="submit"]{
    padding: 12px;
    background-color: var(--dark-color);
    color: var(--text-color);
}

.form__input-container:first-child{
    grid-area: name;
}

.form__input-container:nth-child(2){
    grid-area: lastname;
}

.form__input-container:nth-child(3){
    grid-area: email;
}

.form__input-container:nth-child(4){
    grid-area: messaje;
}

.form__input-container:last-child{
    grid-area: button;
}

.form label{
    color: var(--text-color);
}

.form__tittle{
    font-size: 3rem;
}