body {
	margin: 0;
	font-family: sans-serif;
}

p {
	text-indent: 10px;
	letter-spacing: -1px;
}

#left {
	position: fixed;
	float: left;
	max-width: 450px;
	width: 100%;
}

#sidebar {
	background-color: black;
	min-height: 450px;
	border-right: 3px solid cornflowerblue;
	border-bottom: 3px solid cornflowerblue;
	border-radius: 0 0 10px 0;
	padding-top: 10px;
	width: 97%
}

#button-intro {
	background-color: #777;
}

#bg {
	width: 100%;
	height: 100%;
	background-color: darkgrey;
	color: black;
	background-image: url(01BGC.JPG);
	position: fixed;
	z-index: 0;
}

.colors {
	display: inline-block;
	border: 1px solid white;
	padding: 5px;
	margin: 4px;
	cursor: pointer;
	    border-radius: 5px;
}

#container {
	position: absolute;
	left: 450px;
	max-width: 50%;
	width: calc(97% - 450px);
}

#main {
	float: left;
	width: 100%;
	padding: 10px 10px 10px 20px;
	font-size: 13pt;
	background-image: url(marble.jpg);
}

/* LOGIN PAGE */
#login-page {
	color:gainsboro;
	height: 50%;
	width: 50%;
	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; border-radius: 15px 0 0 15px; background-color: lightyellow; border: none; text-align: center;}
#ill-pass:focus{transition:width 1.4s ease-in-out; width:360px; max-width: calc(100vmin - 55px);}
#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%;

}

/*#eat-banana::after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid yellow;
  border-radius: 20px 0 0 0;
  top: 12px;
  left: -9px;
  width: 15px;
  height: 15px;
  transform: rotate(135deg);
}*/

@media screen and (max-width: 800px) {
	#container {
		position: relative;
		Left: unset;
		max-width: 97%;
		width: unset;
		margin: 0 auto;
	}

	#left {
		position: relative;
		float: none;
		margin:0 auto;
	}

	#main {
		max-width: 97%;
	}

	#login-page {
		/*width:100%;
		min-width: 10vw;*/
	}
}

@media screen and (orientation: portrait) {
	#login-page {
		width: 95vw;
		height: 50vw;
		top: 10px;
	}
	#ill-pass:focus{
		width: calc(90vmin - 55px);
	}
}