*{
    margin: 0%;
    padding: 0%;
}
                                /* Reseting the page*/
header, main, footer {
  margin: 0;
  padding: 0;
}

html{                                        /*Style for the page*/      
    font-family: "Roboto", sans-serif; 
    background: linear-gradient(450deg,rgb(55, 0, 255),rgb(55, 0, 143));
    background-repeat: no-repeat;
    height: 100%;
}

form{                          /*creating the form*/
    color: rgb(152, 41, 255);
    width: 30rem;
    height: 30rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input{                           /* Style for the spaces in the labels*/
    padding: 1.6rem;
}
 
.form{             /* Style for the entire form, height, width and justifing it*/
    justify-items: center;
    height: 35rem;
    width: 35rem;
    background: linear-gradient(400deg, rgb(121, 0, 219), rgb(255, 0, 0));
    align-content: center;
    border-radius: 25px;
}

.container{             /*Style for the main container*/
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 8rem;
}

.input{                          
    border-radius: 20px;
    border-style: none;
}

.button{                  /*Styel for the submit button*/
    color: white;
    background: linear-gradient(300deg, rgb(245, 3, 3), rgb(162, 0, 255));
    border-style: none;
    border-radius: 15px;
}

.button:active{                       /*Styel for the submit button*/
    background: red;
}

:placeholder-shown{                /*Styel for the placeholder*/
    font-size: 25px;
}