:root {
    --bar-height: 72px; /* Height of the navigation bar */
    --color-primary: #3B3355;
    --color-primary-light: #8E8DBE;
}

.navbarNavAltMarkup {
    background-color: var(--color-primary);
}

h1.MainBody {
    text-align: center;
    font-size: xx-large;
    color: #ffffff;
}

.header {
    display: none; /* Consider removing if not needed */
}

.bar {
    background: var(--color-primary);
    height: var(--bar-height);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transition: background 0.15s;
}

.bar__content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bar__logo {
    height: 100%;
}

.bar__nav-toggle {
    cursor: pointer;
}

.bar__nav-toggle > i {
    color: #ffffff;
    font-size: 2em;
}

button {
    align-self: center;
    background-color: var(--color-primary);
    color: #ffffff;
}

#inpNavToggle {
    display: none; /* Hidden checkbox for mobile toggle */
}

#inpNavToggle:checked ~ .nav {
    display: flex; /* Show nav when toggle is checked */
}

.nav {
    display: none; /* Initially hidden */
    flex-direction: column;
    position: fixed; /* Fixed position to cover the screen below the bar */
    top: var(--bar-height); /* Start below the navbar */
    left: 0;
    width: 100%;
    height: calc(100vh - var(--bar-height)); /* Full height minus navbar */
    padding: 32px;
    background: var(--color-primary);
    box-sizing: border-box;
}

.nav__link {
    font-weight: 500;
    padding: 16px 0;
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__link:hover {
    opacity: 0.8; /* Hover effect for links */
}

@media screen and (min-width: 767px) {
    .bar__nav-toggle {
        display: none; /* Hide toggle on larger screens */
    }

    .nav {
        display: initial; /* Show nav normally on larger screens */
        position: static; /* Reset position for static layout */
        width: auto; /* Reset width for normal flow */
        height: auto; /* Reset height for normal flow */
        padding: unset; /* Remove padding for static layout */
        background: transparent; /* Transparent background in static mode */
    }

    .nav__link {
        border-bottom: none; /* No borders in static mode */
        margin-right: 24px; /* Space between links */
        display:inline-block; /* Ensure inline layout for links */
   }
}

body {
   /* margin-top: var(--bar-height); /* Add margin to body equal to navbar height */
   margin-left: 0;
   margin-right : 0 ;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   background-color:#8E8DBE; 
   color:white; 
   text-align:center; 
}

/* Header styles (if used) */
.header {
   height:auto; 
   background-color:
      linear-gradient(to bottom right, var(--color-primary), var(--color-primary-light));
   display:flex; 
   align-items:center; 
   padding-top :var(--bar-height); 
   box-sizing:border-box; 
}

/* Centered container styles */
.u-centered {
    /*max-width: 500px;*/
    /* padding: 32px; */
    box-sizing: border-box;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    margin-left: auto;
    margin-right: auto;
}

/* Button hover effect */
button:hover {
   background :transparent; 
   color :#ffffff; 
}

/* General button styles */
.button {
   background-color:#04AA6D; 
   border:none; 
   color:white; 
   padding :15px 32px; 
   text-align:center; 
   text-decoration:none; 
   display:inline-block; 
   font-size :16px ; 
   border-radius :8px ; 
}

/* Content styles */
.content {
   text-align:center ; 
   color:white ; 
}