body {
  margin: 0;
  padding: 0;
}

h1,p,a{
  font-family: 'Bree Serif', serif;
}



.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #040614;
  z-index: -1;
}





grid-container {
  display: grid;                                              
  grid-auto-rows: 10vh;                                         
  grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); 
  grid-row-gap: 1.5%;
  grid-column-gap: 6%;
  margin-left: 7%;
  margin-right: 7%;
  margin-top: 7%;
  margin-bottom: 27%;
}
[item1] {
  grid-row: span 5;                                            
}
[item2] {
  grid-row: span 5;
}
[item3] {
  grid-row: span 7;
}
[item4] {
  grid-row: span 4;
}
[item5] {
  grid-row: span 5;
}
.item {
  font-weight: bold;
  background-size: cover;
  overflow: hidden;
  transition: border-radius 4s ease-in-out;
  position: relative;
}
#item_11 {
  height: 50vh;
  border-radius: 6vh 12vh 14vh 4vh;

}
#item_21 {
  height: 70vh;
  border-radius: 6vh 22vh 14vh 4vh;
}
#item_12 {
  height: 50vh;
  border-radius: 22vh 12vh 14vh 4vh;
}
#item_22 {
  height: 40vh;
  border-radius: 6vh 2vh 14vh 24vh;
}
#item_13 {
  height: 50vh;
  border-radius: 2vh 2vh 7vh 24vh;
}








.item_background {
  background-size: cover; 
  background-repeat: no-repeat; 
  width: 100%;
  height: 100%; 
  padding: 3%;
  position: absolute;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;

}

.item_background:hover {
  transform: scale(1.2);
}



#item_background_11 {
  background-image: url("me_002.jpeg");
  background-position: 50% 60%;
  width: 105%;
  left: 0%;
}
#item_background_21 {
  background-image: url("carona.png");
  background-position: 50% 40%; 
}
#item_background_12 {
  background-image: url("mechatronik_002.png");
}
#item_background_22 {
  background-image: url("bike.jpeg");
}
#item_background_13 {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-size: 50px 50px; /* makes the image smaller, repeats more */
  background-position: 50% 60%; 
  
}

.item_content {
  position: absolute;
  z-index: 2;
  top: 2vh;
  left: 2vh;
  bottom: 2vh;
  right: 2vh;
  margin: 0;
  pointer-events: none;
}


#h1_1 {
  position: absolute;
  bottom: 3.5vw;
  left: 3.5vw;
  text-align: left;
  margin: 0;
}
#h1_2 {
  position: absolute; 
  top: 1vw; 
  left: 0; 
  margin: 0;
  width: 100%;
  text-align: center;
}
#h1_3 {
  position: absolute; 
  top: 3vw; 
  margin: 0;
  left: 3vw; 
  text-align: left;
}
#h1_4 {
  position: absolute; 
  bottom: 1vw; 
  left: 0%;
  margin: 0;
  width: 100%;
  text-align: center;
}
#h1_5 {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-70%);
}



h1 {
  color: rgb(247, 247, 247);
  font-size: 50px;
}
#h1_3 {
  color: rgb(40, 39, 41);
  font-size: 50px;
}
#h1_5 {
  color: #ffffff;
  font-size: 50px;
}



p {
  color: white;
  font-size: 22px;
}





#jarg_logo_container {
  width: 500px; /* Set the width of the container */
  height: 400px; /* Set the height of the container */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#jarg_logo_container img {
     max-width: 100%; /* Make the image fit within the container */
    max-height: 100%; /* Make the image fit within the container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}





#ende {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#endeText {
  justify-self: center;
}
#impressum {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2%;
}
#impressumText {
  font-size: 25px;
  text-decoration: none; 
  color: white;
  padding: 2%;
  justify-self: center;
  transition: color 0.3s ease; 
}

#impressumText:hover{
  color:#6c7083;
}




@media screen and (max-width: 26cm) {

  .cursor {
    cursor: auto;
  }
  body {
    cursor: auto;
  }
  a {
    cursor: auto !important;
  }


  grid-container {
    display: grid;                                                
    grid-auto-rows: 5vh;                                         
    grid-gap: 0vh;                                               
    grid-template-columns: repeat(auto-fill, minmax(55%, 1fr));   
  }
  #item_11 {
    height: 40vh;
    border-radius: 6vh 12vh 14vh 4vh;
  }
  #item_12 {
    height: 40vh;
    border-radius: 22vh 12vh 14vh 4vh;
  }
  #item_21 {
    height: 60vh;
    border-radius: 6vh 22vh 14vh 4vh;
  }
  #item_22 {
    height: 35vh;
    border-radius: 6vh 2vh 14vh 24vh;
  }
  #item_13 {
    height: 40vh;
    display: flex;

    border-radius: 6vh 10vh 4vh 4vh;
  }




  [item1] {
    grid-row: span 9;                                            
  }
  [item2] {
    grid-row: span 9;
  }
  [item3] {
    grid-row: span 13;
  }
  [item4] {
    grid-row: span 8;
  }
  [item5] {
    grid-row: span 9;
  }


  .item_background:hover {
    transform: scale(1);
  }




  h1{
    font-size: 7vw;
  }



  #h1_1 {
    bottom: 5.5vmax;
    left: 4vmax;
    font-size: 7vw;
  }
  #h1_2 {
    top: 3vmax;
    font-size: 7vw;
  }
  #h1_3 {
    top: 5.5vmax;
    left: 4vmax;
    font-size: 7vw;
  }
  #h1_4 {
    bottom: 3vmax;
    font-size: 7vw;
  }
  #h1_5 {
    justify-self: center;
    font-size: 7vw;
  }

  #impressumText {
    font-size: 5vw;
    margin-bottom: 5vmax;
    margin-top:  3vmax;

  }




}