File: styles/first-page.css

*{
    box-sizing: border-box;
}
body{
    /* font-family: 'Century Gothic';
    background-color: #ce5cd8;
    background: no-repeat linear-gradient(45deg,#ce5cd8,#9dc3d4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 100vh; */
    overflow: hidden;
}
/* h1{
    color: antiquewhite;
    font-size: 5em;
} */ 
.logo{
    margin-top: 15%;
    width: 20%;
    /* position: absolute; */
}
#logo{
    width: 100%;
}
.content{
    min-width: 100%;
    height: 100%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 30%;
    margin-top: 0%;
    /* text-align: center; */
}

.titles{
    margin-left: 5%;
   margin-top: 5%;
   width: 50%;
   
}

p{
    margin-left: 5%;
    margin: 10px,0;
    align-self: center;
}

.form{
    height: 40%;
    width: 30%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
input{
    margin: 5px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.753);
    border-radius: 20px;
    border: unset;
    border-bottom: 2px solid #8f009c;
    outline: none;
}
.buttons{
    width: 30%;
    position: absolute;
    /* margin-top: 7%; */
    margin-left: 5%;
    /* text-align: center; */
}
.button{
    
    /* display: inline; */
    margin-left: 5%;
    padding: 15px;
    font-size: 3.5vh;
    background-color: antiquewhite;
    border-radius: 17px;
    
}
.button:hover{
    background-color: #47ff6f;
}

button{
    width: 30%;
    padding: 5px;
    /* margin-top: 15%; */
    align-self: center;
    
    /* background: #8f009c; */
    border: unset;
    border-radius: 10px;
    cursor: pointer;

}




#gender{
    margin-bottom: 10%;
    border: unset;
}
/* 
.message{
   display: flex;
    margin-top: 300px; */
    /* margin-right: 40%; */
/* } */
/* .msg{ */
    /* position:absolute; */
    /* margin: 0;
    padding: 0; */
    /* margin-top: 20%; */
    /* color: #d33c00; */
    /* padding: 10px;
    border: 2px solid #d33c00;
    border-radius: 5px;
    
} */

.error {
    border-bottom: 2px solid #ff4332;
}

.none{
    display: none;
}