@charset "utf-8";
/* Xpert Helper Simulation
	Greg Mote 2019-02-21 */

/* colors */
:root {
	--darkness: #333333;
	--background: #ffffff;
	--xpertbubble: #5599ff;
	--xperttext: #ffffff;
	--userbubble: #777777;
	--usertext: #ffffff;
	--button: #113399;
	--buttontext: #ffffff;
	--buttonhover: #111133;
	--footerline: #5599ff;
	--footerback: #ffffff;
	--inputborder: #eeeeee;
}

/* global */
html {
	background-color: var(--darkness);
	overflow: hidden;
}
body {
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
	font-size: 16pt;
	font-weight: 100;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
}

/* box for bubbles */
section {
	background-color: var(--background);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 55pt;
	white-space: nowrap;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	flex-direction: column;
	scroll-behavior: smooth;
}
section::after {
	content: "";
	background-image: url('images/labman.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70vh;
	opacity: 0.02;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	z-index: -1;
}

/* bubbles */
article {
	z-index: 2;
	position: relative;
	vertical-align: top;
	scroll-snap-align: start;
	padding: 10pt 20pt;
	margin: 10pt;
	border-radius: 25pt;
	white-space: normal;
	display: none;
	flex-direction: column-reverse;
	box-shadow: 1pt 2pt 5pt -1pt rgba(0,0,0,0.5);
}
.xpert {
	color: var(--xperttext);
	background-color: var(--xpertbubble);
	text-align: right;
	padding-right: 55pt;
	margin-left: 35%;
	background-image: url('images/labman.png');
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 55pt;
	min-height: 40pt;
	border-top-right-radius: 2pt;
}
.user {
	color: var(--usertext);
	background-color: var(--userbubble);
	text-align: left;
	width: intrinsic;
	margin-right: 45%;
	border-bottom-left-radius: 2pt;
}
.field {
	box-shadow: none;
	padding: 0 10pt;
}
input {
	border-radius: 10pt;
	font-size: inherit;
	padding: 0 5pt;
	margin: 0 5pt;
	border: 2pt solid var(--inputborder);
}
input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	display: inline-block;
	margin: 5pt;
	padding: 5pt 10pt;
	border-radius: 20pt;
	box-shadow: 1pt 2pt 5pt -1pt rgba(0,0,0,0.5);
}
input[type="radio"]:checked + label {
	background-color: var(--button);
	color: var(--buttontext);
}

/* buttons */
footer {
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7pt 5pt;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	vertical-align: middle;
	height: 40pt;
	background-color: var(--footerback);
	border-top: 2pt var(--footerline) solid;
	overflow-x: auto;
	overflow-y: hidden;
}
footer a {
	color: var(--buttontext);
	text-decoration: none;
	cursor: pointer;
	background-color: var(--button);
	width: 25%;
	text-align: center;
	margin: 10pt;
	padding: 10pt;
	border-radius: 20pt;
	border-bottom-left-radius: 2pt;
	display: none;
	box-shadow: 1pt 2pt 5pt -1pt rgba(0,0,0,0.5);
}
footer a:hover { background: var(--buttonhover); }

/* >800 */
@media all and (min-width: 801pt) {
	body { padding: 10pt; }
	section {
		bottom: 65pt;
		margin: auto;
		margin-top: 10pt;
		max-width: 780pt;
		border-top-left-radius: 10pt;
		border-top-right-radius: 10pt;
	}
	.xpert {
		padding-right: 65pt;
		background-size: 65pt;
		min-height: 50pt;
	}
	footer {
		margin: auto;
		max-width: 770pt;
		margin-bottom: 10pt;
		border-bottom-left-radius: 10pt;
		border-bottom-right-radius: 10pt;
	}
}

/* >500 */
@media all and (max-width: 800pt) and (min-width: 501pt) {
	.xpert {
		padding-right: 75pt;
		background-size: 75pt;
		min-height: 60pt;
	}
}

/* >250 */
@media all and (max-width: 500pt) and (min-width: 251pt) {
	body { font-size: 14pt; }
	article { border-radius: 20pt; }
	footer a { border-radius: 15pt; border-bottom-left-radius: 2pt; flex-grow: 1; margin: 5pt 1pt; padding: 5pt; }
	.xpert { margin-left: 25%; }
	.user { margin-right: 25%; }
}

/* ≤250 */
@media all and (max-width: 250pt) {
	body { font-size: 12pt; }
	article { border-radius: 15pt; }
	footer a { border-radius: 10pt; border-bottom-left-radius: 2pt; flex-grow: 1; margin: 5pt 1pt; padding: 5pt; }
	.xpert { margin-left: 20pt; }
	.user { margin-right: 20pt; }
}