/* Reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1.2;
}
ol { 
  padding-left: 1.4em;
  list-style: decimal;
}
ul {
  padding-left: 1.4em;
  list-style: square;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
} 
/* End reset browser styles */

html {
  text-align: center;
  background-color: rgb(174,198,207);
}

body {
  background-color: rgb(255,255,255);
  border: 3px solid rgb(75,75,75);
  box-shadow: 0 0 15px 5px rgba(44,82,100,.75);
  max-width: 760px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
}

h1 {
  font-size: 2.5em;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  color: rgb(0, 0, 139); /* Darker blue text */
  background-color: rgb(173, 216, 230); /* Lighter blue background */
  padding: 5px 15px 2px 15px;
  margin: 0 -15px 20px -15px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Adds a shadow effect */
  box-shadow: 0 0 15px rgba(173, 216, 230, 0.8); /* Light blue glow */
  border-radius: 15px; /* Rounded corners */
}

h2 {
  font-size: 1.5em;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  color: rgb(54, 113, 206); /* A blue shade for the text */
  border-top: 3px dotted rgb(100, 150, 200); /* Lighter blue dotted border */
  border-bottom: 3px dotted rgb(100, 150, 200); /* Lighter blue dotted border */
  padding-top: 10px; /* More space above the text */
  padding-bottom: 10px; /* More space below the text */
  margin: 30px 0 5px 0;
  text-align: center; /* Center the text */
  overflow: hidden;
}

/* Sidebar styling */
.sidebar {
  float: left;
  width: 250px; /* Adjust width as needed */
  padding: 15px; /* Keeps the internal padding as is */
  background-color: #d6e7f3; /* Lighter blue background for sidebar */
  border: 1px solid #ddd;
  margin-left: 30px; /* Increases space between sidebar and content on the left */
  margin-top: 30px; /* Adds space above the sidebar (between the first h2 and sidebar) */
  margin-right: 30px; /* Adds space between the sidebar and adjacent content on the right */
  border-radius: 8px; /* Rounded corners for the sidebar */
}

/* Mobile view adjustments (iPhone and other small screens) */
@media (max-width: 767px) {
  .sidebar {
    float: none;
    width: 100%; /* Make the sidebar full-width */
    margin-left: 0; /* Remove any left margin */
    margin-right: 0; /* Remove any right margin */
    padding-left: 10px; /* Optional: add some padding for better spacing */
  }
}

/* Sidebar heading and list styling */
.sidebar h3 {
  font-size: 1.3em;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: black;
  text-align: left;
  padding: 8px 12px;
  margin: 2px -10px 15px -10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.sidebar-list {
  list-style: square outside;
  font-weight: bold;
  padding-left: 20px;
  margin: 0;
  text-align: left;
  color: rgb(0, 0, 139); /* Darker blue text */
}

.sidebar-list li {
  margin-bottom: 8px;
}

.nobreak {
  word-break: keep-all;
  white-space: nowrap;
}

.nobreak-red {
  white-space: nowrap;
  color: red;
}

p {
  margin: 10px 0;
}

/* This style controls the text and image */
/* This style controls the text and image */
.large-text {
  font-size: 1.5em; /* Increase the font size */
  line-height: 1.8em; /* Add some line height for better readability */
  margin: 10px 0; /* Space around the text */
  margin-top: 30px; /* Add space above the text to align with the sidebar */
  text-align: left; /* Ensure text aligns to the left side */
  color: rgb(54, 113, 206); /* Optional: Match with the theme color */
  word-break: keep-all; /* Prevent words from breaking */
  padding-left: -5px; /* Reduced padding on the left side to minimize white space */
  padding-right: 15px; /* Keep some space on the right side for balance */
  margin-left: 10px; /* Add space on the left side (aligning with sidebar space) */
  margin-top: 20px; /* Adjust top margin to create more space from the image */
}

/* This style applies to the image */
.large-img {
  float: right; /* Float the image to the right */
  margin-left: 10px; /* Space between the image and text */
  margin-right: 10px; /* Space between the image and text on the right */
  margin-bottom: 20px; /* Increased space between the image and text below */
  margin-top: 10px; /* Space between the top of the image and the text */
  padding-left: 10px; /* Optional: Adds some internal padding to the left of the image */
  display: block; /* Ensures the image behaves like a block element */
  max-width: 100%; /* Make sure the image is responsive */
}
.large-text strong {
  color: rgb(255, 0, 0); /* Make the bold text stand out more */
  font-size: 1.6em; /* Slightly increase the bold text */
}