body {
  top: 0;
  margin: 0 auto;
  /* align everything in body to the center */
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
  width: 60%; }

header {
  height: 15%;
  width: 80%;
  position: absolute;
  left: 20%; }

article {
  top: 15%;
  position: fixed;
  width: 60%;
  height: 80%; }

nav {
  background: gray;
  border-radius: .3em;
  top: 15%;
  width: 60%;
  position: fixed;
  text-align: right; }
  nav ul li {
    display: inline; }
  nav a {
    text-decoration: none; }

nav a:link, a:visited {
  color: white;
  padding: 1.7%; }

nav a:hover, a:active {
  background-color: orange; }

[role="banner"] {
  top: 21%;
  position: fixed;
  height: 53%;
  width: 60%; }

.banner-box {
  padding: 4%; }
  .banner-box img {
    width: 100%; }

.news-container {
  top: 74%;
  color: gray;
  position: fixed;
  height: 17%;
  width: 58%;
  padding: 1% 1% 1% 1%;
  border-width: 1px; }
  .news-container a {
    padding-left: 10px;
    color: gray;
    text-decoration: none; }

.news-container-border {
  position: relative;
  padding: 1% 1% 1% 1%;
  background-color: red;
  border-style: solid;
  border-width: 1px; }

.news-container-box {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background-color: cyan;
  padding: 1%;
  border-style: solid;
  border-width: 1px; }

.news-item {
  position: relative;
  background-color: black;
  text-align: left;
  border-style: solid;
  border-width: 1px; }

.news-img {
  border-style: solid;
  border-width: 1px;
  height: 6em; }

[role="contentinfo"] {
  clear: both;
  border-style: none;
  border-width: 1px;
  color: gray;
  font-size: 80%;
  top: 95%;
  height: 5%;
  position: fixed;
  width: 59%;
  padding: 0.5%; }
  [role="contentinfo"] a {
    color: gray;
    text-decoration: none; }

.logo {
  background-image: url("/logo.png");
  background-repeat: no-repeat;
  background-size: 40vh; }