:root {
     --bgcol: #a59e99;
     --textcol: #000000;
     --olive: #83781bff;
     --muted-olive: #95b46aff;
     --sage-green: #709255ff;
     --olive-leaf: #3e5622ff;
     --evergreen: #172815ff;
}
 @font-face {
     font-family: gi;
     src: url("assets/nunito.ttf");
}
 * {
     font-family: "gi";
}
 body {
     background-color: var(--bgcol);
     color: var(--textcol);
     padding: 0px;
     margin: 0px;
     font-family: "gi";
     text-align: center;
     overflow-x: hidden;
}
.brbig {
   display: block;
   margin: 0px 0;
}

.desc1 {
  margin-bottom: 0px;
}

 .header {
     position: absolute;
     top: 50px;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 50px;
     color: #fff3f7;
}
 .topnav {
     overflow: hidden;
     background-color: #585452;
     position: sticky;
     top: 0px;
     left: 0px;
     z-index: 10000000000000000000000000;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 50px;
     padding: 10px;
}

 .topnav a {
     float: left;
     color: #91c816;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
}
 .topnav a:hover {
     background-color: #91c816;
     color: #565252;
}

 .topnav .icon {
     display: none;
}
 .navlogo {
     background-image: url("assets/logo.png");
     background-size: contain;
     height: 50px;
     width: 183px;
     background-repeat: no-repeat;
}
 .main {
     background-color: #92849e;
}
 .i1i {
     width: 100vw;
     height: auto;
}
 .s1 {
     position: relative;
     background-color: #a8968f;
}
 .i2i {
     width: 66vw;
     height: auto;
     display: block;
}
 .about {
     display: flex;
     margin: 0px;
     justify-content: space-between;
}
 .abouttext {
     text-align: center;
}
 .i3 {
     height: fit-content;
     margin: 0px;
     padding: 0px;
}
 .i3i {
     width: 325px;
     height: auto;
     margin-right: 20px;
     padding: 0px;
}
 .desc {
     color: #120606;
}
 .p1 {
     font-size: 18px;
}
 .s2 {
     background-color: #92849e;
     padding: 20px;
     text-align: left;
}
 .header2 {
     text-align: center;
     margin: 0px;
}
 .stext {
     height: fit-content;
     width: 100vw;
     position: absolute;
     z-index: 1;
     top: 70px;
     background-color: #585452;
     color: #ffe0e9;
     font-size: 40px;
     margin: 0px;
     padding: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .stext p {
     margin: 0px;
}
 p {
     font-size: 18px;
}
 li {
     font-size: 18px;
}
 a {
     color: #120606;
     text-decoration: underline;
}
 .i2 {
     background-color: #482320;
     display: flex;
     justify-content: center;
}
 .spacer {
     width: 325px;
     height: 1px;
}
 .s3text {
     width: 50vw;
}
 .stext h3 {
     padding: 0px;
     margin: 0px;
}
 .services {
     min-width: 60%;
     max-width: 90%;
}
 @media screen and (max-width: 768px) {
     .about {
         flex-direction: column;
    }
     .abouttext, .i3i {
         width: 100%;
    }
}
 @media screen and (max-width: 600px) {
     .topnav {
         padding: 5px 10px;
    }
     .navlogo {
         width: 110px;
         height: 32px;
         flex-shrink: 0;
    }
     .links {
         display: flex;
         flex-wrap: nowrap;
    }
     .topnav a {
         padding: 8px 6px;
         font-size: 13px;
         white-space: nowrap;
    }
     .stext {
        top: 10;
         font-size: 20px;
         padding: 8px;
         white-space: nowrap;
         text-align: center;
    }
     .stext h3 {
         font-size: clamp(14px, 4vw, 20px);
    }
     .s2 {
         text-align: center;
    }
     .services {
         width: 100%;
         max-width: 100%;
         min-width: 0;
         padding: 0;
         list-style-position: inside;
    }
     .services li {
         text-align: center;
    }
     .desc, .abouttext, .kontakt, .s3text, .s4, .about {
         text-align: center;
         width: 100%;
    }
     .about {
         flex-direction: column;
         align-items: center;
    }
     .s3text {
         width: 100% !important;
    }
     .abouttext h1, .abouttext p, .kontakt h1, .kontakt p {
         text-align: center;
         width: 100%;
         margin-left: auto;
         margin-right: auto;
    }
     .kontakt p a {
         text-align: center;
         display: block;
    }
}