*{     margin:0; 
    padding:0; 
}
@font-face {
    font-weight: 400;
    font-family: Klee One;
    src: url(fonts/Klee_One/KleeOne-Regular.ttf);
}
@font-face {
    font-weight: 600;
    font-family: Klee One;
    src: url(fonts/Klee_One/KleeOne-SemiBold.ttf);
}
@font-face {
    font-family: Beau Rivage;
    src: url(fonts/Beau_Rivage/BeauRivage-Regular.ttf);
}


body {
    height: 100%;
    margin:auto;
    background: linear-gradient(225deg, #CEDDF2 0%, #FFF 52.22%);
    font-family: Klee One; 
    display: flex;
    flex-direction: column;
    font-size: 1.5vw;
}
a {
    text-decoration: none;
    color: #000;
}
.headermain {
    background: url(img/barmsee.png), no-repeat center top;
    background-size: cover;
}

.headercontainer{
    max-width: 640px;
    max-height: 18%;
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 10%;
}
.logo {
    height: 20%;
    width: 35%;
    margin-left: 7vw;
    padding-top: 1vw;
}
.logo img {
    width: 15em;
}
.menu a{
    display: inline-block;
    padding-top: 15%;
    padding-right: 20px;
    color: #000;
    font-family: Klee One;
    font-size: 2vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.menu a:hover {
    color: #000;
    font-weight: 900;
}
.menu .icon {
    display: none;
}

.icon-home {
    padding: 5%;
    padding-right: 7vw;
    width: 5em;
    height: 5em;
}
@media  screen and (max-width: 1023.999px) {
    .menu {
        display: none;}
    }
.myMenu {
    position: relative;
    display: inline-block;
    padding: 5%;
   /* height: 12vw; */
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow: auto;
    z-index: 1;
    background: linear-gradient(225deg, #CEDDF2 0%, #FFF 52.22%);
    
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 3em;
    font-weight: 500;

}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #CEDDF2;
    text-decoration: underline;}

/* Show the dropdown menu on hover */
.icon-home:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.icon-home:hover img {background-color: none;}

.introduction {
    max-width: 640px;
    color: #000;
    font-family: Beau Rivage;
    font-size: 5vw;
    font-style: normal;
    font-weight: 500;
    line-height: 85%;
    letter-spacing: 0.1em;
    padding-bottom: 50%;
    text-align: center;
    /*margin-left: 10%;
    margin-right: 10%;*/
    margin-top: 0.5vw;
}
main {
    min-height: calc(100vh - 0px);
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 5%;
    margin-top: 5%;
}
h2 {
    text-align: center;
    margin-top: 5%;
    font-size: 10vw;
    font-weight: 700;
}
/*#Bestellung {
    margin-top: 15%;
}*/
#Services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.service {
    margin-top: 5%;
    margin-bottom: 5%;
    display:flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-self: center;
}
.buttonmehrdazu {
    align-self: center;
    width: 80%;
    margin-top: 7%;
    background-color: #a2bbff;
    border-radius: 40px;
    text-align: center;
    font-size: 4.5em;
    font-weight: 500;
    padding-bottom: 1%;
}
.buttonmehrdazu:hover {
    color: #ffffff;
    background-color: #4274fc;
}
.buttonmehrdazu:hover {
    color: #ffffff;
    background-color: #4274fc;
}
#Work {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.workItem {
    width: 100%;
    height: 200px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    margin-top: 5%;
    display:flex;
    justify-content: center;
}
.workItem:hover {
    background-color: #a2bbff;
}
.workItem a {
    font-weight: 600;
    font-size: 4.5em;
    text-align: center;
    align-self: center;
    padding-inline: 15%;
}


.workItem a:hover {
    color: #ffffff;
}
#AboutHead{
    margin-top: 5%;
}
#About {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center; 
    margin-top: 5%; 
}

.aboutMeBlock {
    width: 100%;
    margin-top: 5%;
    font-size: 5vw;
}

h3 {
    margin-bottom: 3%;
    font-size: 9vw;
}
/*
.hey {
    margin-left: 0;
}*/
.textAboutMe {
    margin: 8%;
    margin-top: 0%;
}
/*
.form {
    margin: 5%;
    display: flex;
    flex-direction: column;
}
.formulaer {
    margin-top: 10%;
}
h4 {
    margin-left: 2%;
    margin-right: 7%;
}
.formlines{
    display: flex;
    justify-content: space-between;
    margin-bottom: 3%;
}
::placeholder {
    padding-left: 10px;
    padding-top: 3px;
    font-style: italic;
}
.formBlock{
    width: inherit;
    border: 1px solid #000; 
    flex-grow: 2;
}
.message {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3%;
    height: 7em;
}
.formBlockmessage{
    border: 1px solid #000;
    flex-grow: 2;
}

.buttons {
    display: flex;
    justify-content: flex-end;
}
.button {
    height: 42px;
    width: 120px;
    border-radius: 30px;
    font-weight: 500;
    line-height: 32px;
    font-size: 100%;   
}
.btn {
    letter-spacing: 0.2em;
}
.submit {
    background: #0078D4;
    margin-right: 2%;
    border: none;
    color: #fff;
}
.clear {
    border: 1px solid #0078D4;
    color: #0078D4;
    background: #FFF;
    margin-left: 2%;
} */
.skillsList {
    text-align: center;
    font-size: 6vw;
}

.lang {
    margin-top: 5%;
    margin-bottom: 7%;
    text-align: center;
}
.languagesList {
    width: 33%;
    text-align: center;
    padding-top: 2%;
    flex-grow: 2;
}
.sprache {
    border: 0.05em solid #000;
}

.languages {
    width: 90%;
    margin-top: 3%;
    margin-left: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.row {
    display: flex;
    margin-bottom: 5%;
}
.tableCellBasic {
    display: flex;
    font-size: 1em;
    margin-left: 2%;
}
.bsc {
    padding-top: 7%;
}
.cont {
    margin-top: 5%;
    text-align: center;
}

.contacts {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 5%;  
}

.smm {
    width: 3em;
    height: 3em;
    margin: 0.3em;
    text-align: right;
}

footer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 50px;
    margin-right: 15%;
    margin-left: 15%;
    max-width: 640px;
}
.rechtstexte {
    width: 100%;
    font-weight: 600;
}
.rechtstexte li, .copywrite {
    list-style: none;
    padding-right: 5%;
    font-size: 4vw;
    
}


/*Case study App styles*/
.hamburgermenu {
    margin-top: 7%;
    margin-bottom: 5%;
}
.csappheadline {
    display: flex;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 500;
}
.uxui {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 3%;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5%;
}
.mainpicture {
    margin-right: 10%;
    width: 30%;
}
.description {
    text-align: center;
}
.descriptiontext {
    font-size: 1.75em;
    width: 80%;
    margin-left: 10%;
}
.titledescr {
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 2em;
    margin-left: 0;
    margin-right: 0;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}
.descriptionlist  {
    padding-left: 10%;
    font-size: 1.75em;
    width: 80%;
}
.descriptionlist li {
    list-style: none;
    text-align: center;
}
.prjpics {
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
}

/*Case Study Responsive*/
.bclappheadline {
    display: flex;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 500;
}
.web-tab-mob-pics {
    margin-right: 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 3%;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5%;
}
.prjpicsitem-one{
    margin-left: 10%;
}
.prjpicsitem-two {
    margin-bottom: 15%;
    margin-left: 10%;
}
.prjpicsitem-three {
    margin-left: 10%;
}

/*Logo*/
.logoheadline {
    display: flex;
    justify-content: center;
}
.logosblock {
    min-height: 60vh;
    margin-top: 5%;
}
.logoitem {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 3%;
    align-items: center;
    flex-wrap: wrap;
}
.logo-img {
    outline: 1px solid #000;
    width: 15vh;
    height: 15vh;

}
.logo-description h4 {
    font-size: 2.5em;
    font-weight: 600;
    margin-top: 5%;
    text-align: center;
    margin-bottom: 5%;
}
.p-logo-descrpt{
    font-size: 2em;
    text-align: center;
}


/*Bad Rappenauer Klassiktage*/
.flyerblock {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 3%;
    align-items: center;
    flex-wrap: wrap;
}
.flyer-img {
    flex-grow: 2;
}
.flyer-img img {
    border: 1px solid #000;
    width: 40vh;

}
.description-and-drafts {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}
.event-description {
    display: flex;
    flex-direction: column;
}
.event-description a{
    text-decoration: underline 0.5px;
}
.event-description h1 {
    font-size: 2.5em;
    font-weight: 600;
    margin-bottom: 2%;
    margin-top: 3%;
    text-align: center;
    text-decoration: underline;
}
.event-description p{
    font-size: 1.7em;
    font-weight: 400;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}
.drafts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5%;
    text-align: center;
}
.drafts h3 {
    font-size: 2em;
    font-weight: 600;
    text-decoration: underline;
}
.drafts img {
    border: 0.5px solid #000;
    margin-bottom: 5%;
    width: 90%;
}
.artsgalleryheadline {
    margin-top: 0%;
    margin-bottom: 0%;
}
.dtdrafts, .wcdrafts {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Arts Gallery */
.artsgalleryheadline {
    display: flex;
    justify-content: center;
}

h1 {
    margin-top: -5%;
}
.artsGallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 3%;
    align-items: center;
}

.artspic {
    width: 100%;
    margin-top: 3%;
    margin-bottom: 8%;
    border: 1px solid #000;
    box-shadow: 2px 2px 6px 3px #6290b4;
}

/* Datenschutzerklaerung */
.daten {
    font-size: 1em;

}
.daten h2{
    font-size: 1.5em;
}
.daten h3{
    font-size: 1.2em;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #0078D4;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #0078D4;
  }
  
  /* Add a background color and some padding around the form */
  .container {
    border-radius: 5px;
    padding: 20px;
  }