styles.css

/* ubuntu-regular - latin */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: 
		url('../fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		url('../fonts/ubuntu-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* ubuntu-700 - latin */
  @font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	src:
		url('../fonts/ubuntu-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		url('../fonts/ubuntu-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
 
  
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
	margin: 0;
}

/* Header Bar and Text */
header {
	text-align: center;
	padding: 5px;
	font-weight: normal;
	background-color: #69bbc3;
	color: white;
	font-family: 'Ubuntu',sans-serif;
	height: 11vh;
	font-size: 3vh;
	display: flex;
    justify-content: center;
	align-items: center;
}


.data-display {
	height: 89vh;
	background-image:url("images/jermass.png");
	backdrop-filter: blur(5px);
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: column;
	color: #ffffff;
	font-family: 'Ubuntu',sans-serif;
}

.data-display > h1 {
	margin: 10px;
	font-size: 12.5vw;
	font-weight: 700;
}

/* Amount in Words */
.data-display > h2 {
	text-align: center;
	line-height: 200%;
	margin: 5px;
	font-size: 150%;
}

/* History of the debt text */
article {
	font-family: 'Ubuntu',sans-serif;
	font-size: 150%;
	line-height: 200%;
	text-align: center;
	background-color: #404040;
	color: white;
}

article > div {
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 10%;
	padding-right: 10%;
}
/* Poll Zone */
.notice {
	font-family: 'Ubuntu',sans-serif;
	font-size: 100%;
	padding: 5px;
	text-align: center;
	background-color: #2c2c2c;
	color: white;
	word-wrap: normal;
}

.paid {
	text-align: left;
	background-color: darkgreen;
	padding-bottom: 50px;
	padding-top: 20px;
}

/* Paid Body */
.paid > li {
	font-size: 97%;
	margin-top: 15px;
	margin-bottom: 15px;
}

/* Paid Title */
.paid > .lh {
	text-align: left;
	text-align: center;
	font-size: 105%;
	width: 100vw;
	background-color: #003A00;
	margin-left: -10.5vw;
	margin-top: -20px;
	margin-bottom: 5px;
}
/* Debt Added Body */
.added {
	font-size: 90%;
	margin-bottom: 10px;
	background-color: darkred;
}
/* Debt Added Title */
.added > .lh {
	text-align: left;
	text-align: center;
	font-size: 105%;
	width: 100vw;
	background-color: #510000;
	margin-left: -10.5vw;
	margin-top: -50px;
	margin-bottom: 5px;
}

/* Invalidated Added Body */
.invalid {
	text-align: left;
	padding-top: 20px;
	padding-bottom: 1px;
	background-color: #a43500;
}
/* Debt Invalidated Title */
.invalid > .lh {
	text-align: left;
	text-align: center;
	font-size: 105%;
	width: 100vw;
	background-color: #722600;
	margin-left: -10.5vw;
	margin-top: -50px;
	margin-bottom: 10px;
}

.added > li {
	font-size: 97%;
	margin-top: 15px;
	margin-bottom: 15px;
}

a:link {
	color: white;
	background-color: transparent;
	text-decoration-style: dotted;
}

a:visited {
	color: white;
	background-color: transparent;
	text-decoration-style: dotted;
}

a:hover {
	color: lightgray;
	background-color: transparent;
	text-decoration-style: solid;
}

a:active {
	color: lightslategrey;
	background-color: transparent;
	text-decoration-style: solid;
}

footer {
	padding-top: 15px;
	padding-bottom: 15px;
}

.head-link{
	color: white;
	background-color: transparent;
	text-decoration: none;
}
.head-link:visited,
.head-link:active {
	color: white;
	background-color: transparent;
	text-decoration: none;
}

.head-link:hover,
.head-link:focus {
	color: white;
	background-color: transparent;
	text-decoration: none;
}
.datagrid table {
	border-collapse: collapse;
	text-align: left;
	width: 100%;
}
.datagrid {
	font: normal Ubuntu;
	background: transparent;
	overflow: auto;
	border: 2px solid #FFFFFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.datagrid table td, .datagrid table th {
	padding: 3px 10px;
}
.datagrid table thead th {
	background-color: transparent;
	color: #FFFFFF;
	vertical-align: top;
	font-size: 125%;
	font-weight: bold;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
}
.datagrid table thead th:first-child {
	border: none;
	border-bottom: 2px solid #FFFFFF;

}
.datagrid table tbody td {
	color: #FFFFFF;
	border-left: 2px solid #FFFFFF;
	font-size: 100%;
	border-bottom: 2px solid #FFFFFF;
	font-weight: normal;
}
.datagrid table tbody td:first-child {
	border-left: none;
}
.datagrid table tbody tr:last-child td {
	border-bottom: none;
}