@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marhey:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marhey:wght@300..700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  font-family: "Marhey", sans-serif;

}

.form-container{
    background: url(images/5597769.jpg)no-repeat;
   
background-size: cover ;
    background-position: center;
    width: 100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 80%;
    left: 50%;
  }
  
  .container form {
    background: rgba(237, 202, 202, 0.373);
    background-size: contain ;
    padding: 3em;
    height: 400px;
    width: 400px;
    border-radius: 20px;
    border-left: 1px solid white;
    border-top: 1px solid white;
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;}
    
    p {
      font-weight: 500;
      font-family: "Alexandria", sans-serif;
      color: #3e3636;
      opacity: 0.7;
      font-size: 1.4rem;
      margin-top: 0;
      margin-bottom: 40px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    }
    
    a {
      text-decoration: none;
      color: #e44444;
      
      font-size: 12px;}
      
      a:hover {
        text-shadow: 2px 2px 6px #00000040;
      }
      
      a:active {
        text-shadow: none;
      }
   
    
    .container form input {
      background: transparent;
      width: 200px;
      padding: 1em;
      margin-bottom: 2em;
      border: none;
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-radius: 5000px;
      backdrop-filter: blur(5px);
      box-shadow: 4px 4px 60px rgba(0,0,0,0.2);
      color: #fff;
      font-weight: 500;
      transition: all 0.2s ease-in-out;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);}
      .container form  input:hover {
        background: rgba(255,255,255,0.1);
        box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
      }
      
      
        
      .container form input:focus {
          background: rgba(255,255,255,0.1);
          box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
        }
      
      
        .container form .btn {
        margin-top: 10px;
        width: 140px;
        font-size: 15px;
        border-radius: 20px;
        background: rgba(213, 8, 8, 0.2);
    }
        
        .container form input:hover {
          cursor: pointer;
        }
        
        .container form input:active {
          background: rgba(255,255,255,0.2);
        }
      
    
    
        .container form input:hover {
      margin: 4px;
    }
  
  
  ::placeholder {
    font-weight: 400;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  }
  
  .drop{
    background: rgba(193, 101, 101, 0.346);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border-left: 1px solid white;
    border-top: 1px solid white;
    box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2);
    position: absolute;
    transition: all 0.2s ease;}
    
    .drop-1 {
      height: 80px;
      width: 80px;
      top: -20px;
      left: -40px;
      z-index: -1;
    }
    
    .drop-2 {
      height: 80px;
      width: 80px;
      bottom: -30px;
      right: -10px;
    }
    
    .drop-3 {
      height: 100px;
      width: 100px;
      bottom: 120px;
      right: -50px;
      z-index: -1;
    }
    
   .drop-4 {
      height: 120px;
      width: 120px;
      top: -60px;
      right: -60px;
    }
    
    .drop-5 {
      height: 60px;
      width: 60px;
      bottom: 170px;
      left: 90px;
      z-index: -1;
    }
  
  
  a,
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
      outline: none;
  }