*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
  }
  
  body {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(img/3025793.jpg);
      background-size: cover;
    }
  
    .container-img img{
      width: 496px;
      height: 400px;
      top: 50%;
      left: 50%;
      
    }
    
    .container {
     width: 80%;
     height: 80vh;
     display: flex;
     box-shadow: 0 .5rem 1.5rem rgb(32, 32, 32);
    }
  
    .container-img{
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5rem;
      border-top-right-radius: 400px; 
      border-bottom-right-radius: 400px;
      top: 50%;
      left: 50%;
      background: #bfa2e0;
    }
  
    .container-form{
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container-form h1{
      color: #000000;
      margin-bottom: 20px;
      margin-left: 20%
    }
  
    .container-form h1::after{
      content: '';
      display: block;
      width: 8rem;
      height: 0.3rem;
      background-color: #7b2dd4;
      
    }
  
    .img-icon{
      margin-left: 30%;
    }
  
    .img-icon img{
      width: 100px;
      height: 100px;
    }
  
    form {
      margin-bottom: 20px;
      width: 400px;
      box-shadow: 0 .5rem 1.5rem rgb(32, 32, 32);
      padding: 20px;
      height: 550px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.774);
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      color: #000000;
    }
  
    input{
      color: #000000;
    }
    input, button {
      width: 80%;
      padding: 8px;
      margin-bottom: 15px;
      border: none;
      background-color:rgba(205, 169, 247, 0.671); ;
      border: none;
      border-radius: 10px;
      box-sizing: border-box;
    }
    
    small {
      display: none;
    }
    
    button {
      background-color: rgba(157, 115, 224, 0.774); 
      color:#ffffff;
      border: none;
      cursor: pointer;
      width: 150px;
      margin-top: 20px;
      border-radius: 10px;
    }
    
    button:hover {
      background-color: rgb(69, 2, 146);
      transform: scale(1.0);
      transition: .2s linear;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      text-align: center;
      border: none;
    }
    
    th, td {
      border: 1px solid #ffffff;
      padding: 8px;
      text-align: center;
    }
  
   
    th {
      background-color: rgba(157, 115, 224, 0.774); 
      color:#fff;
      border-radius: 10px;
    }
  
    tr {
      transition: background-color 0.3s ease; 
      color: #fff;
      cursor: pointer;
      background-color: #7b2dd4;
      border-radius: 10px;
    }
  
    tr:nth-child(even) {
      background-color: rgba(150, 9, 206, 0.384);
    }
    
    tr.new-row {
      background-color: rgba(150, 9, 206, 0.384);
      transition: .2s linear;
  }