* {
	box-sizing: border-box;
}
body {
	margin: 0px;
	background-color: #fafaf4;
	color: #222;
}
section {
	max-width: 80vw;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
h1 {
	margin: 0;
	padding: 0;
}
h2 {
	display: inline-block;
	text-decoration: underline;
	margin-bottom: 0;
}
p {
	font-family: sans-serif;
}
footer {
	border-top: 1px solid gray;
	margin-top: 64px;
}
label {
	color: blue;
	text-decoration: underline;
}

section#previews {
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.2cm;
	min-width: 50vw;
}
section#previews div.preview {
	flex-shrink: 2;
	max-width: 8cm;
}
section#previews div.preview img {
	border-radius: 2mm;
	width: 100%;
	height: auto;
}

section#form {
	max-width: 16cm;
	background-color: rgba(0,0,255,0.1);
	border-radius: 4px;
	padding: 0.2cm 0;
	margin-bottom: 1cm;
}
section#form ul {
	text-align: left;
	margin: 0 auto;
	display: inline-block;
	margin-bottom: 1cm;
}

span input[type="text"] {
	font-size: 12pt;
}
span button {
	width: 2cm;
	font-size: 12pt;
}


section#recents {
	max-width: 100%;
	width: 100%;
}
section#recents ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0; margin:0;
}

section#recents li {
  height: 40vh;
  flex-grow: 1;
}

section#recents img {
  max-height: 100%;
  min-width: 100%;
  height: 128px;
  object-fit: cover;
  vertical-align: bottom;
}

section#recents li:last-child {
  flex-grow: 10;
}

section.message {
	text-align: left;
	background-color: #fcc;
	display: inline-block;
	padding: 1cm;
	border-radius: 1cm;
	max-width: 24cm;
}