body {
	min-width: 100vw;
	height: 100vh;
	background-color: #646A85;
	font-size: 100%;
	font-family: helvetica;
	text-align: center;
	color: black;
	display: flex;
	flex-direction: row;
	background-image: url("./images/09900019.jpg");
	background-size: cover;      /* <‑‑ fill the area, keep aspect ratio */
    background-position: center;/* centre the image */
    background-repeat: no-repeat;/* don’t tile */
    margin: 0;
	}
	

.middle {
	display: flex;
	flex: 50%;
	flex-direction: column;
	}
	
.main {
	display: flex;
	flex-direction: column;
	flex: 50%;
	border: 3px solid black;
	padding: 30px;
	background-color: #E8E8E8;

	}

.textwindow {
	flex: 50%;
	padding: 2%;
	font-size: 150%;
	text-wrap: stable;
	overflow: hidden;
	overflow-y:auto;
	}

.dx {
	text-align: center;
	font-size: 100%;
	letter-spacing: 2px;
	text-shadow: -5px 5px rgb(242, 242, 242);
/*
	text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
	color: #FFFFFF;
*/
	}

.opt {
	text-align: center;
	font-size: 100%;
	}

input:focus {
	outline: none;
	box-shadow: 0 0 0 2px #D2D2D2;
	}

.btn {
	width: 5vw;
	align-self: center;
	}

.dummy {
	width: 25vw;
	display: flex;
	}

.middum {
	height: 25vh;
	color: #E8E8E8;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	padding: 5%;
	}
	
.a-footer {color:rgb(255, 249, 217); font-size: 120%;}
.a-footer:link {text-decoration: none;}
.a-footer:visited{color: rgb(255, 249, 217)}
.a-footer:hover{font-size: small; text-decoration: underline; text-decoration-color: rgb(132, 134, 237); text-decoration-inset: -0.5em; text-decoration-skip-ink: auto;text-decoration-thickness: 3px;}