* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url(Fonts/OpenDyslexic-Regular.woff2);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url(Fonts/OpenDyslexic-Bold.woff2);
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url(Fonts/OpenDyslexic-Italic.woff2);
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url(Fonts/OpenDyslexic-BoldItalic.woff2);
  font-weight: bold;
  font-style: italic;
}
body {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  margin: 0;
  background: #90fbe0;
  color: #253238;
  background-image: url("/images/SwampBackground.png");
  background-color: #6fbDAA;
  background-repeat:no-repeat;
  background-size: cover;
}
header {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  background: linear-gradient(120deg, #81e1c9, #008c6d);
  color: #003c2c;
  padding: 5px;
  text-align: center;
  opacity: 0.87;
}
main {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 20px;
}

section {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  background: #fff9ce;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  opacity: 0.85;
}

section h1 {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  font-weight: bold;
  font-style: italic;
  margin-top: 0;
  color: #008c6d;
}

section h2 {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  font-weight: bold;
  margin-top: 0;
  color: #008c6d;
}

section h3 {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  font-size: medium;
  margin-top: 0;
  color: #008c6d;
}
footer {
  font-family: 'OpenDyslexic', Fallback, sans-serif;
  padding: 15px;
  text-align: center;
  background: #6fbDAA;
  font-size: 0.9rem;
}


ul.horizontal-list {
  background: linear-gradient(120deg, #81e1c9, #008c6d);
  display: flex; /* Makes the list items arrange horizontally */
  justify-content: center; /* Centers the items within the ul container */
  list-style-type: none; /* Removes default bullet points */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
}

ul.horizontal-list li {
  padding: 0 10px; /* Adds spacing between items */
}
ul.horizontal-list li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.scroll-box {
    background: #f4f4f4;
    border: 2px solid rgba(0, 0, 0, 0.1);
    height:150px; /* maximum height of the box, feel free to change this! */
    width: 100%;
    padding: 15px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.absolute-image {
    position: absolute; /* This is the key property */
    top: 20px;       /* Distance from the top of the viewport */
    left: 20px;     /* Distance from the right of the viewport */
    /* You can adjust width/height as needed */
    width: auto;
    height: auto;
}
.center-image {
  display: float;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* Optional: set a width smaller than the container */
opacity: 1;
}

a {
  color: #ff7a00;
  font-weight: bold;
  font-style: italic;
}
/*unvisited link */
a:link {
  color: #ff7a00;
   font-weight: bold;
  font-style: italic;
}

/* visited link */
a:visited {
  color: #ff7a00;
   font-weight: bold;
  font-style: italic;
}

/* mouse over link */
a:hover {
  color: #006c54;
  font-weight: bold;
  font-style: italic;
}

/* selected link */
a:active {
  color: #002219;
  font-weight: bold;
  font-style: italic;
}