html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
}
h1 {
  background-color: #777;
  color: #c0fefe;
  padding: 15px 35px;
  text-transform: uppercase;
}
h2 {
  background-color: #222;
  color: #c0fefe;
  padding: 15px 35px;
}
ul {
  font-family: monospace;
  font-size: 11pt;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
ul li:before {
  font-size: 16px;
  content: '⚙️';
  display: inline-block;
  width: 25px;
}
ul li:nth-of-type(even):before {
  content: '🐛';
}
img {
  width: 320px;
}
figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 600px;
  position: relative;
}
figcaption {
  font-weight: bold;
  font-size: 10.5pt;
}
figcaption.destruction {
  transform: rotate(60deg);
  position: absolute;
  right: -79px;
  top: 103px;
}
a {
  font-family: sans-serif;
  font-size: 10pt;
}
a, a:visited {
  color: #d80cd8;
}
p {
  max-width: 600px;
  padding: 5px 35px;
}
section, nav {
  background: #4321;
}
nav {
  max-width: 400px;
  float: right;
}
nav a {
  font-size: 13pt;
}
main, nav {
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}