.contact-container {
    /* border: 2px solid powderblue; */
    margin:0em 1em;
}
.contact-heading{
    margin-bottom: 0.5em;
}

.contact-form-wrapper{
    /* border: 1px solid purple; */
    position: relative;
}

.loader{
    position:absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.5);
    display:flex;
    align-items: center;
    justify-content: center;
    /* border: 3px solid green; */
    
}

.loader::after{
    content: '';
    width: 3em;
    height: 3em;
    border: 5px solid rgba(0, 0, 0, 0);
    border-top: 5px solid pink;
    border-right: 5px solid pink; ;
    border-radius: 50%;

    animation-name: spinning;
    animation-duration: 0.75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}


@keyframes spinning {
    from {transform:rotate(0deg)}
    to {transform: rotate(360deg)}
}

.hide-loader{
    display: none;
}

.confirmation{
    position:absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.5);
    display:flex;
    align-items: center;
    justify-content: center;
    /* visibility: visible; */
    transition: opacity 1s, visibility 1s;

    /* border: 3px solid green; */
    
}

.confirmation::after{
    content: "✅ Mail Sent!";
    /* border: 5px solid rgba(0, 0, 0, 1); */
   
}
.hide-confirmation{
    opacity: 0;
    visibility: hidden;
}


#contact-form{
    display:flex;
    flex-direction: column;
    /* border: 2px solid greenyellow; */
}
.contact-form-name-wrapper{
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

input, textarea{
    padding:1em;
    border: 1px solid hsl(341, 86%, 57%);;
    border-radius: 0.2em;
    background-color: hsl(180, 2%, 19%);
    color:white;
    font-size: 1.0rem;
    font-family: 'Quicksand', sans-serif;
    box-sizing: border-box;
    resize: none;
}
input:focus, textarea:focus{
    outline:none;
}

#contact-first-name, #contact-last-name {
    width:50%
}

#contact-email, #contact-phone{
    margin-top: 0.5em;
}

#contact-message{
    margin-top: 1em;
    
}

.contact-pink-button{
    cursor: pointer;
    border:2px solid hsl(341, 66%, 42%);; 
    border-radius: 0.3em;
    padding:1em 2em;
    background-color: hsl(341, 86%, 57%);
    color:white;
    font-weight: 500;
    font-size: 0.8em;
    margin-top: 1em;
}

.input-correct{
    border:1px solid hsl(138, 100%, 69%);
    background-color: rgba(0, 0, 0,0);
}

.input-incorrect{
    border: 1px solid rgb(255, 101, 101);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px hsl(180, 2%, 19%) inset;
    -webkit-text-fill-color: white 
}

.contact-para{
    margin-top: 1em;
    font-size: small;
}
.contact-para-text{
    font-size:0.7em;
}