@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
	margin: 0;
	--img-width: 35vw;
	--form-width: calc(100vw - 35vw);
	font-family: "Boldonse", system-ui;
	font-weight: 300;
}
.container{
	display: flex;
	justify-content: start;
}
.img-container{
	height: 100vh;
	width: var(--img-width);
	margin: 0;
	background-image: url('https://images.unsplash.com/photo-1444492417251-9c84a5fa18e0?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
	background-size: cover;
	flex: 0 0 auto;
}

.logo-container{
	top: 25vh;
	position: absolute;
	width: var(--img-width);
	background: rgba(108, 122, 137, 0.5);
}

.logo-container > object {
	left: 50%;	
	transform: translate(-50%);
	position: relative;
}

.img-container > .credit-text {
	top: 90vh;
	position: relative;
	color: white;
}

.credit-text p {
	font-weight: 50;
	width: 35vw;
	text-align: center;
	font-size: 8px;
}

.credit-text a {
	text-decoration: none;
	color: #02385a;
}

.credit-text a:active{
	text-decoration:none;
}

.form-container {
	background-color: #02385A;
	overflow: hidden;
	width: var(--form-width);
	height: 100vh;

}

.form-container-text p{
	position: relative;
	font-weight: 100;
	left: 3vw;
	top: 5em;
	color: white;

}

.form {
	box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.3);
	width: var(--form-width);
	height: 50vh;
	background-color: #f2e1c3;	
	top: 25vh;
	position: absolute;	
}

.form > form {
	min-width: 40vw;
	max-width: 40vw; 
	position: relative;
	top: 2vh;
	left: 2vw;
	display: flex;
	flex-wrap: wrap;

}


fieldset{
	border: none;
	padding: 5px;
	margin: 10px;
	flex: 0 0 auto;
}

fieldset > label {
	display: block;
}

input {

	border-radius: 10em;
	height: 1.3rem;
}

input:valid{
	outline: #02385A;
	border: 2px solid #02385A;
}

input:invalid {
	border: none;

	outline: 2px solid #a63922;
}

[type="submit"]{
	position: absolute;
	top: 75vh;
	box-sizing: border-box;
	align-self: start;
	margin: 25px;	
	width: 6rem;
	height: 3rem;
	border-radius: 15rem;
	background-color: #f2e1c3;;
	color: black;
	font-family: "Boldonse", system-ui; 
	font-weight: 100;
}

[type="submit"]:active{
	background-color: #e6d2b8;
}