body {
    font-family: Arial Rounded MT Bold;
    background: chartreuse;
    display: block;
    text-align: center;
      position: block;
      font-size: 16px;
    height: 100vh;
      overflow: auto;
  }


  
.container {
        display: flex;
        padding-top: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
       align-items: flex-start;
       object-fit: contain;
       gap: 20px 70px;
       height: 100px;
    
}
h1 {
  padding: 0px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  font-size: 150px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px rgb(255, 255, 255),0px 0px 10px rgb(255, 255, 255);
}

p {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
  font-style: italic;
  font-size: 20px;
  color: white;
  text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px pink,0px 0px 10px pink;
}

  .item {
	overflow: auto;
  text-align: justify;
  object-fit: contain;
  height: 200px;
  }

  body{
    max-width: 70%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50vh;
  }
  
  .gallery-section{
    position: relative;
  }
  
  .gallery-section img{
    width:40%;
    position: absolute;
    z-index:10;
    transition:all .5s;
    box-shadow: -3px 1px 5px rgba(0,0,0,.5);
  }
  
  .img1{
    left:5rem;
  }
  
  .img2{
    left:10rem;
    top:1rem;
  }
  
  .img3{
    left:15rem;
    top:2rem;
  }
  
    
  .img4{
    right:5rem;
    top:rem;
  }
  
  .img5{
    right:10rem;
    top:1rem;
  }
  
  .img6{
    right:15rem;
    top:2rem;
  }

  .img7{
    right: 20rem;
    top:3rem;
  }

  .img8{
    right:25rem;
    top:4rem;
  }

  .img9{
    right:15rem;
    top:2rem;
  }
  
  .gallery-section img:hover{
    z-index:20;
    transform: scale(1.2) rotate(-10deg);
  }
  
  .gallery-section:hover img:not(:hover){
    transform:scale(.9);
    opacity:0;
  }
  
  @media screen and (max-width:500px){
    .img1{
      left:5rem;
    }
  
    .img2{
      left:7rem;
    }
  
    .img3{
      left:10rem;
    }
  }

 /* .container {
    width:50%;
    margin:0 auto;
    position:relative;
    padding-top:75%;
}
.bg-image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(https://github.com/lottemarie/lottemarie.github.io/blob/ba0e2a7fbdf44dd7c5f03403773238c21d7070c3/submissions/Bildschirmfoto%202024-11-11%20um%2019.58.10.png?raw=true.jpg);
    background-repeat:no-repeat;
    background-size:contain;
}
/*.container {
    width:50%;
    margin:0 auto;
    position:relative;
    padding-top:75%;
}
.bg-image {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(https://github.com/lottemarie/lottemarie.github.io/blob/ba0e2a7fbdf44dd7c5f03403773238c21d7070c3/submissions/Bildschirmfoto%202024-11-11%20um%2019.59.53.png?raw=true);

    background-repeat:no-repeat;
    background-size:contain;
}