body {
   background-color: #E8E5DE !important;
}

.preview {
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

nav {
  color: #000 !important;
  font-family: "Playfair Display", serif; 
}

nav ul li {
  color: #000 !important;
}

nav ul li a {
  color: #000 !important;
}

.grid img {
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5 {
  color: #000 !important;
  font-family: "Playfair Display", serif !important; 
}

p {
  color: #000 !important;
  font-family: 'Crimson Text', serif !important; 
}

/* CSS for white background on form fields within #generatorform */
#generatorform input[type="text"],
#generatorform input[type="password"],
#generatorform input[type="email"],
#generatorform input[type="number"],
#generatorform input[type="date"],
#generatorform input[type="search"],
#generatorform input[type="tel"],
#generatorform input[type="url"],
#generatorform select,
#generatorform textarea {
  background-color: white;
}

.heroimage {
  max-height: 450px;
  object-fit: cover;
  width: 1024px;
}