html, body {
  height: 100%;
}

body {
    background-color: #34a0a4ff;
	background-image: linear-gradient(to right, #168aad, #34a0a4, #168aad);
    margin:0;
	display: flex;
	flex-direction: column;
}

.maincontainer {
    margin:0 auto;
    text-align: center;
	flex: 1 0 auto;
    width: 100%;
}

h1 {
	font-size: 2.2em;
	background-color: rgba(52, 160, 164,1);
	margin-top: 0;
	Padding: 24px;
}

em {
	font-size: 1.1em;
}

.dialog  {
    font-size: 1.4em;
	line-height: 1em;
    margin-top: 40px;
}

.dialog p:nth-child(odd) {
	margin-left: 20%;
    /*	color: #184e77;*/
	color: #0D2C54;
	margin-bottom: 0;
	margin-top: 0;
	text-align: left;
}
.dialog p:nth-child(even) {
	margin-left: 55%;
	color: #d9ed92;
	margin-top: -.2em;
/*	margin-bottom: 2em;*/
	text-align: left;
}

.response {
	background-color: rgba(52, 160, 164,1);
/*	background-image: linear-gradient(#168aad, #34a0a4, #168aad);
*/	background-image: radial-gradient(#34a0a4 60%, #168aad);

	font-size: 1.1em;
	padding: 1em 20% 1em 20%;
	margin: 40px 0 20px;
	font-family: sans-serif;
}

.footer {
	/* margin: 0px auto; */
	text-align: center;
	padding: 10px;
	background-color: inherit;
/*	position: relative;
	bottom: 0px;
*/	flex-shrink: 0;
}

table {height: 20px;
    Width: 200px;
	margin: 0px auto;
}

td:nth-child(1) {background-color: #d9ed92ff;
}
td:nth-child(2) {background-color: #b5e48cff;
}
td:nth-child(3) {background-color: #99d98cff;
}
td:nth-child(4) {background-color: #76c893ff;
}
td:nth-child(5) {background-color: #52b69aff;
}
td:nth-child(6) {background-color: #34a0a4ff;
}
td:nth-child(7) {background-color: #168aadff;
}
td:nth-child(8) {background-color: #1a759fff;
}
td:nth-child(9) {background-color: #1e6091ff;
}
td:nth-child(10) {background-color: #184e77ff;
}
td:nth-child(11) {background-color: #0d2c54ff;
}

@media only screen and (max-width: 650px) {
    .maincontainer{
        font-size: 14px;
    }
    
    .dialog p:nth-child(even) {
        margin-top: 0;
    }
}