body {
	background-color: black;
	color: black;
	margin: 0;
}

/* LOGIN PAGE */
#login-page {
	color:gainsboro;
	height: 50%;
	width: 95vw;
	margin: 0 auto;
	text-align: center;
	position: relative;
	top: 33%;
	font-size: 12pt;
}

#ill-pass{width:140px; transition:width 1.4s ease-in-out; -webkit-transition:width 1.4s ease-in-out; background-color: lightyellow; border: none; text-align: center;}
#ill-pass:focus{transition:width 1.4s ease-in-out; width:calc(95vw - 85px); max-width: calc(95vw - 85px);}
#curvy {
	display: inline-block;
	position: relative;
	top: 0;
	left: 6px;
	width: 20px;
	background-color: lightyellow;
	border-radius: 0 0 0 35px;
}

#curvy::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -2px;
	width: 20px;
	height: 20px;
	background-color: lightyellow;
	border-radius: 20px 20px 0 0/35px 35px 0 0;
	transform: rotate(-35deg);
}

#curvy::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 10px;
	width: 15px;
	height: 15px;
	background-color: lightyellow;
	transform: rotate(-65deg);
}

#eat-banana{background-color: yellow; border-radius: 0 15px 15px 0; border: 2px solid yellow; border-right: 2px solid black; position: relative; left: -3px;}
#eat-banana::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 35px;
  width: 0;
  height: 14px;
  border-top: 9px solid transparent;
  border-right: 9px solid yellow;
  transform: rotate(60deg);
}

#eat-banana::after {
	content: "";
	height: 18px;
    width: 19px;
    position: absolute;
    top: 20px;
    left: -2px;
    box-shadow: 1px 7px 0 1px yellow;
    transform: rotate(120deg);
    border-radius: 50%;

}

#footballs {
	position: fixed;
	bottom: 0;
	width: 100%;
}

#footballs div {
	position: relative;
	color: white;
	margin: 0 auto;
	padding: 10px;
}

@media screen and (max-width: 640px) {
	#login-page {
		/*width:100%;
		min-width: 10vw;*/
		top: 0;
	}

}