/* Global CSS available on all static sites */

@font-face {
  font-family: "Pompire";
  src: url("../Fonts/Pompiere-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #333;;
  font-family: "Pompire";
  color: white;
}


/* General Text Settings */

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(20px, 3vw, 28px);
  padding: 5px;
}

a {
      color: white;
      padding: 5px 10px;
      text-decoration: none;
      display: block;
      border-radius: 15px;
    }


.button {
  background-color: #fff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font-family: "Pompire";
  font-weight: bolder;
  font-size: 13px;
  line-height: 29px;
  padding: 0 10px 0 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: 100px;
}

.button:hover {
  background-color: #f7fafa;
}

.button:focus {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}

/* Navigation */

.header{
  z-index: 999;
  position: fixed;
  width:calc(100% - 10px);
}
    .nav {
      background-color: rgb(51, 51, 51,0.8);
      padding: 5px 10px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: clamp(1em, 3vw, 22px);
    }

    .nav .logo {
      color: #fff;
      font-size: clamp(1.5em, 4vw, 40px);
      
      display: inline-block;
    }

    .hamburger {
      cursor: pointer;
      float: right;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background-color: #fff;
      margin: 5px 0;
      transition: 0.4s;
    }

    .menu {
      display: none;
      flex-direction: column;
      background-color: #444;
      padding: 10px 0;
    }


    .nav a:hover {
      background-color: #555;
    }


    /* Sichtbar, wenn aktiv */
    .menu.active {
      display: flex;
    }


/* Footer */

footer {
  background-color: rgb(51, 51, 51,0.8);
  position: fixed;
  bottom:2px;
  width:calc(100% - 10px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(14px, 3vw, 16px);
}


footer a:last-child {
  border-radius: 100px;
}

.Logo-Bu-dreiPunkt{
  height: 60px;
  border-radius: 10px;
}

footer a:hover {
      background-color: #555;
    }



/*Media querrys*/


/*Header hamburger menu*/

@media screen and (min-width: 450px) {
  .hamburger {
    display: none;
  }

  .menu {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    background-color: transparent;
  }

  .menu a {
    color: white;
  }
}

@media screen and (max-width: 450px) {
  .Logo-Bu-dreiPunkt{
  height: 50px;
}
}