body {
  font-family: Arial, sans-serif;
  min-height: 100vh; /* Ensures body fills the viewport height */
  margin: 0; /* Remove default margin */
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  background-color: #f0f8ff; /* Light blue background color */
  color: #000080; /* Dark blue text color */
  word-wrap: break-word;
}

 /* Style the header and footer to stay fixed */
header, .content, footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem; /* Add some padding for aesthetics */
  max-width: 100%;
  box-sizing: border-box;
}
  /* position: sticky;
  top: 0;
  bottom: 0; */
header, footer {
  display: flex;
  flex: 1 1 auto; /* Makes content section fill remaining space and be scrollable */
  justify-content: space-between;
  background-color: #000080; /* Dark blue background color */
  color: white;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 100%; /* Ensures the box doesn't exceed the viewport width */
  box-sizing: border-box; /* Includes padding and borders in the element's total width */
}

    /* Style the content section to be scrollable */
.content {
  flex: 1 1 auto; /* Makes content section fill remaining space and be scrollable */
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 1rem; /* Add some padding for aesthetics */
  max-width: 100%;
  box-sizing: border-box;
}
.download-button {
  text-align: center;
  margin: 10px;
  max-width: 100%;
  box-sizing: border-box;
  
}
.download-button a {
  text-decoration: none;
  color: white;
  max-width: 100%;
  box-sizing: border-box;
  
}
.download-button p {
  margin-bottom: 5px;
  max-width: 100%;
  box-sizing: border-box;
  
}
button {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s ease;
  margin: 5px;
  max-width: 100%;
  box-sizing: border-box;
  
}
button:hover {
  background-color: #0056b3;
  max-width: 100%;
  box-sizing: border-box;
  
}
/* header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  max-width: 100%;
  box-sizing: border-box;
  
}
footer {
  margin-top: auto;
  padding: 10px;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
  max-width: 100%;
  box-sizing: border-box;
  
} */
pre {
  max-width: 100%; /* Ensures the box doesn't exceed the viewport width */
  box-sizing: border-box; /* Includes padding and borders in the element's total width */
  overflow-x: auto; /* Adds horizontal scrolling */
  border-radius: 10px; /* Rounded corners */
  background-color: #f0f8ff; /* Light blue background color for pre elements */
  color: #000080; /* Dark blue text color for pre elements */

}
@media only screen and (max-width: 768px) {
  /* Mobile-specific styles for the header */
  header {
  margin: 0; /* Remove excessive margins */
  padding: 10px; /* Adjust padding if needed */
    /* Other mobile-specific styles */
  max-width: 100%; /* Ensures the box doesn't exceed the viewport width */
  box-sizing: border-box; /* Includes padding and borders in the element's total width */
  font-family: Arial, sans-serif;
  justify-content: center;
  }
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #000080; /* Dark blue background color */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #007bff; /* Blue active link color */
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
  img {
    width: 100%;
  }