html {
	height:100%;
	-webkit-text-size-adjust: 100%; 				/* Prevent font scaling in landscape while allowing user zoom */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	/* Prevent gray overlay on ios*/
	}	

body {
	--main-color: #333;
	--accent-color: violet;
	
	
	color:var(--main-color);
	font-family: system-ui, Helvetica, sans-serif;


	margin:2em 1em 0em 1em;
	max-width:34em;
	
	
	}
	
ul {
	list-style:none;
	padding:0px;
}

h1, h2 {
	width:100%;
	font-size:unset;
	text-align:left;
	padding-left:0.5em;
	font-weight:unset;
}

a {
	text-decoration:none;
}



header, section {
	margin-bottom:4em;
}


table {
    width: 100%;
    border-collapse: collapse;

}

tr {

	border-bottom: 1px solid var(--accent-color);
}

tr:first-child{
    border-top: 1px solid var(--accent-color);	
}


td {
	width:100%;
    padding: 8px;
	white-space: nowrap;
}


td:nth-child(1) {
	width:16em;
	text-align:left;
}

td:nth-child(2) {
    text-align:right;
}


footer {
	padding-left:0.5em;
    display: flex;
    justify-content: space-between; /* This will give equal space between the items */
    align-items: center; /* This vertically centers the items */
	line-height:2em;
}



@media (max-width: 34em) {
	
	footer {
	display:block;
	}
	
	footer > * {
	display:block;
	}

}