body {
  margin: 0;
  background: #111;
  color: #ddd;

  font-family:
    Verdana,
    Arial,
    sans-serif;

  background-image:
    repeating-linear-gradient(
      45deg,
      #111,
      #111 10px,
      #151515 10px,
      #151515 20px
    );
}

.page {
  width: 900px;
  max-width: 95%;
  margin: 30px auto;

  background: #181818;
  border: 3px solid #666;
}

header {
  text-align: center;
  padding: 25px;

  background: #222;
  border-bottom: 3px solid #666;
}

header h1 {
  margin: 0;

  font-size: 32px;
  text-shadow: 2px 2px #000;
}

.subtitle {
  color: #999;
}

nav {
  background: #333;
  padding: 10px;
  text-align: center;

  border-bottom: 2px solid #666;
}

nav a {
  color: #fff;

  margin: 0 12px;

  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

.layout {
  display: grid;

  grid-template-columns:
    220px
    1fr;

  gap: 15px;

  padding: 15px;
}

.box {
  background: #222;

  border: 2px solid #555;

  margin-bottom: 15px;
  padding: 12px;

  box-shadow:
    4px 4px 0 #080808;
}

.box h2,
.box h3 {
  margin-top: 0;
}

.profile {
  text-align: center;
}

.profile-picture {
  width: 150px;
  height: 150px;

  object-fit: cover;

  border: 3px solid #777;
}

ul {
  padding-left: 20px;
}

a {
  color: #8ab4ff;
}

a:visited {
  color: #c49aff;
}

.game {
  border-bottom: 1px dashed #666;
  padding: 8px 0;
}

.post {
  border-left: 4px solid #777;
  padding-left: 12px;

  margin-bottom: 20px;
}

.date {
  color: #888;

  font-size: 12px;
}

button {
  background: #333;
  color: white;

  border: 2px outset #777;

  padding: 7px 15px;

  cursor: pointer;
}

button:active {
  border-style: inset;
}

footer {
  text-align: center;

  padding: 15px;

  border-top: 3px solid #666;

  color: #888;

  font-size: 12px;
}

@media (max-width: 700px) {

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

  aside {
    order: 2;
  }

  main {
    order: 1;
  }

}