@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap');

:root {
    --white: #ffffff;
    --light: #f6f6f9;
    --dark: #001D23;
    --licorice: #130518;
    --oxford-blue: #121f3d;
    --blue: #3066be;
    --light-green: #8fdf82;
    scroll-behavior: smooth;
}

body {
    background: #29326B;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Nunito", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    height: 100vh;
}

/* Scrollbar */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--white);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--licorice);
    border-radius: 20px;
    border: 2px solid var(--white);
}

::selection {
    background: var(--blue);
    color: var(--light);
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.background-sign-in {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;    
}

/* Estilos globales: texto */
p {
    letter-spacing: 0.5px;
}

/* Estilos globales: enlaces */
.link-password {
    font-size: 1rem;
    text-decoration: none;
    color:  var(--licorice);
    transition: color 0.5s ease;
}

.link-password:hover { 
    color: var(--light-green);
    filter: drop-shadow(0 0 3px rgba(143, 223, 130, .3)) !important;
}

/* Estilos globales: copyright */
.copyright {
    font-size: 0.75rem;
}

/* Estilos globales: botón */
button {
    color: var(--white);
    border: 1px solid var(--oxford-blue);
    background-color: var(--oxford-blue);
    font-size: 0.75rem;
    padding: 12px 45px;
    letter-spacing: 1px;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

/* Estilos globales: formulario */
form {
    height: 100%;
}

/* Estilos globales: input */
input {
    font-family: "Nunito", "FontAwesome" !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: var(--licorice);
    border: 1px solid var(--licorice);
    background-color: rgba(251, 251, 252, 0.5);
    width: 100%;
}

input:focus {
    border-color: var(--licorice);
    outline: 0;
    box-shadow: 0 0 0 2px var(--licorice) !important;
}

/* Contenedor del formulario */
.container {
    background-color: rgba(173, 181, 189, 0.6);
    box-shadow: 5px 5px 7px rgba(246, 246, 249, 0.25);
    backdrop-filter: blur(10px);
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 550px;
}

.container-form {
    height: 100%;
    width: 50%;
    overflow: hidden;
}

.overlay {
    background: var(--oxford-blue);
    background: -webkit-linear-gradient(to right, var(--licorice), var(--oxford-blue));
    background: linear-gradient(to right, var(--licorice), var(--oxford-blue));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: var(--white);
    left: -100%;
    height: 100%;
    width: 200%;
}

.panel-overlay {
    text-align: center;
    height: 100%;
    width: 50%;
}

@media (max-width: 768px) {

    .container {
        width: 100%;
        height: auto;
        box-shadow: none;
    }

    .container-form {
        width: 100%;
    }

    .panel-overlay {
        display: none;
    }

    .overlay {
        display: none;
    }

}