html {
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
body {
    min-height: 100%;
    position: relative;
    padding-bottom: 3rem;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    background: linear-gradient(170deg, rgba(49, 57, 73, 0.8) 20%, rgba(49, 57, 73, 0.5) 20%, rgba(49, 57, 73, 0.5) 35%, rgba(41, 48, 61, 0.6) 35%, rgba(41, 48, 61, 0.8) 45%, rgba(31, 36, 46, 0.5) 45%, rgba(31, 36, 46, 0.8) 75%, rgba(49, 57, 73, 0.5) 75%), linear-gradient(45deg, rgba(20, 24, 31, 0.8) 0%, rgba(41, 48, 61, 0.8) 50%, rgba(82, 95, 122, 0.8) 50%, rgba(133, 146, 173, 0.8) 100%) #313949;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
.ti{
    color: #997b5e;
    font-family: cursive;
}

#uno {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 20%;
    left: 55%;
    border-radius: 0px 10px 0px 10px;
}
#uno:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
#dos{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 20%;
    left: 65%;
    border-radius: 0px 10px 0px 10px;
}
#dos:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
#tres{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 20%;
    left: 75%;
    border-radius: 0px 10px 0px 10px;
}
#tres:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#cuatro{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 30%;
    left: 55%;
    border-radius: 0px 10px 0px 10px;
}
#cuatro:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#cinco{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    
    top: 30%;
    left: 65%;
    border-radius: 0px 10px 0px 10px;
}
#cinco:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#seis{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
   
    top: 30%;
    left: 75%;
    border-radius: 0px 10px 0px 10px;
}
#seis:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#siete{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 40%;
    left: 55%;
    border-radius: 0px 10px 0px 10px;
}
#siete:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#ocho{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 10%;
    height: 10%;
    top: 40%;
    left: 65%;
    border-radius: 0px 10px 0px 10px;
}
#ocho:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#nueve{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    width: 10%;
    height: 10%;
    font-size: x-large;
    font-weight: bold;
    top: 40%;
    left: 75%;
    border-radius: 0px 10px 0px 10px;
}
#nueve:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#cero{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-size: x-large;
    font-weight: bold;
    position: absolute;
    width: 10%;
    height: 10%;
    top: 50%;
    left: 75%;
    border-radius: 0px 10px 0px 10px;
}
#cero:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
#retur{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
    width: 20%;
    height: 10%;
    top: 50%;
    left: 55%;
    border-radius: 0px 10px 0px 10px;
}
#retur:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

.enter{
    background: linear-gradient(-30deg, #0b1b3d 50%, #08142b 50%);
    padding: 20px 40px;
    margin: 12px;
    display: inline-block;
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    overflow: hidden;
    color: #d4e0f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 25%;
            left: 23%;
            border-radius: 10PX 0PX 10PX 0PX;
            width: 15%;
  }
  .enter::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #8592ad;
    opacity: 0;
    -webkit-transition: .2s opacity ease-in-out;
    transition: .2s opacity ease-in-out;
  }
  .enter:hover::before {
    opacity: 0.2;
  }
  .enter span {
    position: absolute;
  }

  .enter span:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
  }
  @-webkit-keyframes animateTop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }
  @keyframes animateTop {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  }

  .enter span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
            animation: 2s animateRight linear -1s infinite;
  }
  
  @-webkit-keyframes animateRight {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }
  
  @keyframes animateRight {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  }

  .enter span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateBottom linear infinite;
            animation: 2s animateBottom linear infinite;
  }
  
  @-webkit-keyframes animateBottom {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  
  @keyframes animateBottom {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }

#nombre{

    background-color: aliceblue;
    border-radius: 15px 0px 15px 0px;
    text-align: center;
    border: 0px;
    font-size: 100%;
    position: absolute;
    width: 30%;
    height: 8%;
    top: 10%;
    left: 20%;

}
#pas{
    background-color: aliceblue;
    border-radius: 0px 15px 0px 15px;
    border: 0px;
    
    text-align: center;
    font-size: xx-large;
    position: absolute;
    width: 30%;
    height: 8%;
    top: 10%;
    left: 55%;

}


.img{
    position: absolute;
    top: 60%;
    left: 0%;
    width: 100%;
}