:root {
    --blue: #264653ff;
    --green: #32965dff;
    --yellow: #e9c46aff;
    --regular-yellow: #e9c46a70;
    --light-yellow: #e9c46a30;
    --orange: #f4a261ff;
    --light-orange: #f4a26130;
    --brown: #412722ff;
    --light-brown: #412722a0;
}
@font-face {
    font-family: "amatic"; 
    src: url("/font/AmaticSC-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "amatic"; 
    src: url("/font/AmaticSC-Regular.ttf");
}
#header {
    color: var(--brown);
    font-family: "amatic";
    padding-top: 30px;
    padding-bottom: 30px;
    height: 100%;
}
html, body {
      height: 100%;
  }
#header a {
    color: var(--brown);
    text-decoration: none;
    z-index: 1;
}
#header small {
    color: var(--light-brown)
}
#impressum {
    color: var(--regular-yellow) !important;
    font-family: "amatic";
    font-weight: bold !important;
    text-decoration: none;
    font-size: 25px;
}
.bg-brown {
    background-color: var(--brown);
}
.bg-solid-yellow {
    background-color: var(--yellow);
}
.bg-regular-yellow {
    background-color: var(--regular-yellow);
}
.bg-light-yellow {
    background-color: var(--light-yellow);
}
.border.card-body {
    background-color: var(--light-orange);
    border-color: var(--brown) !important;
}
h1, h2, h3, h4, h5 {
    color: var(--brown);
    font-weight: bold;
    font-family: "amatic";
}
a.nav-link {
    color: var(--regular-yellow) !important;
    font-family: "amatic";
    font-weight: bold !important;
    font-size: 30px;
}
.navbar-light .navbar-toggler {
    color: var(--regular-yellow) !important;
    border-color: var(--regular-yellow) !important;
}
p {
    color: var(--brown);
}