@font-face {
    font-family: PlusJakartaSans;
    src: url("./assets/fonts/PlusJakartaSans-Medium.ttf");
    font-weight: 400;
}

@font-face {
    font-family: PlusJakartaSans;
    src: url("./assets/fonts/PlusJakartaSans-Light.ttf");
    font-weight: 300;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(219, 219, 219);
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(219, 219, 219);
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(219, 219, 219);
  }

html {
    scrollbar-face-color: #646464;
    scrollbar-base-color: #646464;
    scrollbar-3dlight-color: #646464;
    scrollbar-highlight-color: #646464;
    scrollbar-track-color: #000;
    scrollbar-arrow-color: #000;
    scrollbar-shadow-color: #646464;
    scrollbar-dark-shadow-color: #646464;
  }
  
  ::-webkit-scrollbar { width: 8px; height: 3px;}
  ::-webkit-scrollbar-button {  background-color: #000; height: 0px; }
  ::-webkit-scrollbar-track {  background-color: #646464;}
  ::-webkit-scrollbar-track-piece { background-color: #000;}
  ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
  ::-webkit-scrollbar-corner { background-color: #646464;}
  ::-webkit-resizer { background-color: #666;}


body {
    margin: 0;
    font-family: PlusJakartaSans;
    background-color: black;
}

.scroll_block {
    width: 100%;
    height: 20px;
    position: fixed;
    background-color: #000;
    z-index: 100;
}

.main_wrapper {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    border-radius: 50px;
    position: fixed;
    background-image: url("./assets/img/bass_claus_scheune_comic_ok.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.content_wrapper {
    width: 45%;
    padding: 50px;
    margin: auto;
    position: relative;
    display: block;
    transition: 0.2s ease-in;
}

.logo {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 650px;
}

.opening_text {
    font-size: 18px;
    font-weight: 300;
    color: #FFF;
    padding: 50px 10px 10px 10px;
}

.mail_text {
    font-size: 18px;
    font-weight: 300;
    color: #FFF;
    padding: 20px 10px 30px 10px;
}

.mail_text a {
  text-decoration: none;
  color: #FFF;
  font-weight: 400;
}

.row {
    width: 100%;
    overflow: auto;
}

.column_left {
    width: 50%;
    float: left;
}

.column_left img {
    display: block;
    width: 90%;
}

.column_right {
    width: 50%;
    float: left;
}

.contactform {
    width: 100%;
    overflow: auto;
}

.contactform form {
    margin: auto;
    display: block;
    width: 80%;
}

.contactform input {
    width: 100%;
    background: none;
    border-bottom: 1px solid #FFF !important;
    color: #FFF;
    padding: 10px;
    border: none;
}

.contactform input:focus-visible {
    border-bottom: 1px solid rgb(177, 177, 177) !important;
    outline: none;
}

.contactform textarea {
    width: 100%;
}

.contactform label {
    color: #FFF;
}

.submit {
  transition: 0.2s ease-in;
}

.submit:hover {
  background-color: #FFF;
  transition: 0.2s ease-in;
  color: #000;
}

.impressum {
    color: #FFF;
    font-weight: 300;
    font-size: 14px;
    padding: 50px 0;
}
  
  .masonry {
      column-count: 3;
      column-gap: 16px;
  }

  .masonry img {
    width: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5);
  }
  
  .masonry .mItem {
    display: inline-block;
    margin-bottom: 16px;
    width: 100%;
  }
  
  @media only screen and (max-width: 1300px) {
    .content_wrapper {
      width: 60%;
    }
  }

  @media (max-width: 1199px) {
    .masonry {
      column-count: 3;
    }
  }
  
  @media (max-width: 991px) {
    .masonry {
      column-count: 2;
    }
  }
  
  @media (max-width: 767px) {
    .masonry {
      column-count: 1;
    }

    .content_wrapper {
      width: 80%;
      padding: 50px 0;
    }

    .main_wrapper {
      border-radius: 20px;
    }

    .opening_text {
      text-align: center;
    }

    .mail_text {
      text-align: center;
    }
  }