html,body {
  
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: rgb(70, 70, 70); */
}

body {
    margin: 0;
    padding: 0;

    background-image: url(https://img.freepik.com/foto-gratis/belleza-otonal-abstracta-patron-venas-hoja-multicolor-generado-ia_188544-9871.jpg?semt=ais_hybrid&w=1000);
    /* background-image: url(); */
    /* background-image: url(); */

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;


    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height:100vh;
}

h4 {
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #e7e7e7;

    margin-top: 60px;
}


.div2 {
    padding: 5px;
    margin: 5px;
}

label {

    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #a4a4a4;
}
input {
    padding: 10px 8px;

    font-size: 16px;
    color: #c7c7c7;
    background: #323131;
    
    border: none;
    border-radius: 4px;

    width: max-content;
    height: max-content;
}
input:hover {
    background: #404040;
}
input:focus {
    box-shadow: 0px 0px 0px 1px #0087ff;
}

/* -------------------- */

.btn {
    border: none; 
    color: white; 
    padding: 14px 28px; 
    cursor: pointer; 
    border-radius: 5px; 
    /* display: inline-flex; */
  }
.btn i {
    margin-right: 5px;
}
.success {background-color: #008307;} 
.success:hover {background-color: #46a049;}

a {
  text-decoration: none;
  color: #fff;

  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
}

/* -------------------- */



/* -------------------- */
   form {
    color: #fff;
    /* background-color: #080808; */
    padding: 0.9em calc(0.7em * 1.2);
    margin: 5px;
    display: inline-block;
    border: 3px solid transparent;
    position: relative;
    font-size: 1.5em;
    cursor: pointer;
    letter-spacing: 0.07em;

    /* background-color: rgba(95, 93, 93, 0.8); Fondo blanco con opacidad */
    border-radius: 10px;
    backdrop-filter: blur(10px); /* Aplicar el desenfoque */
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); Efecto de sombra (opcional) */
  
  }

  form .text {
    font-family: proxima-nova, monospace;
    transform: translate3d(0, 0.7em, 0);
    display: block;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
  }
  
  form:after {
    position: absolute;
    content: "";
    bottom: -3px;
    left: calc(0.7em * 1.2);
    right: calc(0.7em * 1.2);
    height: 3px;
    background: #f26522;
    transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
    transform-origin: left;
  }
  
  .line {
    position: absolute;
    background: #f26522;
  }
  
  .line.-right, .line.-left {
    width: 3px;
    bottom: -3px;
    top: -3px;
    transform: scale3d(1, 0, 1);
  }
  
  .line.-top, .line.-bottom {
    height: 3px;
    left: -3px;
    right: -3px;
    transform: scale3d(0, 1, 1);
  }
  
  .line.-right {
    right: -3px;
    transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
    transform-origin: top;
  }
  
  .line.-top {
    top: -3px;
    transition: transform 0.08s linear 0.43s;
    transform-origin: left;
  }
  
  .line.-left {
    left: -3px;
    transition: transform 0.08s linear 0.51s;
    transform-origin: bottom;
  }
  
  .line.-bottom {
    bottom: -3px;
    transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
    transform-origin: right;
  }
  
  form:hover .text,
  form:active .text {
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
  }
  
  form:hover:after,
  form:active:after {
    transform: scale3d(0, 1, 1);
    right: -3px;
    left: -3px;
    transform-origin: right;
    transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
  }
  
  form:hover .line,
  form:active .line {
    transform: scale3d(1, 1, 1);
  }
  
  form:hover .line.-right,
  form:active .line.-right {
    transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
    transform-origin: bottom;
  }
  
  form:hover .line.-top,
  form:active .line.-top {
    transition: transform 0.08s linear 0.4s;
    transform-origin: right;
  }
  
  form:hover .line.-left,
  form:active .line.-left {
    transition: transform 0.08s linear 0.48s;
    transform-origin: top;
  }
  
  form:hover .line.-bottom,
  form:active .line.-bottom {
    transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
    transform-origin: left;
  }