main {
    display: flex;
    justify-content: center;
}

form {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

input, textarea {
    outline: none;
}

.inputs {
    color: whitesmoke;
    font-size: var(--FS);
}

#name,
#email,
textarea {
    width: 60vw;
    min-width: 380px;
    background-color: transparent;
    padding: 0.75rem;
}

textarea {
    font-family: var(--FF);
    height: 40vh;
    min-height: 10rem;
}

button.inputs {
    background-color: #f49c3781;
    width: max-content;
    padding: 0.75rem 3rem;
}

/* || Behevior of elements when interacted with || */
#name:focus, textarea:focus {
    border-color: var(--DEV-SECCOLOR);
}
#email:focus {
    border-color: var(--MUS-SECCOLOR);
}
button.inputs:hover, button.inputs:active {
    cursor: pointer;
}
button.inputs:hover {
    background-color: #f49c37a8;
}
button.inputs:active {
    background-color: #f49c3781;
}