body {
  background: black;
  color: cadetblue;
}


@media (width >= 30em) {
  body {
    margin: 5em;
  }
}

h1 {
  color: darkviolet;
}

h1:hover {
  color: mediumvioletred;
}

h2, h3 {
  color: darkmagenta;
}

h2:hover, h3:hover {
  color: darkorchid;
}

a {
  color: mediumorchid;
}

a:visited {
  color: mediumvioletred;
}

a:hover {
  color: blueviolet;
}

div { 
  padding: 1em;
  border: 1px solid darkviolet; 
  border-radius: 8px;
}

header { 
  padding: 1em;
  background: black;
  border-radius: 8px;
  position: relative;
  margin-bottom: 4em;
}

header p {
  color: cyan;
}

header::after{
  content: '';
  border-radius: 8px;
  position: absolute;
  height: 100%;
  width: 100%;
  background: darkviolet;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1; 
  padding: 10px;
  filter: blur(1.5rem);
  opacity: 0.5;
}

p:hover, li:hover {
  color: cyan;
}

#blackcat {
  display: block;
  margin: auto;
}