/* header and footer color */
:root {
  --cassiopeia-color-link: darkblue;
  --kokoro-purple: #400080;
  background-attachment: fixed;
}

/* header white to purple*/
.container-header {
  background-image: linear-gradient(90deg, #FFFFFF, var(--kokoro-purple));
}

/* header purple to white*/
.container-footer {
  background-image: linear-gradient(270deg, #FFFFFF, var(--kokoro-purple));
}

/* drop menu background*/
.mm-show {
  color: var(--cassiopeia-color-link);
  background-image: linear-gradient(125deg, #FFFFFF, var(--kokoro-purple));
}

.metismenu-item {
  color: var(--cassiopeia-color-link);
}

.metismenu-item:hover {
  color: darkred;
}

/* Banner height */
.container-banner .banner-overlay {
  height: 50vh;
}

/* move the banner text to top  */
.container-banner .banner-overlay .overlay{
  justify-content: normal;
}

body:before {
  content: "";
  position: fixed; /* Fixes the element to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Keeps the image behind your web content */
  
  /* Standard background properties (Notice 'fixed' is omitted) */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* Optional: Prevents recalculation flickering during iOS scroll */
  will-change: transform; 
}