.login {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.841);
	outline-style: solid;
	outline-color: black;
	outline-width: 3px;
	overflow: hidden;
	width:548px;
	height: 296px;
	border-radius: 20px;
}
body {
	display: flex;
	justify-content: center; /*horizontal*/
	align-items: center; /*vertical*/
	height: 100dvh;/*makes vertical height the entire screen so that align-items can work*/
	background: radial-gradient(circle at top right, rgb(255, 184, 84), rgb(225, 136, 255));
}
input[type="submit"] {
	background-color: rgb(255, 113, 113);
	border-radius: 7px;
}
.hiddenLogin {
	width: 60px;
	height: 100dvh;
	background: radial-gradient(circle at top right, rgb(253, 118, 118), rgb(188, 255, 146));
	margin-left: auto;
	transition: 900ms;
	padding-right: 0px !important;
}
.hiddenLogin > *{
	display: none;
}
.shownLogin > * {
	min-width: 432px;
}
.shownLogin {
	overflow: hidden;
	padding-left: 30px;
	width:460px;
	transition: 900ms;
}
#signin {
	padding-right: 30px;
}