@font-face {
    font-family: heroes2;
    src: url(Heroes2.ttf);
}

html {
  background-image: url("lightning storm.jpg");
  background-size: cover;
}

nav, article, header, footer, section {
  background-color: black;
  color: white;
  border: double;
}

header {
  text-align: center;
  justify-content: space-between;
  display: flex;
  font-family: heroes2, "Brush Script MT", cursive;
  align-items: center;
}

header * {
  display: inline;
}

header h1 {
  font-size: xxx-large;
}

aside {
  margin-right: 10px;
  background: transparent;
}

aside p {
  margin-left:16px;
  margin-right:16px;
}

.flipme {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.gridcontainer {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gridelement {
  flex-direction: column;
  justify-content: space-around;
}

a {
  color:white;
}