:root {
  --cassiopeia-color-primary: #f0f9ff;
  --cassiopeia-color-hover: #f0f9ff; 
  --cassiopeia-color-link: blue;
}

/* Change header (logo and mod-menu included) */
.container-header {     
  display: flex;
  justify-content: space-between; /* Align items (logo and menu) to opposite sides */
  align-items: center /* Vertically center items */
}

/* change mod-menu (menu-items) of the header */
.container-header .mod-menu {  
  color: black;
  font-size: 20px;
  text-align: right;
}

.sidebar {
  display: flex;
  flex-direction: column; /* Stacks children vertically */
}

/* Media query for mobile devices */
@media (max-width: 768px) { 
  body {
    font-size: calc(100% - 2pt); /*Reduces the base font-size by 2pt */
  }
  .container-header {
    flex-direction: column; /* Stack logo and menu vertically */
    align-items: flex-start /* Align items to the left */
  }
  .container-header .mod-menu {
    text-align: right;
    font-size: 17px;
  }
  .custom-map { /* OSMap Module */
    display: block;
    width: 100%;
    margin-top: 10px;
  }
  .navbar-brand .brand-logo img { /* For the Logo */
    width: 250px;
    height: 125px;
    object-fit: contain; /* To ensure the image fits the dimensions without distortions */
  }
}

.footer {
  color: black;  /* change the font-color to black */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  padding: 15px;
}

/* Style for the left side of the footer */
.footer .left {
  text-align: left;
}

/* Style for the right side of the footer */
.footer .right {
  text-align: right;
}

/* Add space between items on the right side, aka. phone and website */
.footer .right a,
.footer .right p {
  margin-left: 20px;
}

.custom-map .card-header  {
  display: none; /* Hide title of the Module OSModul */
}