@import "parametros.css";

body {
    background-image: url("../images/bg/inicio.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-light);
    font-family: var(--font-family-text), sans-serif;
    min-height: 100vh;
    margin: 0;
}

body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
            radial-gradient(circle at top right, rgba(255,94,154,.18) 0%, transparent 35%),
            linear-gradient(90deg, rgba(2,6,29,.86) 0%, rgba(5,11,46,.78) 50%, rgba(2,6,29,.92) 100%);
}

body > *{
    position: relative;
    z-index: 1;
}

.title {
    font-size: 34px;
    line-height: 1.25;
    font-family: var(--font-family-title), sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-light);
}

.login {
    background: rgba(5,11,46,.72);
    color: var(--color-light);
    padding: 32px 40px;
    border-radius: 22px;
    border: 1px solid rgba(33,207,255,.28);
    box-shadow:
            0 0 25px rgba(33,207,255,.12),
            0 0 35px rgba(255,94,154,.08);
    backdrop-filter: blur(8px);
}

.login label,
.login .form-check-label{
    color: var(--color-light);
    font-weight: 400;
}

.form-control{
    font-family: var(--font-family-text), sans-serif;
    color: var(--color-1);
    border-radius: 8px;
    border: 1px solid rgba(33,207,255,.35);
    height: 42px;
}

.form-control:focus{
    border-color: var(--color-4);
    box-shadow: 0 0 0 .2rem rgba(33,207,255,.20);
}

.btn-info{
    background-color: var(--color-4);
    border-color: var(--color-4);
    color: var(--color-1);
    font-weight: 700;
}

.btn-info:hover{
    background-color: var(--color-5);
    border-color: var(--color-5);
    color: var(--color-light);
}

a.light {
    color: var(--color-light);
    font-weight: 600;
}

a.light:hover {
    color: var(--color-5);
    text-decoration: none;
}