@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
background-color:#5cb;
color: #020;
font-family: 'Muli', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.container{
  background-color: rgba(255,255,255,0.4);
  padding: 20px 40px;
  border-radius: 5px;
}

.container h1{
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: #f08;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: #f08;
  padding: 15px;
  font-family: inherit;
  font-size:  16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus{
  outline: 0;
}

.btn:active{
  transform: scale(0.98);
}

.text{
  margin-top: 30px;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.form-control input{
  background-color: transparent;
  border: 0;
  border-bottom: 2px black solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: black;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
}

.form-control label{
  position: absolute;
  top: 15px;
  left: 0;
}


.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: #f08;
  transform: translateY(-30px);
}
/******************************************
/* LAYOUT
/*******************************************/
header {

}

footer {

}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/
