:root {
  --primary: #ffffff;
  --secondary: #FF8647;
  --terciary:#FF7C00;
  --backcolor:#e6e6e6;
  --maintextcolor:#3f3f3f;
  --bodytext:#000000;
}


body{
  height: fit-content;
  width: 100svw !important;
  background-color: var(--backcolor);
}




.box{
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto ;
  width: 90%;
  transform: translate(0, 25%);
  margin-bottom: 200px;
 
  
}

.box_pass{
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto ;
  width: 90%;
  transform: translate(0, 3%);

 
  
}
@media (min-width: 900px) {
  .box{
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto ;
    width: 500px;
    transform: translate(0, 30%);
  
  }

  .box_pass{
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto ;
    width: 500px;
    transform: translate(0, 15%);
    
  }

}
@media (min-width: 1300px) {
  .box{
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto ;
    width: 500px;
    transform: translate(0, 50%);
  
  }

  .box_pass{
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto ;
    width: 500px;
    transform: translate(0, 15%);
    
  }

}
.box .rounded{
  border-radius: 20px !important;

  
}

.box input{
 
  border-radius: 20px;
  
}


.box .btn-primary:focus{
  
  background-color: var(--primary);
  border-color: var(--terciary);
  color: var(--secondary);
    
   
   }
 
* .btn-primary{
  background-color: var(--secondary);
  border-color: var(--terciary);
  border-radius: 20px;
}

* .btn-primary:hover{
  background-color: var(--primary);
  border-color: var(--terciary);
  color: var(--secondary);
}

input[type="email"],
input[type="text"],
input[type="password"] {
  border-radius: 20px;
}