body {
  font-family: sans-serif; 
  margin: 0;
  padding: 0;
  color: #333;
}

h1 {
  font-family: cursive;
  font-size: 3em;
  margin: 1rem 0; 
  text-align: center;
}

.topnav {
  background-color: #f1f1f1; 
  overflow: hidden; 
  padding: 0.5rem 1rem;  /* Padding top/bottom and left/right */
}

.topnav ul {
  list-style: none;
  margin: 0;
  padding:0;
  padding-left: 15%;
  padding-right:15%;
  display: flex; 
  justify-content: space-between; 
}

.topnav li {
  float: left; /* Remove for flexbox layout */
}

.topnav a {
  text-decoration: none;
  color: #333;
  padding: 0.8rem 1rem;  /* Padding top/bottom and left/right */
  display: block;
}

.topnav a:hover {
  background-color: #ddd;  /* Slight background change on hover */
}


p {
  line-height: 1.5; /* Increase line spacing for better readability */
  
  text-align: justify; /* Justify text for better flow */
  padding:2%;
}

/* Responsiveness (optional) */
@media (max-width: 768px) {
  h1 {
    font-size: 2em;
  }
  .topnav a {
    padding: 0.5rem 0.7rem;
  }
}

#intro {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
  font-size:40px;
}

#ijuhb
{
    font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
    text-align: center;
    font-size: 50px;
    padding-top: 0px;
}

img {
    width: 50%;
    display: block;
    padding:2%;
    padding-left:0;
    padding-bottom:0;
}

.text-image-container {
  display: flex; /* Use flexbox for layout */
  margin: 1rem 0; /* Margin for content separation */
}

#intro {
  flex: 1; 
  margin: 0; 
}

#nextpic{
    float: right;
    margin-right:0; 
    padding-right:0; 
    width:50px;
    
}
#nextpic img:hover {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}

#cont{
    padding-left:25%;
    padding-right:25%;
    font-size:20px;
}

#cont img {
    width: 695px;
    
}