@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

html, body {
	height: 100%;
	margin: 0;

	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-size: 16px;



	
}

.layout {
	display:flex; align-items:flex-start;
}
#section1 {
	width: 65%;
	background: linear-gradient(to left, lightblue -100%, transparent 100%);
	min-height: 100lvh;
	position: sticky;
  	top: 0;
}
#section2 {
	width: 35%;
	min-height: 200lvh;
}
#section2in {
	min-height: 100lvh;
	width: 100%;
	display: flex;
	justify-content: flex-end; 
	flex-direction: column;
	background: linear-gradient(to right, lightblue -100%, transparent 50%);
}

#section2in2 {
	width: 100%;
	display: flex;
	justify-content: center; 
	flex-direction: column;
	background: linear-gradient(to right, lightblue -100%, transparent 50%);
}


@media (max-width: 900px) {
	#section1,
	#section2 {
	width: 100%;
	}
	.layout {
		flex-direction: column;
	}
	#section1 {
		background: linear-gradient(to top, lightblue 00%, transparent 100%);
		position: static;
   		top: auto;
   		min-height: 50lvh;
	}
	#section2 {
		min-height: 0;
	}
	#section2in {
		min-height: auto;
		background: linear-gradient(to bottom, lightblue 00%, transparent 100%);
		justify-content: start;
	}
	#section2in2 {
		background: linear-gradient(to top, lightblue -100%, transparent 50%);
		justify-content: start;
	}
}