body{
background-size:contain;
background-repeat: no-repeat;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: 'Open Sans', sans-serif;

}

@media screen and (max-width: 700px){
nav{display: none;
}
#mainimg{display:none}
#mainimgadd{display:none}
#mainimg2{
    width: auto;    
    height: 100%;
  position: fixed;
  z-index: -1;
}
.melanie{
    margin: 20% 10% 10% 10%;
}

p{font-size: 1.5em;

} 
header{
    text-align: center;
    padding: 5% 0 0 0;
    width:auto;
    height: 100%;
  
}

#headline{
 
font-size: 26px; 
color: white;
}
#subline{ 
font-size: 26px;
color: white;
}
.yogatext{
    color: white;
    font-size: 1.25em;
    padding: 0 5% 0 5%;
}
.yogatext2{
    color: white;
    font-size: 1em;
    padding: 0 5% 0 5%;
}
#midpart{
    margin: 25% -4% 0 0;
    background-color: #e5e5e5;
    height: 1000px;
    width: auto;
    padding-top: 10%;
}
#midtext{
    position: inherit;
    margin: 0 5% 0 5%;
    font-size: 1em;
    color: #4b4f58;
   
}
.yogastunden{
    margin: 15% 0 0 0;
    font-size: 1em;
    color: #4b4f58;
   
}
.info{
    margin:-1% -4% 0 0 ;
    width: auto;
    height: 200%;
    background-color: #ffffff;
    padding: 12% 12%;
    color: #4b4f58;
    font-size: 1em;
}
footer{font-size: 9px;}

}

.button-29 {
   
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #dd84e3 0, #ff54bb 100%);
    border: 0;
    border-radius: 6px;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono",monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 18px;
    margin: 10% 5% 0 5%;
  }
  
  .button-29:focus {
    box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  }
  
  .button-29:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
  }
  
  .button-29:active {
    box-shadow: #3c4fe0 0 3px 7px inset;
    transform: translateY(2px);
  }





@media screen and (min-width: 700px){
    #mainimg2{display:none}
    #mainimg{position: fixed;
        top: 0%;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
      z-index: -1;
    }
    nav{ 
        background-color: white;
        display: inline;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: right;
    }
    #melanie{
        margin-right: 30%;
        display: inline;
    
        font-size: 1.2em;
    }
   nav a{ 
        margin-right: 8%;
        text-decoration: none;
        color: black;
        font-size: 1.5em;
    }
    p{color: white;
    font-size: 1.2em;
margin: 0 5% 0 5%}
    header{
        text-align: center;
        margin: -20% 30% 0 0%
    }
    #headline{
     
    font-size: 65px; 
    color: white;
    }
    #subline{ 
    font-size: 44px;
    color: white;
    }
    .yogatext{
        color: white;
        font-size: 38px;
        padding: 0 5% 0 5%;
    }
    .yogatext2{
        color: white;
        font-size: 28px;
        padding: 0 30% 0 5%;
    }
    #midpart{
        margin: 5% -2% 0 0;
        background-color: #e5e5e5;
        height: 1650px;
        width: auto;
        padding: 5% 10% 0% 10%;
        font-size: 28px;
    }
    #midtext{
        position: inherit;
        margin: 0 5% 0 5%;
        font-size: 1em;
        color: #4b4f58;
       
    }
    .yogastunden{
        margin: 15% 0 0 0;
        font-size: 1em;
        color: #4b4f58;
       
    }
    .info{
        margin:-0.3% -2% 0 0 ;
        width: auto;
        height: 200%;
        background-color: #ffffff;
        padding: 12% 12%;
        color: #4b4f58;
        font-size: 1.2em;
    }
    footer{font-size: 1em;}
}