body {
    background: white;
    font-family: raleway;
    color: black;
    margin: 0;
  }
  
  .popup .content {
   width: 500px;
   height: 400px;
   
   text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-150%) scale(0);
   border-radius: 5px;
   background: #ECEFF1;
   position: absolute;
   
  }
  h1 {
   font-weight: 600;
   padding-top: 15px;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-right: 20px;
   text-align: center;
   font-size: 30px;
   margin: auto;
   background-color: #1A237E;
   width: 460px;
   color: white;
   
  }
  h2{
      font-weight: 500;
      padding-top: 20px;
      padding-left: 5px;
      text-align: left;
      font-size: 20px;
      padding-bottom: 5px;
      margin: 1px 20px;
  
  }
  
  .input-field .validate {
  border: 1px solid black;
  margin-bottom: 15px;
  color: black;
  padding: 2px;
  font-size: 16px;
  border-radius: 3px;
  width: 90%;
  height: 40px;
  
  }
  
  .second-button {
  margin-top: 20px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 500;
  background: #00a699;
  width: 50%;
  }
  .second-button:active {  
  border: none;
  }
  
  .first-button {
  border-radius: 5px;
  border: none;
  position: absolute;
  top:5%;
  left: 80%;
  color: white;
  font-size: 18px;
  font-weight: 500;
  padding: 10px;
  background: #00a699;
  }
  
  .first-button:active {  
  border: none;
  }
  /* Popup active */
  .popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%,-50%) scale(1);
  }
  .popup .close-btn {
   color:#039BE5;
   font-size: 10px;
   border-radius: 5px;
   background: white;
   position: absolute;
   right: 5px;
   top: 1px;
   width: 20px;
   padding: 2px;
   height: 10px;
   
   }