/* CSS Document */
ul {
  display: flex;
  top: 0;
  position: fixed;
  overflow: hidden;
}
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li a {
  display: block;
  padding: 8px;
  width: 100px;
  color: white;
  background-color: darkblue;
  text-decoration: none;
}
li a:hover {
  background-color: cadetblue;
}
.container {
	width: 680px;
}
.entryarea{
	position: relative;
	height: 80px;
	line-height: 80px;
}
body {
  background-color:cornsilk;
align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
input{
	position:absolute;
	width:100%;
	outline:none;
	font-size: 2.2em;
	padding: 0 30px;
	line-height: 80px;
	border-radius: 10px;
	border: 2px solid black;
	background: transparent;
	transition: 0.1s ease;
	z-index: 1111;
}

.labelline{
	position:absolute;
	font-size: 1.6em;
	color:black;
	padding: 0 25px;
	margin: 0 20px;
	background-color:cornsilk;	
	transition: 0.2s ease;
}
input:focus,
input:valid{
	color:coral;
	border: 4px solid;
}

input:focus + .labelline,
input:valid + .labelline{
	color:coral;
	height: 30px;
	line-height: 30px;
	padding: 0 12px;
	transform: translate(-15px, -16px) scale(0.88);
	z-index: 1111;
}