body {
  background-color: black;
  background-image:url("house.jpg"); 
  color: red;
  font-family: Courier;
  justify-content: center;
  align-items: center;
  text-align:center;
}

.frankie{
  top:40px;
  left:40px;
  position:absolute;
  z-index:4;
}

.sue1{
  top:380px;
  left:75%;
  width:440px;
  position:absolute;
  z-index:4;
  transform: scaleX(-1);
}

.dialogue {
  border: 4px solid #590055;
  border-style: dotted;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#FAF1A0;
  width: 700px;
  height: auto;
  margin-left: 400px; margin-right: 150px;
  top:65px;
  position:absolute;
  align-content: center;
  z-index:2;
  text-align: center;
  font-size:20px;
}
.me {
  color:#96FFBD;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#04702C;
  text-decoration:underline;
  text-decoration-color:#04702C;
}

.met {
  color:#96FFBD;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#04702C;
  text-decoration:underline;
  text-decoration-color:#04702C;
}
.met:hover {
  color:#04702C;
  background-color:#96FFBD;
  text-decoration-color:#96FFBD;

}


.her {
  color:#70041F;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#F097AC;
}

.noise {
  color:#542200;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#FC9A56;
  text-decoration:underline;
  text-decoration-color:#FC9A56;
}
.noise:hover {
  color:#FC9A56;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#542200;
  text-decoration-color:#542200;
}
.sue {
  color:#190021;
  border: 4px solid #8A8A8A;
  border-style: groove;
  border-radius: 1px;
  padding: 1rem 1.5rem;
  background-color:#D356FC;
}