style.css

/* CSS for styling the body */
body {
  background-image: url('/lud_background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

header {
  color: white;
  text-align: center;
  font-family: "Goudy Old Style";
  margin-top: 50px;
  background-color: rgba(225, 113, 15, 0.85);
  font-size: 50px;
}

/* CSS for styling the prompt form */
form {
  margin-top: 50px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  width:400px;
  padding:30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
  font-family: "Goudy Old Style";
  text-align: center;
  /* display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

textarea {
  padding: 10px;
  margin:10px 0;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
  border-radius:10px;
  width:80%;
}

input[type=submit] {
  padding: 10px;
  margin:10px 0;
  border:0;
  color: blue;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
  border-radius:10px;
  width:95%;
}

.character {
  display: none;
}

/* CSS for styling the options boxes */
.options {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.options-box {
  background-color: rgba(0, 0, 0, 0.85);
  border: 2px solid black;
  color: white;
  padding: 10px;
  margin: 30px;
  cursor: pointer;
  font-size: 50px
}

/* CSS for styling the dialogue box */
.dialogue-box {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  width: 50%; /* Adjust   q233434this value to change the width of the box */
  background-color: rgba(0, 0, 0, 0.75); /* Change the background color as desired */
  border: 1px solid black; /* Add a border if desired */
  padding: 20px; /* Add some padding for aesthetics */
  margin: 20px auto; /* Center the box on the page */
  text-align: left; /* Align the text to the left */
  cursor: pointer;
}

.character-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  width: 300px;
  mix-blend-mode: multiply;
  filter: contrast(1);
}

.character-name {
  /* Style the character name as desired */
  font-weight: bold;
  color: rgb(105, 255, 253);
  margin-top: 0;
  font-size: 35px;
}

.dialogue-text {
  /* Style the dialogue text as desired */
  color: white;
  font-size: 30px;
  font-family: sans-serif;
}