*{
    margin: 0;
    padding: 0;
    color: white;
}

.main{
    background-image: url(img/card\ 8.jpg);
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.sign-in{
    width: 550px;
    height: 90vh;
    background-color: rgb(40, 40, 53);
    display: flex;
    justify-content: center;
    
    
}

.sign-in-header{
      margin: 30px 0px 50px 0px;
     
      font-family:Arial, Helvetica, sans-serif;
      text-align: center;
}

.username{
    padding: 8px 5px;
    width: 450px;
    background-color: rgb(40, 40, 53);
    border: none;
    border-bottom: 1px solid white;
    margin-bottom: 20px;
    
}

.password{
    padding: 8px 5px;
    width: 450px;
    background-color: rgb(40, 40, 53);
    border: none;
    border-bottom: 1px solid white;
    margin-bottom: 20px;
}



/*
.checkbox-css{
    background-color:  rgb(40, 40, 53);
    border: 1px solid black;
}    */


.btn-1{
   width: 460px;
   padding: 10px 5px;
   border: none;
   background-color: red;
  margin: 40px 0px;
   font-family: Arial, Helvetica, sans-serif;
   
}

.MID-TEXT{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.TWO-btn-2{
    width: 460px;
           display: flex;
           justify-content: space-between;
}


.btn-2{
    margin-top: 30px;
    width: 210px;
    border: none;
    background-color: red;
    padding: 10px 5px;

}

.btn-2-FAST{
    background-color: blueviolet;
}

.btn-2-LAST{
      background-color: rgb(147, 102, 190);
}

.last-text{
    
    text-align: center;
   margin-top: 80px;
    
}



/* PART 2*/

.sign-up{
    width: 550px;
    height: 90vh;
    background-color: rgb(40, 40, 53);
    display: flex;
    justify-content: center;
    
    
}


.a {
    text-decoration: none;
    color: rgb(233, 75, 75);
}

.btn-1:hover{
    background-color: orangered;
}

.btn-2:hover{
    background-color: hotpink;
}