body {
    margin: 5;
    font-family: Comic Sans MS,Arial, Helvetica, sans-serif;
    background: "img/Wood3.jpg";
    /*background-color: rgba(255, 221, 0, 0.393);*/
    color: rgb(58, 29, 4);
  }
  
  .topnav {
    overflow: hidden;
    background-color: rgb(128, 72, 7);
    position:fixed;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .boxartikel a:hover {
    /*background-color: burlywood;*/
    padding: 8px 28px;
    /*color: blue;*/
  }

  .topnav a:hover {
    background-color: burlywood;
    color: blue;
  }
  
  .topnav a.active {
    background-color: #362709;
    color: orange;
  }
  
  .topnav .icon {
    display: none;
  }
 
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }

  @media screen and (max-width: 730px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 730px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: fixed;/*absolute;*/
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      
    }

  }
/* für Bierstile*/

  .range-slider-container {
    width: 100%;
  }

  .range-slider {
    -webkit-appearance: none;
    appearance: none;;
    width: 100%;
    height: 20px;
    background: yellow;/*#e9c46a;*/
    outline: none;
    border-radius:40px;
    opacity: 0.8;
    transition: opacity .2s;
    box-shadow: inset 1px 2px 4px #1f1f1f;
  }
  
  .range-slider:hover {
    opacity: 1;
  }
  
  .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border-radius:50%;
    background-color: green;/*#e76f51; */
   cursor: pointer;
    box-shadow: inset 2px 2px 4px #1f1f1f;
  }
  
  .range-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius:50%;
    background-color: #e76f51;
    cursor: pointer;
    box-shadow: inset 2px 2px 4px #1f1f1f;
  }
 
.container {
  width: 100%;
  //*max-width: 600px;*/
    margin-left: 0px;
    margin: 1px;
    padding: 1px;
    /*background-color: #fff;*/
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px;*/
}

h1 {
    text-align: center;
    color: #333;
    font-weight: bold;
}

.frage {
    margin-bottom: 10px;
    font-size: 20px;
}

.frage p {
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}

label {
    display: block;
    margin-bottom: 5px;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 25px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}