.CFM-container {
    width: fit-content;
    margin: auto;

    background: linear-gradient(var(--deg), var(--accented), #0c183a);
    border: 1px solid rgba(255, 255, 255, 0.13);
    padding: 20px;
    border-radius: 8px;

    animation: rotate-gradient 15s linear infinite;
}

@property --deg {
    syntax: '<angle>';   /* le type */
    inherits: false;
    /* initial-value: 20deg; */
    initial-value: 0deg;
}

@keyframes rotate-gradient {
    to { --deg: 360deg; }
}

/* .CFM-container:hover {
    --deg: 190deg;
    position: relative;
} */

.CFM {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.CFM .CFM-inputs {
    display: flex;
    flex-direction: column;
}
.CFM .CFM-inputs input,
.CFM .CFM-inputs textarea {
    font-size: 1rem;
    background-color: #f0f8ff00;
    color: var(--content-default);
/*     border-style: solid;
    border-width: 1px;
    border-color: #ffffff; */
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    padding: 10px;
    max-width: 100%;

    transition: 0.3s ease;
}

.CFM .CFM-inputs input::placeholder,
.CFM .CFM-inputs textarea::placeholder {
    color: #83a2cb;
}

.CFM .CFM-inputs input:hover,
.CFM .CFM-inputs textarea:hover,
.CFM .CFM-inputs input:focus,
.CFM .CFM-inputs textarea:focus {
    transform: scale(1.015);
    --shadow: rgba(6, 20, 35, 0.32);
    box-shadow: 2px 2px 34px 0px var(--shadow);
    outline: none;
}

.CFM .CFM-inputs label {
    color: var(--content-default);
    z-index: 10;
}

.CFM .g-recaptcha {
    margin: auto;
}

#cfm-feedback .success,
#cfm-feedback .error {
    color: var(--accented);
}

@media (min-width: 800px) {
    .CFM {
        width: 500px;
    }
}