body {
  background: #eee;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
}

/* TOP BAR */
.topbar {
  background: #ccc;
  padding: 8px;
  display: flex;
  gap: 20px;
  font-size: 14px;
}

/* HERO */
.hero {
  display: flex;
  justify-content: space-between;
  padding: 40px;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
}

.hero-img img {
  width: 150px;
}

/* QUICK LINKS */
.quick {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.quick a {
  border: 2px solid black;
  padding: 10px;
  text-decoration: none;
  color: black;
}

/* CARDS */
.projects {
  padding: 40px;
}

.card {
  border: 2px solid black;
  width: 300px;
  background: white;
}

.card-top {
  background: #ccc;
  padding: 5px;
  font-size: 12px;
}

.card img {
  width: 100%;
}

.card-body {
  padding: 10px;
}

.rating {
  font-family: monospace;
}

/* BLOG */
.blog {
  padding: 40px;
}

.mini-card {
  border: 2px solid black;
  padding: 15px;
  background: white;
}