* {
  padding:0; margin:0; box-sizing:border-box;
}
body {
  background-color: #0a0909; height:100vh; color: white; font-family:Papyrus, sans-serif; line-height:1.2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; 
}

a {
  color:white; text-decoration:none;
}

.overall-entrance-dialogue {
  display:flex; border: 1px solid grey; padding:2px; gap:5px; width:650px;
}
.overall-entrance-dialogue div {
  display:flex; flex-direction:column; gap:10px; border:1px solid grey; padding:20px; 
}
.overall-entrance-dialogue a {
  position: relative; padding-left: 15px;
}
.overall-entrance-dialogue a::before {
  content: ">";
  position: absolute;
  opacity:0;
}
.overall-entrance-dialogue a:hover::before {
  opacity: 1;
  left: -5px; 
}
.overall-entrance-dialogue a:active {
  color:red;
}




@media (max-width: 550px) {
  body {
    width:100wh;
    margin:20px;
  }
  .overall-entrance-dialogue {
    flex-direction:column;
    width:100%;
    border:none;
  }
  .overall-entrance-dialogue div {
    border:none;
    border:1px solid grey;
  }
  .pete {
    height:300px !important;
    background-size:70% !important;
    width:90% !important;
  }
}