:root {
  --yellow: #eec600;
  --black: #282828;
}
html {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-image: url(), linear-gradient(207deg, #e83d42, #1d47d9);
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  background-position: fixed;
  letter-spacing: -1px;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 5px 0;
}
.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}
.item p {
  margin: 0 0 5px 0;
}
.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
.logo {
  grid-column: span 2;
  order: 2;
}
.nav {
  grid-column: span 8;
  order: 1;
}
.content {
  grid-column: 1 / -1;
  order: 3;
}
