* {
	font-size:18px;
	font-family:Arial;
}
body {
	margin:0;
}
.gridxy {
	display:grid;
	grid-template-columns:1fr 1fr;
	background-color:#fee;
	color:#444;
	margin: 0 auto;
}
.gridxy > * {
/*
	border:1px solid black;
*/
}
.gridxy > * > img {
	object-fit:cover;
	width:50vw;
	height:50vw;
	display:block;
}
.user {
	width:100%;
	display:flex;
	justify-content:space-around;
	padding:10px;
/*
	border:1px solid red;
*/
	box-sizing:border-box;
}
.user > * {
	xborder:1px solid green;
}
.user > .image {
}
.user > .bio {
	min-width:200px;
}
.bio > * {
	margin:10px;
}
.portrait {
	border-radius:50%;
	max-width:30vw;
}
.name {
	font-size:24px;
	font-weight:bold;
}
.ctrl {
	width:100%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.ctrl > * {
	flex-basis:1;
	min-width:150px;
	flex-grow:1;
}
.ctrl > .search {
	flex-basis:2;
	position:relative;
}
.search input {
	width:100%;
	box-sizing:border-box;
}
.search .fas {
	position:absolute;
	right:10px;
	top:50%;
	transform: perspective(1px) translateY(-50%);
}
.demo-bar {
	position:fixed;
	text-align:center;
	width:100%;
	top:50vh;
	opacity:0.3;
	font-style:italic;
	font-size:40px;
}