@font-face {
    font-family: 'costurademibold';
    /* src: url('costura_demibold-webfont.eot'); */
    src: url('costura_demibold-webfont.eot?#iefix') format('embedded-opentype'),
         /* url('costura_demibold-webfont.woff2') format('woff2'), */
         url('costura_demibold-webfont.woff') format('woff'),
         url('costura_demibold-webfont.ttf') format('truetype'),
         url('costura_demibold-webfont.svg#costurademibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Kingthings Xstitch';
    font-style: normal;
    font-weight: normal;
    src: local('Kingthings Xstitch'), url('Kingthings_Xstitch.woff') format('woff');
    }




html, body{ 
    font-family: sans-serif;
    margin: 0rem;
    
    
}
.heimatbild {
    
   background-image: url("../img/stickhintergund.jpg");
   background-size: contain;
   background-position: center;
   width: 100%;
   height: 100vh;
}
.textarea  {

    width: 100%;
    height: 100%;

  
    font-family:'costurademibold';
    
  
    margin-bottom: 15rem;

    /* weiß nicht warum, wenn ich border lösche ist layout kaputt */
    border:0.1px dotted rgb(255, 255, 255);


}

h1{
    text-align: center;
   margin-top: 24rem;
   font-size: 3.5rem;

   color:rgb(126, 9, 63);
   -webkit-text-stroke:0.8px rgb(151, 62, 104);
   
       }


 .heimatjson{
    font-size:2.9rem;
    margin: 10 auto;
    text-align: center;
    color: rgb(9, 47, 126);
    -webkit-text-stroke:1px rgb(35, 60, 114)
} 
  /* The popup form - hidden by default */
  .form-popup {
    display: none;
    position: fixed;
   /* max-height: 100vh; */
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
  }
  #myform{
    display:"none";
  }
/* .stickyform{
  position: absolute;
  left: 1rem;
  right: 1rem;
  text-align: center;
  margin: 10rem 2rem 0rem 2rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} */

/* form {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -10rem;;
    border: 2px solid pink;
} */

/* label{
    border-radius: 50%;
    background-color: rgb(134, 21, 21);
    border: 20px solid rgb(255, 251, 192);

} */



@media screen and (min-device-width: 200px) and (max-device-width: 459px) and (orientation : landscape){

    /* body{
        
     } */

     h1{
         margin-top:-80rem;
         /* border: 5px dotted black; */
         font-size: 2rem;
           }

           .textarea {
               position: relative;
               bottom: 40rem;
               top: -18rem;
            /* border: 3px dotted green; */
     
      } 
  }
 @media screen and (min-device-width: 460px) and (max-device-width: 989px) and (orientation : landscape){

    /* body{
         border:3px dotted rgb(172, 71, 255);
   
     } */
     .heimatbild {
    
        background-size: contain;
    
     }
     h1{
         margin-top:-60rem;
         /* border: 5px dotted black; */
           }

           .textarea {
               position: relative;
               bottom: 10rem;
               top: -20rem;
            /* border: 3px dotted green; */
     
      } 
  } 

@media screen and (min-device-width: 990px) and (max-device-width: 1824px) and (orientation : landscape){

   /* body{
        
  
    } */
    h1{
        margin-top:15rem;
        font-size: 2rem;
          }
      
 }



@media (max-width: 930px) { 

    .heimatbild {
    
        /* border: 5px solid green; */
     
        background-size: cover;
        /* background-position: center;
        width: 100%;
        height: 100vh; */
     }
    h1{
      margin-top:34rem;
        }
       
 }


@media (max-width: 768px) { 
    .textarea{
        /* border:3px solid rgb(255, 71, 117); */
        width: 90%;
        margin-left: 1rem;
        margin-right: 1rem;
  
    }

    h1{
      margin-top:26rem;
        }
        .heimatjson{
            font-size:1.5rem;
            /* margin: 30 auto; */
        } 

 }

 
@media (max-width: 540px)  { 
    .textarea{
        /* border:3px solid tomato; */
        width: 90%;
        margin-left: 1rem;
        margin-right: 1rem;
  
    }

    h1{
        /* color: rgb(63, 175, 136); */
        text-align: center;
       margin-top: 15rem;
       font-size: 1.9rem;
        /* text-shadow: 1px 1px 2px black; */
        /* background: hsl(190,50%,80%); */
        /* color:hsl(190,50%,80%); */
        /* text-shadow: 
          -1px -1px 10px hsl(190,50%,90%), 
          1px 1px 1px rgb(63, 231, 147); */
       
           }
        .heimatjson{
            font-size:1.5rem;
            /* margin: 10 auto; */
            /* color:rgb(170, 102, 155); */
            text-align: center;
            /* border: 3px solid black; */
            margin-top: 1rem;

        } 
          /* The popup form - hidden by default */
  .form-popup {
  /* display:none; */
  height: 20%;
  width: 50%;
  position: fixed;
  top:0px;
  font-size: 0.5rem;
  
  }
  #anfrage{
    width:100%;
  }

 }
 @media (width: 414px) { 
  
    h1{
        margin-top:20rem;
    }
 }
 @media (max-width: 350px) { 
     .textarea{
        margin-top: 0rem;
     }
     h1{
        margin-top:9rem;
          }
  
 } 
 @media (max-width: 280px) {
  
  
    h1{
        font-size: 1.3rem;
        margin-top:15rem;
          }
          .heimatjson{
            font-size:1rem;
            margin-top: 2rem;

        } 
  }
  @media (max-width: 240px)  {
  
    h1{
        font-size: 1.3rem;
        margin-top:6rem;
          }
          .heimatjson{
            font-size:1rem;
            margin-top: 1rem;

        } 
  }

  /* css formular popup */

  * {box-sizing: border-box;}
  /* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background-color: #589d4d;
   
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
  }

  
  /* Add styles to the form container */
  .form-container {
    max-width: 330px;
    padding: 10px;
    background-color: white;
  }
  
  /* Full-width input fields */
  .form-container input[type=text] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  }
  
  /* When the inputs get focus, do something */
  .form-container input[type=text]:focus, .form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
  }
  
  /* Set a style for the submit/login button */
  .form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
  }
  
  /* Add a red background color to the cancel button */
  .form-container .cancel {
    background-color: rgb(126, 9, 63);
  }
  

  /* Add some hover effects to buttons */
  .form-container .btn:hover, .open-button:hover {
    opacity: 1;
  }