/* Resetting default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Setting font to Roboto */
body {
    font-family: 'Roboto', sans-serif;
}

/* Basic styles for header */
header {
    background-color: #FFF;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    padding: 20px;
}

hr {
    border: none;
    border-top: 1px dotted #000; /* Dotted line */
    margin: 5px 0; /* Adds padding (spacing) from top and bottom */
}

.logo {
    max-width: 200px;
}

/* Styles for card container news */
.container-news {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.card-container-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
	justify-content: center; /* Center the content horizontally */
}

.card-news {
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensure the image doesn't overflow the card */
}

.card-news-content {
    padding: 20px;
}


/* Fullscreen container */
.gallery-container {
    max-width: 800px;
    margin: 0 auto; /* Center the gallery */
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Anchor tag wrapping the image */
.gallery-container a {
    display: block;
    width: calc(33.33% - 20px); /* 3 images per row */
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

/* Image styling */
.gallery-container img {
    width: 100%; /* Fill the anchor box */
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Hover effect */
.gallery-container img:hover {
    transform: scale(1.05);
}

/* Responsive styling */
@media (max-width: 768px) {
    .gallery-container a {
        width: calc(50% - 20px); /* 2 per row */
    }
}

@media (max-width: 480px) {
    .gallery-container a {
        width: 100%;
        max-width: 300px;
        margin: 5px auto;
    }
}


/* Museum Image styling */
.gallery-museum-container img {
    width: 100%; /* 3 images per row with some space in between */
    margin: 10px;
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners (optional) */
    object-fit: cover; /* Ensure the images fill each space */
    transition: transform 0.3s ease; /* Animation on hover */
}

/* Museum Hover effect */
.gallery-museum-container img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Museum Responsive styling */
@media (max-width: 768px) {
    .gallery-museum-container img {
        width: 100%; /* 2 images per row for tablets */
        max-width: 100%; /* Prevents images from getting too large */
    }
}

@media (max-width: 480px) {
    .gallery-museum-container img {
        width: 100%; /* 1 image per row for mobile phones */
        max-width: 300px; /* Limit image size on small screens */
        margin: 5px auto; /* Center images on mobile */
    }
}




/* Styles for card container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
	justify-content: center; /* Center the content horizontally */
}

/* Styles for individual card */
.card {
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensure the image doesn't overflow the card */
}

.card-image {
    width: 100%;
    display: block;
}

.card-content {
    padding: 20px;
}

.card h2 {
    margin-bottom: 10px;
}

/* Style for link */
.card a {
    text-decoration: none;
    color: inherit; /* Use the default text color */
}




/* Setting font to Roboto */
body {
    font-family: 'Roboto', sans-serif;
}

/* Basic styles for header */
header {
    background-color: #FFF;
    padding: 20px 0;
    text-align: center;
}

.logo {
    max-width: 200px;
}

/* Styles for card container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}

/* Styles for individual card */
.card {
    background-color: #f4f4f4;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Add a shadow to the card */
    transition: box-shadow 0.3s ease; /* Add transition effect for smooth hover */
}

.card-image {
    width: 100%;
    display: block;
}

.card-content {
    padding: 20px;
}

.card h2 {
    margin-bottom: 10px;
}

/* Style for link */
.card-link {
    text-decoration: none;
    color: inherit; /* Use the default text color */
}



.card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); /* Change shadow on hover */
}
/* Style for list items */
ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style-type: none; /* Remove default list style */
    margin-bottom: 10px; /* Add margin bottom to create space between list items */
}

/* Style for list item links */
ul li a {
    color: #333; /* Set link color */
    text-decoration: none; /* Remove underline */
}

/* Hover effect for list item links */
ul li a:hover {
    background-color: #ffffcc; /* Light yellow background on hover */
}

.text-block {
    padding: 20px; /* Add padding to the whole text block */
    background-color: #f7f7f7; /* Add a background color for better readability */
    border: 1px solid #ddd; /* Add a border for visual separation */
    border-radius: 5px; /* Add rounded corners for a softer look */
}

.text-block p {
    text-indent: 40px; /* Add text indentation to the paragraph */
    padding: 10px 0; /* Add padding top and bottom */
    font-size: 16px; /* Adjust the font size */
    line-height: 1.5; /* Adjust the line height for better readability */
    color: #333; /* Set the text color */
}

.text-block ol {
    padding-left: 20px; /* Add left padding to the ol element */
	font-size: 15px; /* Adjust the font size for the ol element */
	color: #888; /* Set the text color to gray */
}

.text-block ol li {
    padding-left: 20px; /* Add padding to the left of the li elements */
    padding-top: 5px; /* Add padding to the top of the li elements */
    padding-bottom: 5px; /* Add padding to the bottom of the li elements */
}

.text-block li:hover {
    color: #000; /* Change text color to black on hover */
	
}

footer {
    height: 350px;
    background-color: #FFF;
    color: white;
    text-align: center;
    padding-top: 15px;
}

footer a {
    text-decoration: none; /* Remove underline from links within the footer */
}

footer img {
    padding: 10px 5px 5px 20px;
}

footer cite {
    text-decoration: none; /* Remove underline from links within the footer */
    color: gray; /* Set the text color to gray */
    width: 500px; /* Set the width to 300px */
    display: block; /* Make the cite element block-level */
    margin: 0 auto; /* Center the cite block horizontally */
}