/* Merged and cleaned styles */

body {
  margin: 0; /* Remove default body margin */
  font-family: Raleway, sans-serif;
  overflow-x: hidden; /* Prevent horizontal scroll on the body */
  user-select: none; /* From styles.css */
  /* REMOVED: width: 105%; - This caused horizontal scrolling */
}

/* Main container for centered content */
.main-container {
    max-width: 1200px; /* Max width for your main content */
    margin: 0 auto;   /* Center the container horizontally */
   
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
}

/* Header (now full width) */
#header {
    width: 100%; /* Takes full width outside the container */
    background-color: #00B3C6; /* Match topnav color for consistent background */
    /* Add padding or margin inside header if needed to space logos and nav */
    padding: 0; /* Adjust as needed */
    margin: 0;
    overflow: hidden; /* Contain floats inside the header if any */
}

/* Top Navigation (now within full-width header) */
.topnav {
  overflow: hidden; /* Keep this for float containment */
  background-color: #00B3C6; /* Keep one background color */
  width: 100%; /* Take full width of the header */
  /* Adjust padding here if needed for spacing inside the nav bar */
}

/* Default state for links inside the navigation bar (Large Screens) */
.topnav a {
  float: left; /* Keep floats for horizontal layout */
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px; /* Combined padding from styles.css */
  text-decoration: none;
  font-size: 17px;
}

/* Hide the link that should open and close the topnav on small screens by default */
.topnav .icon {
  display: none;
}

/* Dropdown container */
.dropdown {
  float: left; /* Keep floats for horizontal layout */
  overflow: hidden;
}

/* Style the dropdown button */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px; /* Combined padding */
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #b8e7f1; /* from styles.css */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* Ensure dropdown is above other content */
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none; /* Stack vertically */
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add hover effects */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #0096b5; /* from styles.css */
  color: white;
}

.dropdown-content a:hover {
  background-color: #7ee3ff; /* from styles.css */
  color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


/* Footer (now full width) */
.mainfooter {
    width: 100%; /* Takes full width outside the container */
    /* Remove default footer position/float/clear if any exist elsewhere */
}

#footer {
    /* Remove position: relative and top - use margin-top for spacing */
    margin-top: 85px; /* Add space above the footer */
    float: none; /* Remove float */
    clear: none; /* Remove clear */
    text-align: center;
    font-size: 130%; /* Default font size */
    line-height: 2em; /* Adjusted line height */
    width: 100%; /* Take full width of the mainfooter */
    border-top: 3px solid #D9D93C;
    padding: 1em 0; /* Add vertical padding inside the footer */
    height: auto; /* Let height be determined by content */
    /* Background color if needed, example: background-color: #f0f0f0; */
}

#footer a{
    text-decoration: none;
	font-family: 'Give You Glory', cursive;
	color: #D14825; /*orange*/
    font-size: 1em; /* Relative to parent font size */
}

#footer a:hover {
    text-decoration: underline;
}


/* Main content block */
#content {
    position: relative; /* Keep if needed for child positioning */
    /* Remove 'top', using margin-top on .main-container or header padding for spacing */
    /* top: 50px; REMOVED */
    font-family: "Finlandica",sans-serif;
    color: #333;
    font-style: normal;
    font-weight: normal;
    font-size: 130%;
	line-height: 2em;
    /* These margins provide inner spacing within the centered main-container */
    margin-left: 15%;
    margin-right: 15%;
    /* Add some top margin if .main-container doesn't have it */
    margin-top: 20px; /* Example spacing below header/above content */
    margin-bottom: 20px; /* Example spacing below content/above footer */
}

/* Global Image Styles */
img {
   display: block;
   /* Center images by default if they are block elements */
   margin-left: auto;
   margin-right: auto;
   max-width: 100%; /* Ensure images are responsive and don't overflow their container */
   height: auto;    /* Maintain aspect ratio */
   border: none; /* Default border */
   /* background-color: #9fe9f2; <-- Maybe not needed for all images? Commented out */
}

/* Logo specific styles */
#smalllogo, #largelogo {
    /* Logos are inside #header. Let them be block elements and centered within it */
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* If logos should take up specific width or float next to nav, adjust here */
}


/* Award Image Specific Style */
figure img {
   /* If you want the award image to have a specific max width */
   max-width: 300px; /* Example: Limit the width */
   /* Or let it be controlled by the general img rule (max-width: 100%) */
   /* border=2 attribute in HTML is invalid, use CSS border */
   border: 2px solid grey; /* Example border */
}


/* H-tags */
H1  {
    font-family: "Shadows Into Light Two", cursive;
    Font-Size : 2.5em;
    /* Remove percentage margins from text elements inside #content */
    margin-left: 0; /* Rely on #content margins */
    margin-right: 0;
    font-weight: bold;
    text-align: center;
}

H2, H3, H4, H5 {
    font-family: 'Raleway', sans-serif;
    /* Adjust or remove percentage margins */
    margin-left: 0; /* Rely on #content margins */
    text-align: left;
}
H2 { Font-Size : 1.4em; }
H3 { Font-Size : 1.2em; }
H4 { Font-Size : 1.1em; }
H5 { Font-Size : 1.0em; }


/* Paragraphs and specific text blocks */
p.maintext, p.techtext, .functions-list, .snippet, p.reference, pre, pre.code {
    /* Remove problematic width and margin rules */
    width: auto; /* Let width be determined by container */
    margin-left: 0; /* Rely on #content margins */
    margin-right: 0; /* Rely on #content margins */
    /* Add padding if inner indentation is needed */
    /* padding-left: 20px; */
}

p.maintext  {
	font-family: 'Raleway', sans-serif;
	font-size: 1.4em;
	line-height: 150%;
	text-align: left;
	Margin-top: 2%;
	color: #111;
}

p.techtext {
    /* position: relative; top: 5px; REMOVED */
	margin-top: 10%;
    font-family: "Raleway",sans-serif;
	Font-Size : 1.0em;
    color: #333;
    font-style: normal;
    font-weight: normal;
}

p.reference {
    font-size: 1.1em;
	font-weight: 400;
    color:#333;
}


pre{
    font-family: 'Finlandica', sans-serif;
    font-size: .9em;
	line-height:1.5em; /* Adjusted line height for readability */
    font-weight: 700;
    color:#008604;
    overflow-x: auto; /* Add horizontal scroll for pre if content is too wide */
    white-space: pre-wrap; /* Allow long lines to wrap */
    word-wrap: break-word; /* Break long words */
}

pre.code{
    font-family: 'courier', monospace; /* Use monospace for code */
    font-size: .9em;
	line-height:1.5em; /* Adjusted line height */
    font-weight: bold;
    color:#008604;
    overflow-x: auto; /* Add horizontal scroll for pre if content is too wide */
    white-space: pre-wrap; /* Allow long lines to wrap */
    word-wrap: break-word; /* Break long words */
}


/* --- Responsive Navigation Styles (kept from responsive.css) --- */

/* When the screen is less than 800px wide */
@media screen and (max-width: 799px) {
    /* Show small logo, hide large logo */
    #smalllogo { display: block; }
    #largelogo { display: none; }

    /* Hide large screen nav links */
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    /* Show the hamburger icon */
    .topnav a.icon {
        float: right;
        display: block;
    }

    /* When the responsive class is added by JS */
    .topnav.responsive {
        position: relative; /* Needed for icon absolute positioning */
        /* You might want to give the responsive nav a background or border */
        background-color: #00B3C6; /* Ensure background when expanded */
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none; /* Stack links vertically */
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {
        float: none; /* Stack dropdown vertically */
    }
    .topnav.responsive .dropdown-content {
        position: relative; /* Position relative within the stacked dropdown */
        /* Remove min-width if you want it to take the full width of the parent dropdown */
        /* min-width: none; */
        background-color: #e0f7fa; /* Lighter background for sub-items */
    }
     .topnav.responsive .dropdown .dropbtn {
        display: block; /* Make button a block element */
        width: 100%; /* Make button full width */
        text-align: left;
     }


    /* Small screen content margins (relative to main-container) */
    #content {
        margin-left: 7%; /* Example adjustment for small screens */
        margin-right: 7%; /* Example adjustment for small screens */
        font-size: 1em; /* Example font size adjustment */
        line-height: 1.6em; /* Example line height adjustment */
    }
     h1 { font-size: 2em; } /* Example font size adjustment */


    /* Small screen footer font size */
    #footer {
        font-size: 1em; /* Adjusted for small screens */
        line-height: 2em; /* Adjusted for small screens */
        margin-top: 40px; /* Less space above footer on small screens */
    }
}


/* --- Larger screen styles (kept from responsive.css) --- */
@media screen and (min-width: 800px) {

    /* Show large logo, hide small logo */
    #smalllogo { display: none; }
    #largelogo { display: block; }

    /* Large screen navigation links are block/float by default (see above) */
    /* Hide the icon on large screens */
    .topnav a.icon { display: none; }


    /* Large screen content margins (relative to main-container) */
    #content {
        margin-left: 5%; /* Original margin */
        margin-right: 5%; /* Original margin */
        font-size: 1.3em; /* Original font size */
        line-height: 2em; /* Original line height */
    }
    h1 { font-size: 2.5em; } /* Original font size */


    /* Large screen footer font size */
    #footer {
        font-size: 1.3em; /* Original font size */
        line-height: 4em; /* Original large line height */
        margin-top: 85px; /* Original space above footer */
    }

}