body {
            font-family: Arial, sans-serif;
            background-color: #656565;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
     }

.login-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 18px rgba(0, 0, 0, 0.8);
            width: 300px;
            text-align: center;
	    position: relative;

       }

.logo {
            animation: translateZ 2s infinite linear;
            transform-origin: center center;
            display: inline-block;
            font-size: 2em;
       }
.footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	text-align: center;

}

/*ANIMACION ZOOM LOGO*/

.zoom-in {

  animation: zoom-in 2s ease-out;
}

@keyframes zoom-in {
  0% {
    transform: scale(0.5, 0.5);
  }
  50% {
    transform: scale(1.35, 1.35);
  }
  100% {
    transform: scale(1, 1);
  }
}

         .login-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
        }

        .form-group input {
            width: 60%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .form-group button[type="submit"] {
	    width: 60%;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
		
        }

/*ANIMACION BACKGROUND FORMAS CON MOVIMIENTO ALEATORIO*/

div.a {
width: 300px;
height:300px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
    
}

div.b {
width: 80px;
height:80px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
    
}
div.c {
width: 50px;
height:50px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}
div.d {
width: 150px;
height:150px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.e {
width: 150px;
height:150px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.f {
width: 95px;
height:95px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.g {
width: 10px;
height:10px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.h {
width: 15px;
height:15px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.i {
width: 20px;
height:20px;
background-color:#FFB218;
position:fixed;
border-radius: 50%;  
z-index: -100;  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

div.j {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100; 
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) 
}

div.k {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}

div.l {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100; 
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) 
}
div.m {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.n {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.o {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.p {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.q {
width: 80px;
height:80px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.r {
width: 80px;
height:80px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.s {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.t {
width: 150px;
height:150px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.u {
width: 10px;
height:10px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.v {
width: 80px;
height:80px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.w {
width: 30px;
height:30px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.x {
width: 20px;
height:20px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.y {
width: 20px;
height:20px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}
div.z{
width: 300px;
height: 300px;
 background-color:#FFB218;
position:fixed;
 border-radius: 50%;  
z-index: -100;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)  
}