html, body {
    background-color:#321515;
    scroll-behavior: smooth;
    line-height: 1.2;
    width: 100vw;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: white;
}

.navbar {
    color: white;
    font-family: "Zen Kaku Gothic New", sans-serif;
    background-color: #7B3F3F;
}

.navi {
    display: flex;
    font-size: 30px!important;
    justify-content: space-between;
    list-style: none;
    margin: 0%;
    padding: 5%;
}

.klassiker {
    display: flex;
    text-align: center;
    margin: auto;
    justify-content: center;
    font-size: 4em;
}

.dach {
    width: 100vw;
    position: absolute;
    margin-top: 50vw;
}

.logo {
    width: 60vw;
    justify-self: center;
    display: flex;
    padding-top: 15%;
    padding-bottom: 5%;
}

h4 {
    font-weight: lighter;
    margin-bottom: 50vw;
}

.stand {
    width: 100vw;
}

.center {
    background-color: #7B3F3F;
}

h2 {
    font-weight: 200;
    font-size: 50px;
}

h3 {
    font-family: "Redacted Script", cursive;
    font-weight: 300;
    font-size: 20px;
    margin: 0%;
}

.Rotwein {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.rot {
    position: relative;
    justify-content: left;
    width: 30vw;
    margin-top: 35vw;
}

.rottext {
    background-color: #C39F9F;
    border-radius: 70px;
    margin-top: 35vw;
    margin-right: 7%;
    padding-left: 5%;
    padding-right: 2%;
}

.Weißwein {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-top: 20%;
}

.weißtext {
    background-color: #C39F9F;
    border-radius: 70px;
    text-align: left;
    position: relative;
    margin-left: 7%;
    padding-right: 5%;
    padding-left: 2%;
}

.weiß {
    position: relative;
    justify-content: right;
    display: flex;
    width: 30vw;
}

.Rosewein {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: 20%;
    padding-bottom: 10%;
}

.rose {
    position: relative;
    justify-content: left;
    width: 30vw;
}

.rosetext {
    background-color: #C39F9F;
    border-radius: 70px;
    margin-right: 7%;
    padding-right: 2%;
    padding-left: 5%;
}

.bottom {
    background-image: url(assets_heisserhirsch/stand.png);
    background-size: 100%;
}

.stand {
    background-color: #7B3F3F;
}

.Traubenpunsch {
    color: black;
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding-top: 5em;
}

.Apfelpunsch {
    color: black;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-top: 2em;
    padding-bottom: 0.5em;
}

.traube {
    position: relative;
    padding-left: 20%;
    width: 25vw;
}

.traubetext {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 70px;
    margin-left: 7%;
    padding-left: 5%;
    padding-right: 2%;
}

.apfel {
    position: relative;
    padding-left: 5%;
    margin-top: 2em;
    width: 25vw;
}

.apfeltext{
    margin-top: 2em;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 0,5;
    border-radius: 70px;
    margin-right: 7%;
    padding-left: 5%;
    padding-right: 2%;
}

h5 {
    font-weight: 400;
    font-size: 3em;
    text-align: center;
}

.hirsch {
    position: relative;
    align-content: center;
    padding-left: 30%;
}

.footer {
    position: relative;
    margin: auto;
    justify-content: center;
    font-size: 4em;
}

.instagram {
    padding-left: 37%;
    width: 12vw;
    height: 12vw;
}

.facebook {
    padding-left: 5%;
    width: 12vw;
    height: 12vw;
}

.kontakt {
    background-color: #7B3F3F;
}

h6 {
    margin-top: 20vw;
    padding-top: 5%;
    font-weight: 300;
    text-align: center;
    font-size: 20px;
}

p {
    font-family: "Redacted Script", cursive;
    font-weight: 300;
    text-align: center;
    font-size: 20px;
    padding-bottom: 7vw;
}