@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Add more font variations as needed */
@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

body {
    font-family: 'Roboto Mono', monospace; /* Use Roboto Mono as the primary font */
    margin: 0;
    padding: 0;
    background-color: black;
}


main {
            padding: 20px; /* Optional: Add some padding inside main */
            background-color: #FFFFFF; /* Optional: Background color for visibility */
            border: 1px solid #ccc; /* Optional: Border for the main section */
            margin-right: 5%; /* Margin for the main content */
			margin-left: 5%; /* Margin for the main content */
			margin-top: 4%; /* Margin for the main content */
    position: relative; /* Allow positioning of child elements */
        }





.dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: black; /* Same as header background */
    min-width: 160px; /* Width of dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; /* Make sure it appears above other content */
}

.dropdown li {
    margin: 0; /* No margin for dropdown items */
}

.dropdown.show {
    display: block; /* Show the dropdown when toggled */
}



.main-content {
    background-color: white; /* Main content background color */
    padding: 2rem;
    margin-top: 5%;
}


/* Featured Articles Section */
.featured-articles {
    background-color: white;
    padding: 20px 1%; /* Top/Bottom padding remains 20px, Left/Right padding is 1% */
    margin: 0; /* Remove any outer margin for consistency */
}

.articles {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap */
    gap: 10px; /* Keeps consistent spacing between boxes */
    justify-content: center; /* Center boxes horizontally */
    margin: 0; /* Remove default margin to avoid extra space */
    width: 100%; /* Ensure it spans the container width */
    box-sizing: border-box; /* Includes padding in total width calculation */
}


.article {
    flex: 1 1 22%; /* Take up 22% of the container width with flexibility */
    max-width: 380px; /* Ensure no box becomes too large */
    min-width: 200px; /* Avoid overly shrinking boxes */
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.5rem;
    text-align: center;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box; /* Include padding and border in width calculation */
}


/* Hover effect */
.link-box:hover {
    background-color: #f0f0f0;
    cursor: pointer;
    color: #007bff;
    transform: translateY(-5px); /* Slight hover effect */
}

.article img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 0; /* Remove margin around image */
}

.article h3 {
    margin: 0.5rem 0 0.3rem; /* Small margin above and below the text */
}

.read-more {
    display: inline-block;
    margin-top: 0.3rem; /* Reduced spacing for "Read More" */
    color: blue;
    text-decoration: underline;
}

/* Responsive Design */
@media (min-width: 600px) {
    .article {
        width: calc(50% - 10px); /* Two boxes per row on medium screens */
    }
}

@media (min-width: 900px) {
    .article {
        width: calc(33.33% - 10px); /* Three boxes per row on larger screens */
    }
}

@media (min-width: 1200px) {
    .article {
        width: calc(25% - 10px); /* Four boxes per row on extra-large screens */
    }
}



/* New section styles */
.new-section {
    display: flex;
    justify-content: space-between;
    margin: 1%;
    background-color: white;
    gap: 1rem; /* Adds consistent spacing between boxes */
}

/* Styles for clickable box */
.link-box {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    display: block; /* Makes the entire box clickable */
    text-align: center;
    color: inherit; /* Ensures text color remains consistent */
    text-decoration: none; /* Removes underline from text */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover and shadow transition */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds shadow effect */
}

/* Large box styles */
.left-box {
    width: 65%; /* Large box takes up 65% of the space */
    margin-bottom: 0; /* Prevent unnecessary bottom margin */
    align-self: flex-start; /* Ensures large box aligns to its content height */
}

/* Right box container */
.right-boxes {
    display: flex;
    flex-direction: column; /* Stack the small boxes vertically */
    width: 30%; /* Small boxes take up 30% of the space */
    gap: 1rem; /* Adds consistent spacing between the small boxes */
}

/* Small box styles */
.small-box {
    margin-bottom: 0; /* Reset to avoid extra margin issues */
}

/* Hover effect for both left-box and small-box */
.link-box:hover {
    background-color: #f0f0f0; /* Change background color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds a stronger shadow on hover */
    cursor: pointer;
    color: #007bff;
    transform: translateY(-5px); /* Slight hover effect */
}

/* Image styles for both large and small boxes */
.small-box img, .left-box img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Responsive Design */
/* Responsive Design */
@media (max-width: 768px) {
    .new-section {
        flex-direction: column; /* Stack large and small boxes vertically */
        align-items: center;
    }

    .left-box {
        width: 90%;
    }

    .right-boxes {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers the small boxes horizontally */
        gap: 1rem; /* Ensures consistent spacing between small boxes */
    }

    .small-box {
        width: 100%; /* Full width for small boxes */
    }
}

/* Text styles */
h4 {
    font-size: 20px;
}




/* List Section */
.lists-section {
    display: flex;
    justify-content: center; /* Center the list boxes horizontally */
    margin-top: 2rem; /* Space above the lists section */
    flex-wrap: wrap; /* Allows items to wrap */
    gap: 1%; /* Small margin (1%) between boxes */
    max-width: 100%; /* Prevents the section from overflowing */
}

.list-box {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    margin: 0.5rem; /* Reduced margin between boxes */
    width: calc(25% - 1%); /* Three boxes in a row with small gap */
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for the list boxes */
    transition: transform 0.3s ease; /* Smooth transition on hover */
}

.list-box:hover {
    transform: translateY(-5px); /* Slight hover effect */
}

/* Title and List Item Styles */
.list-box h4 {
    margin-bottom: 1rem; /* Space below the title */
}

.list-box ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    text-align: left; /* Align list items to the left */
}

.list-box li {
    display: flex; /* Use flexbox for aligning images */
    align-items: center; /* Vertically center items */
    margin-bottom: 0.5rem; /* Space between list items */
}

.list-box img {
    max-width: 60px; /* Limit the size of the flag images */
    height: auto;
    margin-right: 0.5rem; /* Space between image and text */
    border: 2px solid #ccc; /* Grey border around the images */
}

/* Add a black band to the top of the flag boxes */
.list-box .flag-box {
    background-color: black;
    height: 30px;
    width: 100%;
    margin-bottom: 10px; /* Space below the black band */
}

/* Responsive Design */
@media (max-width: 768px) {
    .lists-section {
        flex-direction: column; /* Stack the list boxes vertically */
        align-items: center; /* Center the boxes */
    }

    .list-box {
        width: 90%; /* Full width for smaller screens */
    }
}

h2 {
    color: black; /* Title color */
    text-align: center; /* Center the titles */
    margin-top: 2rem; /* Space above the titles */
    margin-bottom: 1rem; /* Space below the titles */
}

h4 {
    color: black; /* Color for section subtitles */
}

/* Styles for clickable list items */
.lists-section .list-item {
    margin-bottom: 10px; /* Space between items */
}

.lists-section .polity-link {
    display: flex; /* Use flexbox to align flag and name horizontally */
    align-items: center; /* Vertically align the image and text */
    color: #000; /* Default text color */
    text-decoration: none; /* Remove underline from links */
    transition: background-color 0.3s, transform 0.2s ease; /* Smooth transitions */
}

.lists-section .polity-link:hover {
    background-color: #f0f0f0; /* Change background on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
    color: #007bff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Shadow on hover */
}

.lists-section .flag-image {
    width: 60px; /* Set a fixed width for the flag */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between flag and text */
}

.lists-section .polity-link:hover .flag-image {
    opacity: 0.8; /* Slightly fade the flag image on hover */
}

.lists-section .polity-link span {
    font-size: 16px; /* Adjust font size for polity name */
    font-weight: bold; /* Make polity name bold */
}


.section-title {
    text-align: left; /* Center the title */
    font-size: 2rem; /* Size of the title */
    margin-bottom: 20px; /* Space between title and articles */
    color: black;
}

.polities-section {
    background-color: #fff; /* Background color for the section */
    padding: 20px; /* Padding around the section */
    margin:1%;
}

.polities {
    display: flex; /* Use flexbox to align items */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items */
}

.polity {
    background-color: #f0f0f0; /* Background color for each box */
    border: 1px solid #ccc; /* Border color */
    border-radius: 8px; /* Rounded corners */
    width: 500px; /* Fixed width for the boxes */
    margin: 1px; /* Adjust margins */
    display: flex; /* Flexbox for alignment */
}

.polity_small {
    background-color: #f0f0f0; /* Background color for each box */
    border: 1px solid #ccc; /* Border color */
    border-radius: 8px; /* Rounded corners */
    width: 200px; /* Fixed width for the boxes */
    margin: 1px; /* Adjust margins */
    display: flex; /* Flexbox for alignment */
}

.main-image {
    height: 180px; /* Fixed height for the main image */
    width: auto; /* Auto width to maintain aspect ratio */
    align-self: center; /* Center the image vertically */
    margin-left: 8px;
}

.divider {
    width: 2px; /* Width of the grey vertical line */
    background-color: grey; /* Color of the line */
    margin-left: 8px;
    margin-right: 8px;
    margin-top:2px;
    margin-bottom:2px;
}

.polity-content {
    padding: 10px; /* Padding for content */
    flex: 1; /* Take remaining space */
}

.polity-content h3 {
    display: flex; /* Enable flexbox for the heading */
    align-items: center; /* Center items vertically */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove any padding, if necessary */
    font-size: 16px;
}

.polity-content h2 {
    margin-top: 0;
    margin-bottom:10px;
    text-align: left;
}

.flag-icon {
    width: 35px; /* Width for flag icon */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between flag and polity name */
}


.polity-link {
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text for polity name */
    margin-bottom: 1px;
}

.polity-content ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 1px;
}

.polity-content li {
    display: flex; /* Flexbox for flag and data alignment */
    align-items: center; /* Center vertically */
    margin-bottom: 5px; /* Space between list items */
    margin-bottom: 1px;
}

.data-link {
    text-decoration: none; /* Remove underline */
    display: flex; /* Flex for icon and text */
    align-items: center; /* Center vertically */
    margin-bottom: 10px;
}

.data-icon {
    width: 20px; /* Width for data icon */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icon and text */
    margin-left: 45px;
}

/* Responsive Design */
@media (max-width: 520px) {
    .polity {
        width: 100%; /* Full width for small screens */
    }
}

.see-all-container {
    margin-top: 20px; /* Space above the button */
    text-align: center; /* Center the button */
}

.see-all-button {
    display: inline-block; /* Make it a block-level element */
    padding: 10px 20px; /* Space inside the button */
    background-color: #000000 ; /* Button background color */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline from link */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Transition effect */
}


.see-all-button:hover {
    background-color: #4d4d4d; /* Darker color on hover */
}

.title-link {
    text-decoration: none; /* Remove underline */
    color: #000; /* Change to desired color */
    font-weight: bold; /* Make it bold, if needed */
}

.title-link:hover {
    color: #007BFF; /* Change color on hover */
}

/* Footer Styles */
.footer-area-l-17 {
    background-color: #000; /* Pure black background */
    color: #fff; /* White text color */
    padding: 20px 0;
    margin: 0; /* Remove all margins */
    width: 100%; /* Ensure the footer takes up full width */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.footer-area-l-17 .copyright-area-l-17 {
    border-top: 1px solid #444; /* Subtle top border */
}

.footer-area-l-17 .copyright {
    text-align: center; /* Center the copyright text */
}

.footer-area-l-17 .footer-menu {
    padding: 0 15px;
}

.footer-area-l-17 .footer-menu ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-area-l-17 .footer-menu ul li {
    list-style: none;
}

.footer-area-l-17 .footer-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.footer-area-l-17 .footer-menu ul li a:hover {
    color: #007bff; /* Hover effect */
}

/* Center the social media icons */
.footer-area-l-17 .social-icons ul {
    display: flex;
    justify-content: center; /* Center the icons */
    gap: 15px; /* Add space between icons */
    padding-left: 0;
}

.footer-area-l-17 .social-icons ul li {
    list-style: none;
}

.footer-area-l-17 .social-icons ul li a {
    color: #fff; /* White icon color */
    font-size: 20px; /* Icon size */
    text-decoration: none; /* Remove underline */
}

.footer-area-l-17 .social-icons ul li a:hover {
    color: #007bff; /* Hover effect: Blue */
}

@media (max-width: 768px) {
    .footer-area-l-17 .social-icons ul {
        justify-content: center; /* Ensure social icons are centered on small screens */
    }
}

	
.info-box {
    display: flex; /* Enable flexbox layout */
    flex-wrap: wrap; /* Allow wrapping for responsive behavior */
    width: 80%; /* Cover 80% of the available width */
    background-color: #FFFFFF;
    padding: 10px;
    margin: 0 auto 15px; /* Center horizontally and add vertical spacing */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-left-column, .info-right-column {
    flex: 1; /* Ensure both columns take up equal space */
    padding: 10px; /* Add padding between columns */
    box-sizing: border-box; /* Ensure padding doesn't affect width calculation */
}

.info-left-column {
    border-right: 1px solid #ccc; /* Add a divider between columns */
    text-align: left; /* Align text and content to the left */
}

.info-right-column {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Align content to the left horizontally */
    max-width: 100%; /* Prevent overflow */
}

/* Media query for small screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack columns vertically */
    }

    .info-left-column,
    .info-right-column {
        border-right: none; /* Remove the divider on smaller screens */
        border-bottom: 1px solid #ccc; /* Optional: Add a bottom divider */
    }

    .info-right-column h1 {
        font-size: 1.2em; /* Adjust font size for small screens */
        flex-wrap: wrap; /* Ensure text wraps if needed */
    }

    .info-right-column img {
        max-width: 100%; /* Ensure the image scales proportionally */
        height: auto; /* Maintain image aspect ratio */
        margin-bottom: 10px; /* Add spacing below the image */
    }

    .info-right-column p {
        font-size: 12px; /* Adjust font size for readability */
    }
}


.info-box img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

.image-box-container figure {
    margin: 0; /* Remove default figure margin */
    text-align: left; /* Align figure and figcaption content to the left */
}

.info-box h3 {
    margin: 10px 0; /* Space above and below headings */
}

.info-box p {
    margin: 5px 0; /* Space for paragraphs */
}

/* Responsive styles for smaller screens */
@media (max-width: 800px) {
    .info-box {
        flex-direction: column; /* Stack columns vertically */
		margin-top:80px;
    }

    .info-left-column {
        border-right: none; /* Remove divider on stacked view */
        border-bottom: 1px solid #ccc; /* Optional: Add a divider between stacked rows */
        margin-bottom: 15px; /* Add space below left column */
    }
}

.icon-btn-right {
    margin-top: 50px;
    position: fixed; /* Stays in the same position on scroll */
    top: 20px;
    right: 5px; /* Changed from 'left' to 'right' */
    z-index: 1100; /* Higher than the toggle box */
    width: 42px; /* Fixed size for the square */
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* General reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Toggle icon button */
        .toggle-icon-btn {
			margin-top:50px;
            position: fixed; /* Stays in the same position on scroll */
            top: 20px;
            left: 20px;
            z-index: 1100; /* Higher than the toggle box */
            cursor: pointer;
            background-color: white; /* White background for visibility */
            border: 1px solid black; /* Black border for clarity */
            border-radius: 4px; /* Optional: Rounded corners */
            width: 50px; /* Fixed size for the square */
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
        }
		
		

        .toggle-icon-btn img {
            width: 30px; /* Size of the icon */
            height: 30px;
        }

        /* Toggle box container */
        .toggle-box {
            position: fixed; /* Fixed positioning to stay at the top-left */
            top: 20px;
            left: 80px; /* Slightly to the right of the toggle icon */
            z-index: 1000;
            width: 250px;
            background-color: #f8f9fa;
            border: 1px solid black; /* Consistent black border */
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: none; /* Hidden by default */
        }

        .toggle-content {
            padding: 10px;
			max-height: 300px; /* Adjust height as needed */
			overflow-y: auto; /* Enables vertical scrolling if content exceeds max height */
        }

        .toggle-content ul {
            list-style: none;
            padding: 0;
        }

        .toggle-content li {
            margin: 5px 0;
        }

        .toggle-content a {
            text-decoration: none;
            color: #007bff;
            transition: color 0.3s ease;
        }

        .toggle-content a:hover {
            color: #0056b3;
        }

        /* For outside click (background overlay) */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent; /* Invisible background */
            z-index: 1050; /* Sits just below the toggle box */
            display: none;
        }

.regio-icon {
    width: 40px; /* Width for flag icon */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between flag and polity name */
	border: 1px solid black; /* Consistent black border */
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    z-index: 1000;
    margin-bottom: 2%;
}


nav {
    margin-left: auto;
}

nav ul {
    display: flex; /* Ensures a row layout */
    gap: 20px; /* Reduces the distance between items */
    padding: 0; /* Removes extra padding from the list */
    margin: 0; /* Removes extra margin from the list */
  }
  
 nav ul li {
    list-style: none; /* Removes bullets if present */
    margin: 0; /* Ensures no extra space around each item */
    padding: 0; /* Removes unnecessary padding */
  }

nav li {
    margin: 0 15px;
    position: relative; /* For dropdown positioning */
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: normal;
}


h1, h2, h3 {
    margin-top: 20px;
}




@media (min-width: 920px) {
	.icon_text_button {
		width: 60px; 
		height: 22px;
	}
	
  .logo img {
    content: url("/assets/phersu-banner.png");
	height: 40px; /* Adjust this value to your desired height */
	width: auto; /* Maintain the aspect ratio of the image */
  }

  nav ul li a {
    text-decoration: none; /* Remove underline */
    color: white; /* Default text color */
    transition: color 0.3s ease; /* Smooth transition */
  }
  
  nav ul li a:hover {
    filter: brightness(0.2) invert(1); /* Slight dimming and keeps icons white */
  }

}

@media (min-width: 451px) and (max-width: 919px) {
	
	.icon-btn-right {
        display: none;
      }
	
	
	.icon_text_button {
		width: 22px; 
		height: 22px;
	}
	
  .logo img {
    content: url("/assets/phersu-banner.png");
    height: 27px;
    width: auto;
  }

  /* Hide Atlas button */
  nav ul li:nth-child(1) {
    display: none;
  }

  /* Maps and Tools remain as text */
  nav ul li:nth-child(2) a,
  nav ul li:nth-child(3) a {
    width: auto;
    height: auto;
    text-align: center;
    display: inline-block;
    color: white;
  }

  /* User as icon */
  nav ul li:nth-child(4) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/user.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Favorites as icon */
  nav ul li:nth-child(5) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/star.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Search as icon */
  nav ul li:nth-child(7) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/search.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* About as icon */
  nav ul li:nth-child(8) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/info.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Hide text for icons */
  nav ul li:nth-child(4) a span,
  nav ul li:nth-child(5) a span,
  nav ul li:nth-child(7) a span,
  nav ul li:nth-child(8) a span {
    display: none;
  }
  
  /* Navigation menu for smaller screens */
  nav ul {
    display: flex;
    flex-wrap: nowrap; /* Prevent items from wrapping */
    gap: 20px; /* Set the gap to 0px */
    padding: 0;
    margin: 0;
    justify-content: flex-start; /* Align items tightly on the left */
    align-items: center; /* Ensure icons are vertically centered */
  }

  nav ul li {
    list-style: none;
    margin: 0; /* Remove any margin around list items */
    padding: 0; /* Remove padding */
  }

  nav ul li a {
    text-decoration: none;
    display: inline-block; /* Make sure the anchor tag is inline-block */
    width: 22px; /* Fix width and height for all icons */
    height: 22px;
  }

  /* Hover effect for all links */
  nav ul li a {
    transition: filter 0.3s ease;
  }

  nav ul li a:hover {
    filter: brightness(0.2) invert(1); /* Slight dimming on hover */
  }
}




@media (max-width: 451px) {
	
	.icon-btn-right {
        display: none;
      }
	
	.icon_text_button {
		width: 22px; 
		height: 22px;
	}
	
  .logo img {
    content: url("/assets/phersu-banner-short.png");
	height: 27px; /* Adjust this value to your desired height */
	width: auto; /* Maintain the aspect ratio of the image */
  }
  

  /* Hide Atlas button */
  nav ul li:nth-child(1) {
    display: none;
  }
  
  /* Hide Atlas button */
  nav ul li:nth-child(8) {
    display: none;
  }

  /* Maps and Tools remain as text */
  nav ul li:nth-child(2) a,
  nav ul li:nth-child(3) a {
    width: auto;
    height: auto;
    text-align: center;
    display: inline-block;
    color: white;
  }

  /* User as icon */
  nav ul li:nth-child(4) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/user.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Favorites as icon */
  nav ul li:nth-child(5) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/star.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Search as icon */
  nav ul li:nth-child(7) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/search.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* About as icon */
  nav ul li:nth-child(8) a {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("/assets/banner_icons/info.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* Makes the icon white */
  }

  /* Hide text for icons */
  nav ul li:nth-child(4) a span,
  nav ul li:nth-child(5) a span,
  nav ul li:nth-child(7) a span,
  nav ul li:nth-child(8) a span {
    display: none;
  }
  
  /* Navigation menu for smaller screens */
  nav ul {
    display: flex;
    flex-wrap: nowrap; /* Prevent items from wrapping */
    gap: 20px; /* Set the gap to 0px */
    padding: 0;
    margin: 0;
    justify-content: flex-start; /* Align items tightly on the left */
    align-items: center; /* Ensure icons are vertically centered */
  }

  nav ul li {
    list-style: none;
    margin: 0; /* Remove any margin around list items */
    padding: 0; /* Remove padding */
  }

  nav ul li a {
    text-decoration: none;
    display: inline-block; /* Make sure the anchor tag is inline-block */
    width: 22px; /* Fix width and height for all icons */
    height: 22px;
  }

  /* Hover effect for all links */
  nav ul li a {
    transition: filter 0.3s ease;
  }

  nav ul li a:hover {
    filter: brightness(0.2) invert(1); /* Slight dimming on hover */
  }
}

:target::before {
    content: "";
    display: block;
    height: 90px; /* Adjust based on your header's height */
    margin-top: -90px; /* Adjust based on your header's height */
}