* {
  box-sizing: border-box;
  margin: 0;
}
body {
  background: #222;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0 1rem;
}
.container {
  max-width: 900px;
  border-radius: 1.5rem;
  overflow: hidden;
  margin: 2rem auto;
  border: 2px solid #000;
}
header {
  background-color: rgba(140, 147, 167, 0.5);
}
header h1 {
  letter-spacing: 0.15rem;
}
main {
  background-color: rgba(177, 183, 199, 0.5);
}
header,
main {
  padding: 1rem;
}
nav {
  height: 100%;
}
header nav ul {
  list-style: none;
}
nav a {
  text-decoration: none;
  color: inherit;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.gap {
  gap: 1rem;
}