*{
    box-sizing:border-box;
  }
  body{
    margin: 0;
    background:#663398;
    font-family: 'EB Garamond', serif;
    color:white; 
  }
  
  .pwo{
    
    display:flex;
    justify-content:center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
  }
  
  .main{
    box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
    background:#23235B;
    padding:0rem 1rem;
  /*   background:#757EF4; */
    align-items:center;
    width:300px;
  }
  .main h3{
     margin-left:1.8rem;
    font-size:1.5rem;
    letter-spacing: 2px;
  }
  .form-control
  {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.4rem;
  }
  .pw{
  box-shadow: rgba(90, 50, 93, 3.85) 0px 2px 5px -1px, rgba(0, 0, 0, 1.3) 0px 1px 3px -1px;
    background:#461C6E;
      display: flex;
      font-size: 1.2rem;
      align-items: center;
      height: 50px;
      width: 100%;
      position: relative;
      padding: 1rem;
  /*     overflow: auto; */
      overflow: hidden;
    margin-bottom:1rem;
  }
  .pw button {
     background-color: #98448A;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-weight: bold;
    font-size:1.4rem;
    padding:0.3rem;
      position: absolute;
      top: 0;
      right: 0;
    margin-right:0.2rem;
      transform: translate(0, 20%);
      transition: opacity 0.2s ease, transform 0.2s ease;
      opacity: 0;
  }
  .pw:hover button {
      opacity: 1;
  }
  
  .btn2{
    box-shadow: rgba(90, 50, 93, 3.85) 0px 2px 5px -1px, rgba(0, 0, 0, 1.3) 0px 1px 3px -1px;
   background-color: #a4508b;
  background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
  
     border: none;
     color: #DCD9F4;
     cursor: pointer;
     display: block;
     font-size: 1rem;
     font-weight: bold;
     padding: 0.5rem;
     margin:1rem 0rem;
     width: 100%;  
  }
  .btn2:hover{
    transform: scale(1.05);
  }
  p{
    font-size: 1rem;
    letter-spacing: 2px;
    color: black;
  }