@font-face {
  font-family: Kalam;
  font-style: cursive;
  font-weight: 400;
  font-display: swap;
  src: url('../font/Kalam-Regular.ttf') format('ttf');
}


body,h1,h2,h3,h4,h5,h6  {
  #font-family: Kalam, Arial, sans-serif, Roboto;
  font-family: Kalam, Roboto;
}



/* Banner Image */
.mybanner {
  min-width: 100%;
  margin: auto;
  width: fit-content;
}

/* Menu */

/* Override the lila background with white */
.container-header {
  background-color: #d3d08b;
  background-image: none;
}

/* Text should now be red */
.container-header .mod-menu {
  #color: #0088cc;
  #color: #8789af;
  color: #FF0000;
  background: #FCF7EC;
  margin: .5em 0;
  border: solid 1px #ddd;
}

/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  #border-radius: 0 0 6px 6px;
  #padding: 3px 15px;
  #color: #0088cc;
  #color: #8789af;
  #color: #8b8ed3;
}

/* On hover there should be a gray background*/
.container-header .mod-menu a:hover {
  background-color: #eee;
}

/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler .nav-item {
  color: #FF0000;
  border: 1px solid #FF0000;
}

.site-grid {
  background-color: white;
}

.header {
  background-color: white;
}

.grid-child {
  padding: 3px 15px;
  background-color: white;
}

.footer {
  background-color: #f4f6f7;
  background-image: none;
}

.item-content {
  #border: solid 1px #8b8ed3;
  #background: #fcfcfc; 
  #border-radius: 4px;
  #padding: 20px;
  #margin-bottom: 10px;
  #box-shadow: 0px 0px 10px #8b8ed3;
}

.com-content-article {
  #border: solid 1px #8b8ed3;
  #background: #fcfcfc; 
  #border-radius: 4px;
  #padding: 20px;
  #margin-bottom: 10px;
  #box-shadow: 0px 0px 10px #8b8ed3;
}

.com-contact-category {
  border: solid 1px #8b8ed3;
  background: #fcfcfc; 
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #8b8ed3;
}

.category-desc {
  border: solid 1px #8b8ed3;
  background: #fcfcfc; 
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #8b8ed3;
}


.sidebar-left {
  border: solid 1px #ddd;
  background: #FCF7EC;
  box-shadow: 0px 0px 10px #8b8ed3;
  border-radius: 4px;
}

.grid-container {
  display: grid;
  grid-template-columns: 90% 10%;
  margin-left: 1em;
  padding: 10px;
  font-size: 1.5em;
  text-align: center;
}

.item {
  padding: 10px;
  border: 1px solid #000;
  font-size: 1.0em;
}

.my-blog-items {
  border: solid 1px #ddd;
  background: #fcfcfc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 5px #8b8ed3;
}


.fussmenue {
  display: flex;
  flex: 50%;
  flex-direction: row;
  padding:  5px;
  text-indent: 2em;
  color: #FF0000;
  #border: solid 1px #ddd;
  background: #FCF7EC;
  #box-shadow: 0px 0px 10px #E7A36F;
  #border-radius: 4px;
}

.nav-item {
  padding: .25em 0.4em;
}

.offline-card .header h1 {
  display: none;
}

tbody,
td,
tfoot,
th,
thead,
tr,
td {
  border-width:1px;
  border-style:solid;
  border-color:black;
  padding:10px;
  text-align:justify;
}

.grid-container {
        display: grid;
        grid-template-columns: 65% 35%;
        margin-left: 2em;
    }

    .grid-container > div {
        border: solid 1px #555555;
        font-size: 1.0em;
        padding: 10px 10px 10px 10px;
        text-align: center;
   }