@import url("../assets/css/root.css");

body {
    width: 100%;
    height: 100%;
    --color: rgba(0, 115, 19, 0.3);
    background-color: var(--black2);
    background-image: linear-gradient(180deg,
            transparent 24%,
            /* var(--color) 25%,
        var(--color) 26%, */
            transparent 27%,
            transparent 74%,
            /* var(--color) 75%,
        var(--color) 76%, */
            transparent 77%,
            transparent),
        linear-gradient(45deg,
            transparent 24%,
            var(--color) 35%,
            var(--color) 26%,
            transparent 17%,
            transparent 74%,
            var(--color) 75%,
            var(--color) 76%,
            transparent 77%,
            transparent);
    background-size: 55px 55px;
}

.gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}

/* Efecto de placeholder activo */
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgb(205, 110, 56, 0.5)
}

.form-control::placeholder {
    color: var(--black2);
    transition: color 0.3s ease;
}

.form-control:focus::placeholder {
    color: var(--primary);
}
.btn.btn.btn-primary{
    background-color: var(--tertiary);
}
.btn.btn.btn-primary:hover{
    background-color: var(--quaternary);
}