body {
            font-family: Georgia, serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            position: relative;
            display:flex;
			flex:0;
			justify-content: center;
			align-items: center;
            flex-flow:column;
        }
        header h1 {
            margin: 0;
            font-size: 2em;
        }
        article p{
        width:50vw;
        margin:auto;
        }
        .container {
            display: flex;
        }
        #main_nav {
    		height: 100vh;
            z-index:99;
            flex:1;
        }
        #main_nav ul {
            list-style-type: none;
			position: fixed;
    		left: 0;
    		top: 0;
    		height: 100vh;
    		background-color: #333;
    		padding: 210px 20px;
            margin: 0;
        }
        #main_nav ul li {
            margin: 10px 0;
    		flex-direction: column;
    		display: flex;
        }
        #main_nav ul li a{
            background-color: #555;
        }
        nav ul li a {
            display: block;
            color: #fff;
            text-decoration: none;
            padding: 1rem 4.5rem;
            border-radius: 4px;
        }
        #main_nav ul li a:hover {
            background-color: #666;
        }
        #main {
            padding: 20px 20px 50px;
            box-sizing: border-box;
			flex:7;
        }
        .hero {
            position: relative;
            color: #fff;
            text-align: center;
            padding: 60px 20px;
            margin-bottom: 20px;
        }
        .carousel {
            position: relative;
            width: 100%;
            max-width: 890px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
            max-height:800px;
        }
        .gallery{
        width:45%;
        float:left;
        padding:5px;
        }

        .photo, .photo a, .photo img{
        width:100%;
        }
        .carousel-image {
            width:100%;
            height:auto;
            object-fit:cover;
            transition: opacity 0.5s ease-in-out;
        }
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 1rem;
            cursor: pointer;
            border-radius: 50%;
            font-size: 1.5rem;
        }
        .carousel-button.prev {
            left: 10px;
        }
        .carousel-button.next {
            right: 10px;
        }
        .carousel-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
        .section {
            background: #fff;
            width:80vw;
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow:hidden;
        }
        .section h3 {
            margin-top: 0;
        }
        .page_content{
        text-align:center;
        }
        .events, .galleries, .members, .contact {
            display: flex;
        }
        .events, .event, .galleries, .photo, .members .member, .contact .form-group, .hero {
            flex: 1 1 calc(45% - 40px);
            box-sizing: border-box;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .events .event h4, .members .member h4 {
            margin-top: 0;
        }
        .events div:nth-of-type(1) {flex-grow: 1;}
		.events div:nth-of-type(2) {flex-grow: 2;}
		.events div:nth-of-type(3) {flex-grow: 2;}
        .galleries div:nth-of-type(1) {flex-grow: 1;}
		.galleries div:nth-of-type(2) {flex-grow: 2;}
		.galleries div:nth-of-type(3) {flex-grow: 2;}
        .gallery .photo img {
            width: 100%;
            height: auto;
        }
        form{
        	width: 100%;
            margin: auto;
        }
        .contact .form-group input, .contact .form-group textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            box-sizing: border-box;
        }
        .contact .form-group button {
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .contact .form-group button:hover {
            background-color: #555;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            z-index:99;
            width:100vw;
        }
        #footer_nav{
        	width:15vw;
        	margin:auto;
            background:none;
        }
        #footer_nav ul{
            list-style-type: none;
        }
        #footer_nav ul li a{
        padding: 0.2rem 1rem;
            border-radius: 4px;
        }
        #logo_img{
        z-index:9999;
        }
        #logo_img img{
        	width:10vw;
            index:9999;
        }
        /* Hamburger menu styles */
        .hamburger {
            display: none;
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }
        .hamburger div {
            height: 3px;
            background-color: #fff;
        }
        #logo a{
    color: white;
    font-size:1rem;
}
        #socials {
            display: flex;
            gap: 15px; /* Spacing between icons */
            justify-content: center;
        }
        #socials img {
            width: 50px; /* Width of the icons */
            height: 50px; /* Height of the icons */
            transition: transform 0.3s; /* Adding a hover effect */
        }
        #socials img:hover {
            transform: scale(1.1); /* Slightly enlarge the icon on hover */
        }
        
#cookie_header{width:55px;height:55px;float:left;overflow:hidden;position:fixed; top:10px;left:10px;}
#cookie_consent{width:100%;overflow:hidden;position:fixed; bottom:-10px;color:rgb(0,0,0);}
#cookie_header,#cookie_options{ z-index: 100; opacity:0.95;}
#cookie_options{display:none;padding:50px; width:100%; height:90%; bottom:-10px;background-color:rgb(224,0,21);}
#cookie_header img{max-width:100%;
max-height:100%;}


@media (max-width: 768px)
{
    #cookie_header
    {width:10vw;
    padding:0;
    margin:0;
    }
    #cookie_options
    {width:unset;
    }
	#logo_img img
	{
	width: 50vw;
	}
	nav
	{
	width: 100%;
	display: none;
	}
	.hamburger
	{
	display: flex;
	z-index:999;
	}
	*
	{
	text-align: center;
	}
	.gallery
	{
	width:100%;
	}
	#main
	{
	padding: 0;
	width:100%;
	}
	nav ul
	{
	flex-direction: column;
    width:100vw;
    padding-left:0;
    padding-right:0;
	}
	.hero
	{
	padding: 40px 20px;
	}
	.events, .event, .gallery, .galleries, .photo, .members, .member, .contact, .form-group
	{
	flex: 1 1 calc(100% - 40px);
	flex-wrap:wrap;
	}
    #page_content{
    margin:0;
    padding:0;
    }
    .section{
    padding:0 1vw;
    width:95vw;
    }
    article p{
    width:90vw;
    margin:auto;
    }
	.carousel-images {
	max-height:40vh;
        }
        #footer_nav{
        display:block; width:100vw;
        }
}