:root{
    /*some colors*/
    --primary-bg: #F6F9FC;
    --section-div: #f5efe3;
    --primary-text: #1F2A37;
    --secondary-text: #6B7C93;
    --placeholder: #9AA9BC;

    --primary-accent:#5B8DEF;
    --secondary-accent:#6FC3B2;

    --focus-ring:rgba(91, 141, 239, 0.25);
    --success: #5FB3A2;
    --error: #D97779;

    --form-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}


body{
    background: linear-gradient(-135deg, var(--bg-beige), #fff);
    height: 100dvh;
}


.content{
    padding: var(--space-3) (--space-5);
    
}

.form-container{
    padding: var(--space-4);
    background-color: #E8DABDAA;
    backdrop-filter: blur(10px);
    width:100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
    border-radius: 20px;
    border: 4px solid rgba(255, 255, 255, 0.336);
}


form{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-3);
    width: 100%;
    max-width: 600px;
}

form hr {
    appearance: none;
    border: none;
    background-color: var(--section-div);
    width: 100%;
    height: 2px;
}

form p{
    width: 100%;
    display: flex;
    justify-content: center;
}

form p label, form p input,  form p textarea{
    display:block;
    width: 100%;
}



form p input,  form p textarea, #topic{
    background-color: #fff;
    border: 1px solid #D8E1EA;
    border-radius: 5px;
    padding: var(--space-1) var(--space-2);


}

form p textarea{
    min-height: 60px;
}

form p input:focus-visible,  form p textarea:focus-visible{
    border: 1px solid var(--primary-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);

}


.contacts-container{
    margin-top: 25px;
    width: 80%;
    justify-content: center;
    display: flex;
}

.form-button{
    background-color: #dcc79d;
    margin-top: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: 15px;
}

.contact-bottom{
    font-size: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 40ch;
    gap:5px;
    font-family: "Inter", sans-serif;
    color: #7e7a72cc;
    transition: color 300ms ease;
    font-weight: 600;
}

.contact-bottom.email{
    display: flex;
    justify-content: center; /*flex-start*/
    width: 25ch;
}

.contact-bottom:hover{
    color: var(--primary-text);
}


@media (max-width: 768px) {
    .content{
        padding: 0;
    }

    .form-container{
        padding: var(--space-2) var(--space-1);
    }
}