root{
    --font-color:#555;
    --font-hover-color:orange;
}








.container{

    width: 60%;
    margin: 10% 15% 10% 15%;
    padding: 2% 5% 2% 5%;

    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    background-color:#fff;


}



/*

form

form-group

form-label

form-control

*/


.form{

 width: 70%;
 padding: 0 15% 0 15%;

}





.form-group{
    
    width: 70%;
    margin: 0 15% 0 15%;
    margin-bottom:1.5em;
    transition:all .3s;
}




.form-label{
    font-size:.75em;
    color:var(--font-color);
    display:block;
    opacity:0;
    transition: all .3s;
    transform:translateX(-50px);
}



.form-control{
    box-shadow:none;
    border-radius:0;
    border-color:#ccc;
    border-style:none none solid none;
    width:100%;
    font-size:1.1em;
    transition:all .6s;
}

.form-control::placeholder{
    color:#aaa;
}
.form-control:focus{
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
}
.form-group:focus-within{
    transform:scale(1.1,1.1);
}

.form-control:invalid:focus{
    border-color:red;
}
.form-control:valid:focus{
    border-color:green;
}








.submitbtn{
  width: 80%;
  margin: 0 10% 0 10%;

  padding:8px;

  font-style: italic;
  font-size: 80%;



  cursor: pointer;
  border-radius: 10px;
  border: #1469d8 2px solid;


  color:var(--font-color);



}


.submitbtn:hover{
    border-color:var(--font-hover-color);
    color:var(--font-hover-color);
}





.focused > .form-label{
    opacity:1;
    transform:translateX(0px);

}








@media(max-width:650px){


.container{
    width: 80%;
    margin: 10% 5% 10% 5%;
    padding: 2% 5% 2% 5%;
}


.form-control{
    width:100%;
    font-size:0.7em;
}


}