.pic {
	margin-top:10vh;
	height:40vh;
}

.sel {
	color:#fffffe;
	border:3px solid currentColor;
	border-radius:12px;
	position:absolute;
	bottom:4px;
	right:4px;
	margin:16px;
	padding:12px;
	width:406px;
	text-align:left;
	height:220px;
	max-height:220px;
}

.sel > div:not(:first-child) {
	margin-top:10px;
}

.sel > div > span {
	cursor:pointer;
}

/*
.sel > div > input {
	display:none;
}

.sel > div > label {
	cursor:pointer;
}
*/

.sel > div {
	opacity:0;
	animation: slideAni 2s ease forwards;
}

.sel > div.sel0 {animation-delay:1.8s;}
.sel > div.sel1 {animation-delay:2.4s;}
.sel > div.sel2 {animation-delay:3.0s;}
.sel > div.sel3 {animation-delay:3.6s;}

.msg {
	color:#fffffe;
	border:3px solid currentColor;
	border-radius:12px;
	position:absolute;
	bottom:4px;
	right:458px;
	margin:16px;
	padding:12px;
	width:calc(100% - 522px);
	text-align:left;
	height:220px;
	max-height:220px;
}

.msg > div {
	opacity:0;
	animation: slideAni 2s ease forwards;
}

@keyframes slideAni {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

.msg > div.msg0 {animation-delay:0.2s;}
.msg > div.msg1 {animation-delay:0.8s;}
.msg > div.msg2 {animation-delay:1.4s;}
.msg > div.msg3 {animation-delay:2.0s;}
.msg > div.msg4 {animation-delay:2.6s;}
.msg > div.msg5 {animation-delay:3.2s;}
.msg > div.msg6 {animation-delay:3.8s;}
.msg > div.msg7 {animation-delay:4.4s;}