* {
    box-sizing: border-box;
}

body {
    position: fixed;
    width: 100%;
}

body::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background: url("../../assets/img/icons/mail-icon.svg") no-repeat right top 8rem;
    background-position: calc(100% + 12rem) 15rem;
    background-size: 25rem;
    opacity: 0.05;
    z-index: -1;
}

main p {
    font-family: var(--font-figtree);
    font-size: 10pt;
    font-weight: 700;
    width: 15rem;
    margin: 0 2rem;
    margin-bottom: 5rem;
}

.message-validation {
    position: fixed;
    bottom: var(--spacing-medium);
    right: var(--spacing-medium);
    visibility: hidden;
    opacity: 0;
    background-color: rgba(76, 175, 80, 0.9);
    border: none;
    padding: var(--spacing-small) 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message-validation.show {
    visibility: visible;
    animation: fadeIn 0.8s ease forwards;
}

.message-validation.hide {
    animation: fadeOut 0.8s ease forwards;
}

.message-validation p {
    margin: 0;
    font-family: var(--font-figtree);
    font-size: 14pt;
    color: white;
    font-weight: 600;
}

.message-error {
    position: fixed;
    bottom: var(--spacing-medium);
    right: var(--spacing-medium);
    visibility: hidden;
    opacity: 0;
    background-color: rgba(175, 76, 76, 0.9);
    border: none;
    padding: var(--spacing-small) 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message-error.show {
    visibility: visible;
    animation: fadeIn 0.8s ease forwards;
}

.message-error.hide {
    animation: fadeOut 0.8s ease forwards;
}

.message-error p {
    margin: 0;
    font-family: var(--font-figtree);
    font-size: 14pt;
    color: white;
    font-weight: 600;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media (min-width: 768px) {

    body::before {
        background-size: 40rem;
        background-position: calc(100% + 12rem) 20rem;
    }

    main p {
        font-size: 14pt;
        width: 22rem;
        margin: 8rem 5rem;
    }
}

@media (min-width: 1024px) {
    body::before {
        width: 120%;
        background-size: 60rem;
        background-position: calc(100% + 12rem) 8rem;
    }

    main p {
        font-size: 16pt;
        width: 25rem;
        margin: 4rem 6rem;
    }

    textarea {
        height: 7rem;
    }
}

@media (min-width: 1440px) {

    body::before {
        background-position: calc(100% + 5rem) 12rem;
    }

    main p {
        margin: 5rem 10rem;
    }
    textarea {
        height: 13rem;
    }
}

@media (orientation: landscape) and (max-width: 960px) {
    main {
        display: flex;
        flex-direction: row;
    }

    main p {
        margin: 0 2rem;
        font-size: 9pt;
        width: 20rem;
    }

    textarea {
        height: 7rem;
    }
}