/* ===== Root and Base ===== */

/* ==================== */
/* ROOT & BASIC SETTINGS */
/* ==================== */
/* Define global CSS variables and default settings for the document */
:root {
    --primary-font: sans-serif; /* Sets the primary font to sans-serif for consistent typography */
    color-scheme: light; /* Specifies the preferred color scheme for the browser */
    supported-color-schemes: light; /* Indicates supported color schemes (light mode only) */
    background-color: WhiteSmoke; /* Sets the default background color for the entire document */
}

/* Reset margins and center content for html and body */
html {
    margin: 0 auto; /* Centers content horizontally */
    text-align: left; /* Aligns text to the left */
    max-width: 782px; /* Limits the maximum width of the content area */
    background-color: WhiteSmoke; 
	padding:0 15;
}

/* Styling for the body element, setting up a flexible centered layout */
body {
    margin: 0 auto; /* Centers the body content */
    padding: 20px; /* Adds padding for spacing */
    font-family: var(--primary-font); /* Uses the defined primary font */
    display: flex; /* Enables flexbox for layout */
    flex-direction: column; /* Arranges children in a column */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
}

/* Responsive padding adjustment for smaller screens */
@media screen and (max-width: 350px) {
    body {
        padding: 5px; /* Reduces padding on very small screens to save space */
    }
}

/* Prevent text size adjustments on mobile browsers for consistent rendering */
* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* ==================== */
/* LINK STYLES */
/* ==================== */
/* Styling for different states of hyperlinks to maintain consistent appearance */
a:link {
    color: #555555 !important; /* Default link color */
    text-decoration: none;
    transition: color 0.2s ease; /* Smooth color transition */
}

a:visited {
    color: #555555 !important; /* Pink for visited links */
    opacity: 0.8; /* Slightly transparent */
}

a:hover {
    color: #ba1877 !important; /* Brighter pink on hover */
    text-decoration: underline;
}

a:active {
    color: #8a0d4d !important; /* Darker pink when active */
}

/* ==================== */
/* PAGE STRUCTURE */
/* ==================== */
/* Styling for the home page container */
#home {
    display: flex; /* Flexbox layout for home page */
    flex-direction: column; /* Vertical arrangement of elements */
    justify-content: flex-start; /* Aligns content to the top */
    align-items: flex-start; /* Aligns content to the left */
    max-width: 782px; /* Matches max-width of html */
    width: 100%; /* Full width within max-width */
    box-sizing: border-box; /* Includes padding/border in width calculations */
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes default padding */
    min-height: 100vh; /* Ensures the container spans the viewport height */
}

#home > * {
    text-align: left; /* Ensures all children are left-aligned */
    align-self: flex-start; /* Aligns children to the start of the flex container */
}

/* Styling for the map page container */
#mappage {
    display: flex; /* Flexbox layout for map page */
    flex-direction: column; /* Vertical arrangement */
    align-items: center; /* Centers content horizontally */
    justify-content: flex-start; /* Aligns content to the top */
    min-height: 100vh; /* Full viewport height */
    background-color: WhiteSmoke; /* Matches root background */
    max-width: 780px; /* Consistent max-width */
    width: 100%; /* Full width within max-width */
    margin: 0 auto; /* Centers the container */
    box-sizing: border-box; /* Includes padding/border in width */
    position: relative; /* Provides positioning context for children */
	display: inline; /* Inline display for menu items */
}

#mappage h2{
	display:inline;
	padding-right:15px;
	
	
}

/* Override parent section margins to ensure no gaps between map, phenomenonInfo, and phenomena */
#mappage section.odd,
#mappage section.even {
    margin: 0 !important; /* Removes margins to eliminate gaps */
    padding: 0 !important; /* Removes padding for direct stacking */
}

#mappage > * {
    align-self: flex-start !important; /* Forces children to align left */
    margin-left: 0 !important; /* Removes left margin for consistency */
}

/* Styling for the map element */
#map {
    width: 100%; /* Full width of the parent container */
    height: 49vh; /* Takes up 49% of the viewport height */
    padding: 0; /* No padding to maximize map area */
    max-width: 780px; /* Matches phenomena containers for alignment */
    align-items: center; /* Centers content within the map */
    max-height: 450px; /* Caps the map height */
    min-height: 80px; /* Ensures a minimum height */
    font-size: 10px; /* Small font size for map text */
    box-sizing: border-box; /* Includes borders/padding in size */
    margin: 0 auto; /* Centers the map */
}

/* Styling for instructions text above the map */
.instructions {
    width: 100%; /* Full width to match map */
    max-width: 780px; /* Consistent max-width */
    margin: 5px 0; /* Minimal vertical spacing */
    font-size: 12px; /* Matches original inline style */
    line-height: 20px; /* Comfortable line spacing */
    color: #555555; /* Consistent text color */
    text-align: left; /* Left-aligned text */
}

/* ==================== */
/* PHENOMENA & PHENOMENON INFO CONTAINERS - FIXED LAYOUT */
/* ==================== */
/* Βασικό styling για το phenomena container */
#phenomena {
    padding: 5px; /* Consistent padding for content spacing */
    width: 100%; /* Full width to match map */
    max-width: 780px; /* Matches map for alignment */
    min-height: 33vh; /* Fixed height to prevent expansion */
    max-height: 33vh; /* Caps height to prevent expansion */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    overflow-y: auto; /* Enables vertical scrolling for dynamic content */
    font-size: 12px; /* Consistent font size */
    text-align: left; /* Left-aligned text */
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #ba1877 #f1f1f1; /* Scrollbar color scheme */
    box-sizing: border-box; /* Includes padding in width */
    margin: 0 auto; /* Centers the container */
    background-color: WhiteSmoke; /* Matches root background */
    order: 2; /* Places below phenomenonInfo in flex layout */
	
}





/* Βασικό styling για το phenomenon info container */
#phenomenonInfo.container {
    padding: 5px; /* Consistent padding for content spacing */
    width: 100%; /* Full width */
    max-width: 780px; /* Matches map for alignment */
    min-height: 12vh; /* Fixed height to prevent expansion */
    max-height: 12vh; /* Caps height to prevent expansion */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    overflow-y: auto; /* Enables vertical scrolling for dynamic content */
    font-size: 12px; /* Consistent font size */
    text-align: left; /* Left-aligned text */
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #ba1877 #f1f1f1; /* Scrollbar color scheme */
    box-sizing: border-box; /* Includes padding in width */
    margin: 0 auto; /* Centers the container */
    background-color: WhiteSmoke; /* Matches root background */
    align-self: center !important; /* Ensures centering */
    scroll-behavior: smooth; /* Smooth scrolling */
    overscroll-behavior: contain; /* Prevents scroll chaining */
    order: 1; /* Places directly below map, before phenomena */
}

/* Scrollbar styling for WebKit browsers (Chrome, Safari) */
#phenomena::-webkit-scrollbar,
#phenomenonInfo.container::-webkit-scrollbar {
    width: 8px; /* Narrow scrollbar */
    height: 8px; /* For horizontal scrollbar if needed */
}

#phenomena::-webkit-scrollbar-track,
#phenomenonInfo.container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light track background */
    border-radius: 6px; /* Rounded edges */
}

#phenomena::-webkit-scrollbar-thumb,
#phenomenonInfo.container::-webkit-scrollbar-thumb {
    background: #ba1877; /* Pink thumb */
    border-radius: 6px; /* Rounded thumb */
    border: 1px solid #f1f1f1; /* Border for visibility */
}

#phenomena::-webkit-scrollbar-thumb:hover,
#phenomenonInfo.container::-webkit-scrollbar-thumb:hover {
    background: #f21f9b; /* Lighter pink on hover */
}

/* ==================== */
/* PHENOMENA LIST */
/* ==================== */
/* Λίστα φαινομένων - Διορθωμένη */
.phenomena-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-start;
    align-items: center;
    width: 100%; /* Full width to match container */
}



/* Εδω είναι Οι τίτλοι των ομάδων των φαινομένων Individual phenomena list items */
.phenomena-list li {
    display: inline-block;
    margin: 0 0;
    font-size: 12px;
    white-space: nowrap; /* Αποτρέπει αναδίπλωση */
    box-sizing: border-box;
    float: none !important; /* Overrides float */
    width: auto !important; /* Auto width */
    text-align: left; /* Left-aligned text */
    margin-bottom: 4px;
}

/* Μείωση κενού μεταξύ τίτλων φαινομένων και λιστών */
.content-child h2 {
    margin-bottom: 10px !important; /* Small bottom margin */
    line-height: 1.2; /* Tight line height */
    color: #555555 !important;
}

.content-child h3 {
    margin-bottom: 10px !important; /* Small bottom margin */
    line-height: 1.2; /* Tight line height */
    color: #555555 !important;
}

.content-child h4 {
    margin-bottom: 4px !important; /* Small bottom margin */
    line-height: 1.2; /* Tight line height */
    color: #555555 !important;
}

.content-child .phenomena-list {
    margin-top: 0 !important; /* Removes top margin */
}

/* Εδώ είναι το link για κάθε ένα φαινόμενο */
.content-child a {
    margin: 5px 5px; /* Margin for spacing */
    color: #555555 !important; /* Matches parent color */
    text-decoration: none; /* No underline */
    transition: color 0.2s ease; /* Smooth color transition */
}

/* Ensure consistent hover effect for phenomena links */
.content-child a:hover {
    color: #ba1877 !important; /* Matches a:hover for consistent hover effect */
    text-decoration: underline; /* Matches a:hover */
}

/* More specific rule to ensure hover effect in #phenomena */
#phenomena .content-child a:hover {
    color: #ba1877 !important; /* Override inline styles or JavaScript-added styles */
    text-decoration: underline; /* Ensure underline on hover */
}

/* ==================== */
/* GENERAL CLASSES */
/* ==================== */
/* Εδώ είναι τα ονόματα των χωριών - Styling for elements with the 'odd' class */
.odd {
    max-width: 100%; /* Full width */
    text-align: left; /* Left-aligned text */
    background-color: #f5f5f5; /* Slightly darker than WhiteSmoke */
    color: #555555; /* Matches link color */
    font-size: 12px; /* Matches phenomenonInfo font size */
    padding: 0px 0px; /* Minimal padding */
    white-space: normal; /* Allows text wrapping */
	
}

/* Styling for even sections within phenomenon info (e.g., content or details) */
.even {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertical arrangement */
    max-width: 100% !important; /* Full width */
    align-items: flex-start; /* Left-align content */
    padding: 0px 0px; /* Minimal padding */
    background-color: WhiteSmoke; /* Matches container background */
    white-space: normal; /* Allows text wrapping */
}

/* Styling for content child elements (likely the title of phenomena groups) */
.content-child {
    width: 100%; /* Full width to fit within parent */
    margin: 0; /* No margins to keep the element flush with its container */
    text-align: left; /* Left-aligned text for consistency */
    color: #555555 !important;
}

/* Ensure h3 (potential title element) has no default margins to avoid extra gaps */
h3 {
    display: inline-block; /* Maintains inline-block for layout */
    padding-top: 10px;
    padding-right: 20px; /* Original padding for spacing */
    text-align: left; /* Left-aligned text */
    max-width: 100%; /* Full width within parent */
    margin: 0; /* Removes default browser margins */
    color: #555555;
}

/* ==================== */
/* STUDY AREAS LIST */
/* ==================== */
/* Container for the study areas section, which holds the list of areas */
#study-areas {
    width: 100%; /* Ensures the container spans the full width of its parent */
    padding-top: 20px !important; /* Adds top padding for spacing above the list */
}

/* Styling for the areas list, displayed as a multi-column layout */
#study-areas #areas_list {
    list-style-type: none !important; /* Removes default list markers for a clean look */
    padding: 0 !important; /* Removes padding to align with container edges */
    margin: 10px auto !important; /* Centers the list with 10px top/bottom margins */
    width: 100% !important; /* Full width within the parent container */
    max-width: 780px; /* Matches the max-width of other page elements */
    columns: 4 !important; /* Displays list items in 4 columns for large screens */
    column-gap: 20px !important; /* Sets 20px spacing between columns */
    counter-reset: area-counter !important; /* Initializes a counter for custom numbering */
}

/* Styling for individual list items within the areas list */
#study-areas #areas_list li {
    display: list-item !important; /* Ensures proper list item rendering */
    padding-left: 25px !important; /* Space for custom numbering on the left */
    margin: 0 0 5px 0 !important; /* Adds 5px bottom margin for item spacing */
    text-align: left !important; /* Aligns text to the left */
    font-size: 12px !important; /* Sets font size for readability */
    line-height: 1 !important; /* Tight line height for compact display */
    position: relative !important; /* Allows positioning of the ::before pseudo-element */
    break-inside: avoid !important; /* Prevents column breaks within list items */
    page-break-inside: avoid !important; /* Prevents page breaks within items for print */
}

/* Custom numbering for study areas list items using a pseudo-element */
#study-areas #areas_list li::before {
    content: counter(area-counter) "." !important; /* Adds a number followed by a dot */
    counter-increment: area-counter !important; /* Increments the counter for each item */
    position: absolute !important; /* Positions the number relative to the list item */
    left: 0 !important; /* Aligns the number to the left edge */
    top: 0 !important; /* Aligns the number to the top of the item */
    color: #555555 !important; /* Matches the link color for consistency */
    width: 20px !important; /* Fixed width for number alignment */
    text-align: right !important; /* Right-aligns the number within its width */
    padding-right: 5px !important; /* Space between the number and list item text */
    font-size: 12px; /* Matches the list item font size */
}

/* Fallback styling for any list items directly under #study-areas (not in #areas_list) */
#study-areas li {
    width: 100%; /* Ensures full width to prevent layout issues */
    padding-top: 0px !important; /* Removes top padding for consistency */
    list-style: inherit !important; /* Inherits the list style to avoid conflicts */
}

/* ==================== */
/* AUDIO PLAYER - RESPONSIVE POSITIONING */
/* ==================== */
#phenomenon-menu .audio-player {
    display: inline-block;
    max-width: 200px;
    vertical-align: middle;
    margin-right: 15px;
    white-space: nowrap;
	
}

#phenomenon-menu h3{
	padding-top:5px;
}


/* Mobile breakpoint (όπως στο αρχικό σας CSS) */
@media screen and (max-width: 600px) {
    #phenomenon-menu .audio-player {
        display: block;
        margin: 10px 0;
        max-width: 100%;
    }
}


/* ΕΔΩ ΕΙΝΑΙ ΟΙ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΚΑΘΕ ΦΑΙΝΟΜΕΝΟ */
#phenomenon-menu #description,
#phenomenon-menu #example {
    width: 100%; /* Full width */
    max-width: 100%; /* Prevents overflow */
    box-sizing: border-box; /* Includes padding/border */
    color: #555555;
    line-height: 1.5 !important; 
}

/* ==================== */
/* OTHER PAGE SECTIONS */
/* ==================== */
/* Styling for the about page container */
#about {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertical arrangement */
    align-items: center; /* Centers content */
    padding-top: 20px !important; /* Top padding for spacing */
    margin: 0 auto; /* Centers the container */
    max-width: 782px; /* Consistent max-width */
    width: 100%; /* Slightly less than full width */
    box-sizing: border-box; /* Includes padding/border */
    min-height: 100vh; /* Full viewport height */
    text-align: left; /* Left-aligned text */
    background-color: WhiteSmoke; /* Matches root background */
}

#about > * {
    text-align: left; /* Ensures children are left-aligned */
    width: 100%; /* Full width within max-width */
    max-width: 782px; /* Matches parent max-width */
    align-items: center; /* Centers child content */
    padding: 0 !important; /* Removes padding */
}

/* Bibliography section styling */
#bibliography {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertical arrangement */
    align-items: center; /* Centers content */
    justify-content: flex-start; /* Aligns to top */
}



/* Footer styling */
.footer {
    max-width: 782px; /* Matches other containers */
    margin: auto; /* Centers the footer */
    text-align: left; /* Left-aligned text */
}

/* General container styling */
.container {
    max-width: 782px; /* Consistent max-width */
    margin: 0 auto; /* Centers the container */
    font-size: 12px; /* Font size for content */
    text-align: left; /* Left-aligned text */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertical arrangement */
    justify-content: flex-start; /* Aligns to top */
    align-items: left; /* Left-aligned content */
	
}
	


/* Phenomenon menu container */
.phenomenon-menu {
    margin: 0 auto; /* Centers the menu */
    display: block; /* Block display */
    white-space: nowrap; /* Prevents text wrapping */
    text-align: left; /* Left-aligned text */
	
}



/* Flex utility class for wrapping the images in footer */
.flex {
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allows wrapping */
    justify-content: space-between; /* Spaces items evenly */
}

/* Hide elements with the hidden class */
.hidden {
    display: none; /* Hides the element */
}

/* Styling for areas list container */
#areas_list {
    max-width: 782px; /* Consistent max-width */
    align-items: left; /* Left-aligned content */
    display: block; /* Block display */
    margin: 0 auto; /* Centers the list */
}

/* Table styling */
#table {
    width: 98% !important; /* Slightly less than full width */
    max-width: 782px; /* Consistent max-width */
    margin: 10px auto; /* Centers the table */
    border-collapse: collapse; /* Collapses table borders */
    overflow-y: auto; /* Vertical scrolling */
    display: block; /* Block display */
    box-sizing: border-box; /* Includes padding/border */
    align-self: center !important; /* Centers within parent */
}

/* Legend styling */
.legend {
    background-color: whitesmoke; /* Matches root background */
    border: 1px solid black; /* Black border */
    border-radius: 3px; /* Rounded corners */
    text-align: left; /* Left-aligned text */
    margin: 0 auto; /* Centers the legend */
}

/* Legend header styling */
.legend-header {
    background-color: rgb(181, 181, 181); /* Gray background */
    border-top-left-radius: 3px; /* Rounded top-left corner */
    border-top-right-radius: 3px; /* Rounded top-right corner */
    padding: 2px 3px; /* Minimal padding */
    font-size: 11px; /* Small font size */
    text-align: left; /* Left-aligned text */
}

/* Legend body styling */
.legend-body {
    padding: 3px; /* Minimal padding */
    text-align: left; /* Left-aligned text */
}

.legend-body p {
    margin: 0; /* No margins for paragraphs */
    text-align: left; /* Left-aligned text */
}

/* General list item styling */
li {
    float: left; /* Floats items left */
    width: 20%; /* 20% width for equal spacing */
    padding: 0 !important; /* No padding */
    list-style: inherit !important; /* Inherits list style */
}

/* Legend list items */
.legend li {
    float: none !important; /* Overrides float */
    width: auto !important; /* Auto width */
    display: block; /* Block display for vertical stacking */
}

/* Play button styling */
.play-btn {
    background-color: whitesmoke; /* Matches root background */
    border: none; /* No border */
    padding: 0; /* No padding */
    cursor: pointer; /* Pointer cursor for interactivity */
    border-radius: 3px; /* Rounded corners */
    font-size: 4px !important; /* Very small font size */
    transition: background-color 0.3s; /* Smooth background transition */
}

/* Person container for team or contributor sections */
.person {
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Horizontal arrangement */
    align-items: flex-start; /* Aligns to top */
    justify-content: flex-start; /* Aligns to start */
    gap: 10px; /* Spacing between elements */
    margin-bottom: 10px; /* Bottom margin for spacing */
    flex-wrap: nowrap; /* Prevents wrapping */
}

/* Name styling for person section */
.name {
    font-weight: bold; /* Bold text */
    width: 200px; /* Fixed width */
    flex-shrink: 0; /* Prevents shrinking */
}

/* Position styling for person section */
.position {
    flex: 1; /* Takes remaining space */
    min-width: 0; /* Allows shrinking if needed */
}

/* Welcome message styling */
.welcome {
    font-size: 16px; /* Larger font for emphasis */
    line-height: 20px; /* Line height for readability */
    color: #555555; /* Matches link color */
    margin: 0; /* No margins */
    padding: 0; /* No padding */
    width: 70%; /* 70% width for responsiveness */
    max-width: 300px; /* Caps width */
    text-align: left; /* Left-aligned text */
}

/* Header styling */
#header {
    /*font-size: 12px; /* Font size for header */
    padding: 10px 0 5px; /* Top and bottom padding */
    width: 100%; /* Full width */
    margin: 0 auto; /* Centers the header */
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Horizontal arrangement */
    letter-spacing: -0.5px; /* Slight letter spacing adjustment */
}





/* Responsive Mappage styling for small screens */
@media screen and (max-width: 400px) {
    #mappage h2{
       /*font-size: 13px !important; /* Smaller font size */
        width: 100vh; /* Full viewport height */
		display: inline; /* Inline display for menu items */
		font-size:auto!important;
		
    }
}

/* Responsive header styling for small screens */
@media screen and (max-width: 400px) {
    #header {
       /*font-size: 13px !important; /* Smaller font size */
        padding-top: 10px; /* Reduced top padding */
    }
}

 

/* General menu styling */
.menu {
    width: 100%; /* Full width */
    text-align: left; /* Left-aligned text */
    padding-top: 0px; /* Top padding */
    margin-bottom: 0; /* No bottom margin */
    letter-spacing: 0.1px; /* Slight letter spacing */
	font-size:12px;
	
}

.menu h1 {
	font-size:26px;
	margin-bottom:10px;
	
	
}

/* Language menu styling */
.lang_menu {
    display: inline; /* Inline display for menu items */
	font-weight:bold;
	font-size:11px;
	padding-left:5px;
	
	line-height: auto;
}

@media (max-width: 600px) {
	.menu {
    width: 80%; /* Full width */
    text-align: left; /* Left-aligned text */
    padding-top: 5px; /* Top padding */
    margin-bottom: 10px; /* No bottom margin */
    /*letter-spacing: 0.09px; /* Slight letter spacing */
	font-size:12px;
	line-height: auto;
}

	.menu h1{
    width: 90%; /* Full width */
    text-align: left; /* Left-aligned text */
    padding-top: 10px; /* Top padding */
    margin-bottom: 10px; /* No bottom margin */
	font-size:26px;

	
    /*letter-spacing: 0.09px; /* Slight letter spacing */
	
	
}

/* ==================== */
/* RESPONSIVE ADJUSTMENTS FOR MAP AND PHENOMENA CONTAINERS */
/* ==================== */
/* Adjust heights on smaller screens to make phenomenonInfo larger */
@media (max-width: 600px) {
    #map {
        height: 48vh; /* Slightly reduced to accommodate larger phenomenonInfo */
        max-height: 400px; /* Adjusted max-height for smaller screens */
        min-height: 70px; /* Slightly reduced min-height */
    }

    #phenomenonInfo.container {
        min-height: 15vh; /* Increased to show more content without scrolling */
        max-height: 15vh; /* Maintain fixed height */
    }

    #phenomena {
        min-height: 29vh; /* Reduced to balance viewport height */
        max-height: 29vh; /* Maintain fixed height */
    }
}

@media (max-width: 400px) {
    #map {
        height: 47vh; /* Further reduced */
        max-height: 350px; /* Adjusted max-height */
        min-height: 60px; /* Minimum height for very small screens */
    }

    #phenomenonInfo.container {
        min-height: 21vh; /* Further increased to minimize scrolling */
        max-height: 21vh; /* Maintain fixed height */
    }

    #phenomena {
        min-height: 27vh; /* Further reduced */
        max-height: 27vh; /* Maintain fixed height */
    }
}

/* Responsive adjustments for study areas list */
@media (max-width: 600px) {
    #study-areas #areas_list {
        columns: 2 !important; /* Reduces to 2 columns for smaller screens */
    }
}

@media (max-width: 400px) {
    #study-areas #areas_list {
        columns: 2 !important; /* Maintains 2 columns for very small screens */
        font-size: 10px; /* Reduces font size for better fit */
    }
}



/* ===== Phenomenon Section Wrapper ===== */
.phenomenon-section {
    display: block;
    width: 100%;
    max-width: 782px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden; /* Κόβει την οριζόντια κύλιση */
    width: 100vw;        /* Εξασφαλίζει ότι δεν επεκτείνεται το πλάτος */
    max-width: 100vw;    /* Αποτρέπει υπερβάσεις */
}

* {
    box-sizing: border-box; /* Για να υπολογίζονται σωστά padding/border */
}


@media (max-width: 600px) {
    #map {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .odd {
        margin-top: 0 !important;
        padding-top: 0 !important;
		
    }

    .odd h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.1 !important;
		padding-right:10px;
		
    }

    #phenomenonInfo.container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* Responsive Mappage styling for small screens */
@media screen and (max-width: 400px) {
    #mappage {
       /*font-size: 13px !important; /* Smaller font size */
        min-height: 100vh!important; /* Full viewport height */
    }
}