body {
    background-color: rgb(26, 24, 29);
    text-align: center;
    color: white;
    font-family: hairmeetsart;
}

.logo {
    line-height:250%;
	width:auto;
	margin:10em 20%;
	text-align:center;
}

#HairMeetsArtLogo{
    line-height:250%;
	width:auto;
	margin:10em 20%;
	text-align:center;
}

h1 {
    font-size: xxx-large;
    color: white;
    /*font:  oblique normal lighter 25px monospace, garamond;*/
    font-family: hairmeetsart;
}
.contact-info {
    font-size: 18px;
}

a {
    color: white;
    font-size: large;

}

@font-face {
    font-family: "hairmeetsart";
    src:    url("fonts/HairMeetsArtFont/fontsfree-net-avalon-webfont.woff"),
            url("fonts/HairMeetsArtFont/fontsfree-net-avalon-webfont.woff2");
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .image-item {
    flex-basis: calc(33.33% - 10px);
    margin-bottom: 10px;
  }

  @media (max-width: 768px) {
    .image-item {
      flex-basis: calc(50% - 10px);
    }
  }

  @media (max-width: 480px) {
    .image-item {
      flex-basis: calc(100% - 10px);
    }
  }

  .google-maps {
    position: relative;
    width: 100%;
    padding-bottom: 40%; /* Adjust this value to change the aspect ratio */
    overflow: hidden;
  }
  
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

    
  @media (max-width: 1165px) {
    .google-maps {
      padding-bottom: 60%; /* Adjust this value for a different aspect ratio on smaller screens */
    }
  
    .google-maps iframe {
      height: 100%;
    }
  }

  @media (max-width: 1207px) {
    .google-maps {
      padding-bottom: 60%; /* Adjust this value for a different aspect ratio on smaller screens */
    }
  
    .google-maps iframe {
      height: 100%;
    }
  }
  
  @media (max-width: 750px) {
    .google-maps {
      padding-bottom: 100%; /* Adjust this value for a different aspect ratio on smaller screens */
    }
  
    .google-maps iframe {
      height: 100%;
    }
  }
  .zurueck{
    margin-top: 10%;
  }