/* Big title of the page */
.contactMsg h2 {
    margin: 1dvh 0;
}

/* Little message to explain the purpose of the page */
.contactMsg p {
    margin: 0 0 1dvh 0;
}

.formDiv {
    display: flex;
    justify-content: center;
}

form {
    width: 50dvw;
}

.formLabelInput {
    display: flex;
    flex-direction: column;
}

.formLabelInput label,
.formLabelInput input,
.formLabelInput textarea {
    margin-bottom: 1dvw;
}
.formLabelInput input[type="text"],
.formLabelInput textarea {
    border: 2px solid chartreuse;
    background-color: var(--darkPink);
    padding: 0.8rem;
    font-family: comic-sans;
}

.formLabelInput input[type="text"]:focus,
.formLabelInput textarea:focus {
    border: 2px solid rgb(63, 126, 0);
}

input[type="submit"] {
    background-color: chartreuse;
    border: none;
    padding: 0.5rem 1rem;
    font-family: comic-sans;
}

.messages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1dvw;
}

.message {
    border: 2px solid chartreuse;
    padding: 0 0.5rem;
}

.topMessage {
    display: flex;
    gap: 1dvw;
}

.messageContent {
    margin-left: 1dvw;
}

@media screen and (max-width: 400px) {
    .messages {
        grid-template-columns: 1fr;
        gap: 4dvw;
    }
}