* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-right: 1rem;
}
header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
a {
  text-decoration: none;
}
.div-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
div {
  position: relative;
  margin-right: 1rem;
}
button {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: pink;
  border-radius: 2px;
  border: none;
}
.button-section {
  position: relative;
}
#dialog-message {
  border: none;
  position: absolute;
  top: 20%;
  left: 45%;
  padding: 0.5rem;
  border-radius: 5px;
}
/* h1::before {
  content: "";
  display: inline-block;
  border: 1.5px solid pink;
  width: 50px;
  position: relative;
  bottom: 10px;
} */
h1::before {
  content: "";
  display: block;
  border: 1.5px solid pink;
}
li::before {
  content: "❤ ";
  color: rgb(165, 80, 31);
  font-size: 1.3rem;
  filter: drop-shadow(0.5px 0.5px 1px black);
}
li::after {
  content: " ★";
  color: gold;
  font-size: 1.3rem;
  filter: drop-shadow(0.5px 0.5px 1px black);
}
a:link {
  color: black;
}
a:nth-child(odd) {
  background-color: rgba(255, 192, 203, 0.598);
}
button:hover {
  content: "What's your name?";
  background-color: rgb(229, 99, 229);
  color: white;
  font-size: 0.9rem;
  box-shadow: 0px 1px 2px black;
}
a:first-child {
  color: rgb(87, 6, 248);
}
a:last-child {
  color: rgb(147, 54, 0);
}
body :not(button) {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
div::before {
  content: "";
  border: 1px dashed pink;
  padding: 0.5rem;
  position: absolute;
  width: 100%;
}
.btn:focus {
  outline: 2px solid black;
  background-color: beige;
  font-size: 1rem;
}
div:nth-of-type(2) {
  background-color: blanchedalmond;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}