/* Setting the background image, color, and other properties for the body */
body {
  background-image: url("https://www.fireworks-videos.com/wp-content/uploads/2020/05/2020-05-17_colorful-night-sky_stars-and-milky-way_2160p.jpg");
  background-color: black;
  color: azure;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  background-position: center center;
}

/* Styling for the header using Flexbox to center the content */
header {
  display: flex;
  justify-content: center;
  color: azure;
  background-color: black;
  opacity: 0.7;
  margin-top: 1%;
  margin-bottom: 3%;
  margin-right: 2%;
  margin-left: 2%;
}

/* Styling for the main content area using Flexbox to center the content */
main {
  margin-top: 2%;
  margin-bottom: 2%;
  margin-right: 2%;
  margin-left: 2%;
  display: flex;
  justify-content: center;
}

/* Styling for the artwork section using CSS Grid to arrange images in columns */
.artwork {
  display: grid;
  grid-template-columns: auto auto auto;
}

/* Styling for the user information section using CSS Grid and adding a border */
.user-info {
  margin-left: 1%;
  display: grid;
  border: 5px solid azure;
  grid-template-columns: 600px;
  grid-template-rows: 100px 200px;
}

/* Centering and styling the h2 headings */
h2 {
  text-align: center;
  color: azure;
}

/* Styling for the images with a box shadow, margin, and height */
.pics {
  margin: 20px;
  padding: 0px;
  box-shadow: 10px 10px 10px black;
  height: 325px;
}

/* Styling for the h1 heading with text effects */
h1 {
  font-weight: 900;
  text-decoration: underline;
  text-align: center;
  text-shadow: 1px 1px 5px white;
}

/* Styling for the form inputs with margins */
.inputs {
  margin-top: 5%;
  margin-bottom: 5%;
  margin-right: 5%;
  margin-left: 5%;
}

/* Styling for the extra image section to fill space and add visual interest */
.extra-image {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 1rem;
}

/* Adding a shadow effect to the extra image */
.for-shadow {
  box-shadow: 10px 10px 10px black;
}

/* Styling for the paragraph with the "joke" class */
.joke {
  font-weight: 100;
  text-shadow: none;
  text-decoration: none;
}