/*
  styles.css
  This file contains the styles for the HTML document.
*/

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');


/* Global styles for the entire body */
    body {
      font-family: 'Verdana', sans-serif;
      text-decoration: none;
      color: #330000;
      font-size: 18px;
      background-color: #f0eee9;
      max-width: 960px;
      margin: auto;
      padding: 1rem;
    }
    
    a:link, a:visited, a:active {
      text-decoration: none;
      color: #330000;
    }

    a:hover {
      color: blue; /* change color on hover */
    }

    h1 {
      font-family: 'Comfortaa', sans-serif;
      text-decoration: none;
      text-align: center;
      font-size: 2.5rem;
      color: #330000;
    }
    
    h2 {
      font-family: 'Verdana', sans-serif;
      text-decoration: none;
      text-align: center;
      font-size: 1.5rem;
      color: #330000;
    }

    pp {
      font-family: 'Comfortaa', sans-serif;
      text-decoration: none;
      text-align: center;
      font-size: 1.5rem;
      color: #330000;
    }

    ul {
      list-style-type: none; /* Removes bullets */
      text-align: center;
      margin: 0;
      padding: 0; /* Removes default indentation */
    }

    footer {
      text-align: center;
      color: #330000;
      margin-top: 3rem;
    }

    nav ul {
      font-family: 'Verdana', sans-serif;
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
    }

    nav ul li {
      display: inline-block;
    }

    nav a {
      text-decoration: none;
      color: #330000;
      padding: 3px 10px;
    }

    .ref {
    padding-left: 20px ;
    text-indent: -50px ;
    }

    .small-text {
      font-size: 0.8rem;
    }
    
    .main-content li {
      margin-bottom: 10px;
    }

    .centered-img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

    .center-table {
      margin-left: auto;
      margin-right: auto;
      /* Optional: set a width less than 100% for auto margins to take effect */
      width: 50%; 
      border-collapse: collapse;
    }

    .video-container {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;     /* Centers vertically */
        height: 100vh;           /* Example: centers in the full viewport height */
    }

    .socials img {
      height: 40px;
      margin: 0 10px;
    }
    
    .container {
        display: flex; /* Aligns children (text and image divs) side-by-side */
        width: 100%;
    }

    .text-half {
        flex: 1 1 50%;
        padding: 0;
        background-color: #f0eee9; /* Optional: adds a background color for contrast */
        overflow-y: auto; /* Adds scroll if content exceeds height */
    }

    .image-half {
        flex: 1 1 50%;
        display: flex; /* Used to center the image within its half */
        justify-content: center;
    }

    .image-half img {
        max-width: 100%; /* Ensures the image doesn't overflow its container */
        max-height: 100vh; /* Ensures the image doesn't exceed viewport height */
        object-fit: contain; /* Scales the image nicely within the space */
        object-position: top; /* Scales the image nicely within the space */
        display: block;
    }

    /* Optional: Basic responsive design for smaller screens */
    @media (max-width: 768px) {
        .container {
            flex-direction: column; /* Stacks the text and image vertically on mobile */
            height: auto;
        }

    .image-half img {
        max-height: 50vh; /* Limits image height on mobile */
    }
}    

    .event-info {
            margin-bottom: 30px;
            line-height: 1.6;
    }
        
    /* Responsive design for smaller screens */
    @media (max-width: 768px) {
        .container {
            flex-direction: column;
        }
            
        .image-section {
            order: -1; /* Put image on top for mobile */
        }
    }

    #centeredmenu {
    	float:left;
    	width:100%;
    	background:#f0eee9;
    	border-bottom:4px solid #f0eee9;
    	margin-bottom:15px;
    	position:relative;
    	margin:1.5em 0;
    }

    #centeredmenu ul {
    	clear:left;
    	float:right;
    	list-style:none;
    	margin:10px 0 0 0;
    	padding:0;
    	position:relative;
    	right:50%;
    	text-align:center;
    }

    #centeredmenu ul li {
    	display:block;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	left:50%;
    }

    #centeredmenu ul li a {
    	display:block;
    	margin:0 0 0 1px;
    	padding:3px 10px;
    	background:#f0eee9;
    	color:#330000;
    	text-decoration:none;
    	line-height:1.3em;
    }

    #centeredmenu ul li a:hover {
    	background:#f0eee9;
    	color:#330000;
    }

    #centeredmenu ul li a.active,
    #centeredmenu ul li a.active:hover {
    	color:#330000;
    	background:#f0eee9;
    	font-weight:bold;
    }

    #centeredsubmenu {
        clear:both;
        float:left;
        margin:0 0 1em;
        padding:0;

        width:100%;
        z-index:10; /* This makes the dropdown menus appear above the page content below */
        position:relative;
    }
 
 /* Top menu items */
    #centeredsubmenu ul {
        margin:0;
        padding:0;
        list-style:none;
        float:right;
        position:relative;
        right: 50%;
    }

    #centeredsubmenu > ul > li {
        margin:0 0 0 1px;
        padding:0;
        float:left;
        position:relative;
        left: 50%;
        top:1px;
    }

    #centeredsubmenu > ul > li a {
        display:block;
        margin:0;
        padding:.6em 1em .4em;
        font-size:1em;
        line-height:1em;
        background:#f0eee9;
        text-decoration:none;
        color:#330000;
        border-bottom:1px solid #f0eee9;
    }

    #centeredsubmenu > ul > li.active a {
        color:#330000;
        background:#f0eee9;
    }

    #centeredsubmenu > ul > li a:hover {
        background:#f0eee9; /* Top menu items background colour */
        color:#330000;
        border-bottom:1px solid #f0eee9;
    }

    #centeredsubmenu > ul > li:hover a { /* This line is required for IE 6 and below */
        background:#f0eee9; /* Top menu items background colour */
        color:#330000;
        border-bottom:1px solid #f0eee9;
    }
 
 /* Submenu items */
    #centeredsubmenu ul ul {
        display:none; /* Sub menus are hidden by default */
        position:absolute;
        top:2em;
        left:1em;
        width:8em; /* width of the drop-down menus */
    }

    #centeredsubmenu ul ul li {
        clear:left;
        width:100%;
    }

    #centeredsubmenu ul ul li a,
    #centeredsubmenu ul li.active li a,
    #centeredsubmenu ul li:hover ul li a { /* This line is required for IE 6 and below */
        font-size:.8em;
        font-weight:normal; /* resets the bold set for the top level menu items */
        background:#f0eee9;
        color:#330000;
        line-height:1.4em; /* overwrite line-height value from top menu */
        border-bottom:1px solid #f0eee9; /* sub menu item horizontal lines */
    }

    #centeredsubmenu ul ul li a:hover,
    #centeredsubmenu ul li.active ul li a:hover,
    #centeredsubmenu ul li:hover ul li a:hover { /* This line is required for IE 6 and below */
        background:#330000; /* Sub menu items background colour */
        color:#f0eee9;
    }
 
     /* Make the sub menus appear on hover */
    #centeredsubmenu ul li:hover ul { /* This line is required for IE 6 and below */
        display:block; /* Show the sub menus */
    }