/* styling for signUp.php
* flexbox layout
*/

*{
	box-sizing: border-box;
}

body {
	background: url("../IMG/pSky.jpg") no-repeat center fixed;
	background-size: cover; 
}

.sign_wrapper{
    width: 900px;
    margin: 8% auto;
    padding: 5px;
}

.sign_wrapper .form-area{
	background: rgba(255,255,0,0.1);
	border-radius: 25px;
	padding: 1.9em;
}  

.sign_wrapper .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column{
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.column img{
	height: 400px;
    width: 430px;
    margin-right: 15px;
}

.column label{
    margin-top: 7px;
    padding: 5px;
    font-size: 17px;
    font-family: Impact;
}

.column input{
    width: 100%;
    border-radius: 5px;
    height:2.5REM;
    margin-bottom: 1rem;
    font-size: 20px;
    padding: 10px;
}

.column2{
    margin: 0px 20px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.column2 label{
    margin-top: 7px;
    padding: 5px;
    font-size: 17px;
    font-family: Impact;
}

.row2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
}

.row2 label{
    font-style: italic;
    margin: 25px 10px;
}

.row2 a:hover{
    text-decoration: underline;
}

.row2 button.button2{
    margin: 10px;
    padding: 10px;
    border: 1px;
    border-radius: 20px;
    background-color: rgba(134, 240, 14, 0.7);
    color: rgb(0, 0, 0);  
    font-size: 22px;
    font-variant: small-caps;
    font-weight: bold;
}

.button2:hover{
    opacity: 0.6;
}