@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

*,*:before,*:after{box-sizing:border-box}

body{
  min-height:100vh;
  font-family: 'Raleway', sans-serif;
}

.container{
  width:100%;
  height:100%;
  overflow:hidden;
  
  &:hover,&:active{
   
    .top, .bottom {

      &:before, &:after{
        margin-left: 240px;
        transform-origin: -240px 50%;
        transition-delay:0s;
      }
    }
    
    .center{
      opacity:1;
      transition-delay:0.2s;
    }

   
  }
}

.top, .bottom{
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    width:200vmax;
    height:200vmax;
    top:50%;left:50%;
    margin-top:-100vmax;
    transform-origin: 0 60%;
    transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
    z-index:10;
    opacity:0.65;
    transition-delay:0.2s;
  }
}

.top{
  &:before{transform:rotate(45deg);background:#e46569;}
  &:after{transform:rotate(135deg);background:#ecaf81;}
}

.bottom{
  &:before{transform:rotate(-45deg);background:#60b8d4;}
  &:after{transform:rotate(-135deg);background:#3745b5;}
}

.center{
  position:absolute;
  width:700px;
  height:700px;
  top:50%;left:50%;
  margin-left:-350px;
  margin-top:-350px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:30px;
  opacity:0;
  transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay:0s;
  color:#333;
  font-size: 1rem;
  
  input, #login {
    width:55%;
    padding:15px;
    margin:5px;
    border-radius:1px;
    color: black;
    border:1px solid #ccc;
    font-family:inherit;
    font-size: 1.2rem;
    background-color: antiquewhite;
  };

  #login{
    width: 25%;
    border-radius: 1rem;
  }
  #login:hover{
    cursor: pointer;
    background-color: rgba(91, 81, 68, 0.333);
    border:1px solid #7f7272;
    
  }
   .title{
     font-size: 2rem;
     margin-bottom: -.5rem;
  }
 
}


/* modal*/
.modalAlert{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}

.AlertCenter{
  width: 25rem;
  height: 15rem; 
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 1rem;
  border: black outset .2rem;
}
.textAlert{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  width: 100%;
  height: 74%;
}
.optionAlert{
  width: 100%;
  height: 25%;
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: center;
}
#btnCerrarResul{
    width:25%;
    height: 2rem;
    
    margin:5px;
    border-radius:1rem;
    color: black;
    border:2px outset #000000;
    font-size: 1.1rem;
    background-color: rgba(0, 255, 106, 0.709);
}
#btnCerrarResul:hover{
  cursor: pointer;
  
  transform: scale(1.1);
}
#modalResuld{
  z-index: 50;
}