body {
  margin: 0;
}

main {
  margin-bottom: 3rem;
}

a:any-link {
  color: hsl(221, 100%, 55%);
  font-weight: 550;
}

a:hover {
  text-decoration: underline;
}

@keyframes highlight-target {
  0% {
    background-color: yellow;
  }
  60% {
    background-color: yellow;
  }
  100% {
    background-color: unset;
  }
}

:target {
  scroll-margin-top: 120px;
  animation: highlight-target 3s ease-out;
}

#cost_of_poor_software_quality:target {
  scroll-margin-top: 200px;
}

#cost_of_technical_debt:target {
  scroll-margin-top: 240px;
}

strong {
  color: hsl(221, 100%, 35%);
}

blockquote {
  background-color: hsl(221, 80%, 98%);
}

/* move the name following a quote closer to it and align it */
blockquote + div.quote-name p {
  margin-top: 0;
  margin-left: 1.5em;
}

/* navbar styling */
header {
  width: 100%;
  display: flex;
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 6px 8px hsla(0, 0%, 0%, 37.1%);
}

nav {
  margin: auto;
  padding: 1rem;
  font-size: 1.8rem;
}

nav > ul {
  display: inline;
}

nav > ul > li {
  margin: 0 0.35rem;
}

nav a {
  padding: 0.2em;
}

nav a.active,
nav a:hover {
  background-color: white;
  border-radius: 0.2em;
  filter: drop-shadow(0 0 2px hsla(221, 80%, 70%, 0.6));
}

nav a:hover {
  text-decoration: none;
  filter: drop-shadow(0 0 3px hsla(221, 100%, 60%, 1));
  /* background-color: hsla(221, 0%, 75%, 0.3); */
}

/* show images in rows */
.image-row {
  display: flex;
  column-gap: 1em;
}

.image-row .image-box {
  border: solid 1px hsla(0, 0%, 0%, 37.1%);
  box-shadow: 3px 3px 5px hsla(0, 0%, 0%, 37.1%);
}

.image-row .image-box p {
  margin: 0;
  padding: 0;
}

.image-row .image-box p + p {
  padding: 0.25em 1em;
}