body {
	margin:  auto;
	max-width: 60em;
	font-family: sans-serif;
	color: #333333;
	display: grid;
	grid-template-columns: auto auto auto;
}

header,
nav,
article,
aside,
footer {
	border-radius: 0 0.5em 0.5em;
	border: thin solid;
	padding: 10px;
	margin: 10px;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
}

article {
	background: #ffede0;
	border-color: #df6c20;
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
}
table {
    width: 85%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  th,
  td {
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  th {
    text-align: left;
  }
  thead th {
    background-color: #55608f;
  }
  tbody tr:hover {
    background-color: #96979c;
  }
  tbody td {
      background-color: #767c99;
    position: relative;
  }