@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');

body, html {
    height: 100%;
    background-repeat: no-repeat; /*background-image: linear-gradient(rgb(12, 97, 33),rgb(104, 145, 162));*/
    background: black;
    position: relative;
}

#login-box {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    margin: 0 auto;
    border: 1px solid black;
    background: rgba(48, 46, 45, 1);
    min-height: 250px;
    padding: 20px;
    z-index: 9999;
}

    #login-box .logo .logo-caption {
        font-family: 'Poiret One', cursive;
        color: white;
        text-align: center;
        margin-bottom: 0px;
    }

    #login-box .logo .tweak {
        color: #ff5252;
    }

    #login-box .controls {
        padding-top: 30px;
    }

        #login-box .controls input {
            border-radius: 0px;
            background: rgb(98, 96, 96);
            border: 0px;
            color: white;
            font-family: 'Nunito', sans-serif;
        }

            #login-box .controls input:focus {
                box-shadow: none;
            }

            #login-box .controls input:first-child {
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            }

            #login-box .controls input:last-child {
                border-bottom-left-radius: 2px;
                border-bottom-right-radius: 2px;
            }

    #login-box button.btn-custom {
        border-radius: 2px;
        margin-top: 8px;
        background: #ff5252;
        border-color: rgba(48, 46, 45, 1);
        color: white;
        font-family: 'Nunito', sans-serif;
    }

        #login-box button.btn-custom:hover {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            transition: all 500ms ease;
            background: rgba(48, 46, 45, 1);
            border-color: #ff5252;
        }

#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed;
    top: 0px;
    z-index: 1;
}
#login-box button.btn-custom {
    background-color: white; /* Cambia el fondo a blanco */
    color: black; /* Cambia el texto a negro */
    border-color: black; /* Opcional: Añade un borde negro si es necesario */
}

    #login-box button.btn-custom:hover {
        background-color: #f8f8f8; /* Color de fondo más claro al pasar el mouse */
        color: black; /* Mantener el texto negro */
        border-color: #d6d6d6; /* Color de borde más claro al pasar el mouse */
    }