body{
    height: 100%;
    background-image: linear-gradient(to right,  rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.671)), url(Setup.jpg);
    background-size: cover;
    background-attachment: fixed;
}
.myh{
    font-size: 200%;
    text-decoration: underline;
    text-align:center;
    letter-spacing: 2pt;

    color: rgb(255, 115, 0);
}
#mainImage {
    cursor: pointer;
    margin-top: 200px;
    margin-left: 63%;
  }

  .overlayImage {
    position: absolute;
    width: 300px;
    height: 150px;
    top: 600;
    left: 400;
}
body {
    margin: 200;
    padding: 0;
  }
  
  .image-container {
    position: relative;
    overflow: hidden;
    width: 1000px; /* Ändere die Breite und Höhe entsprechend deinem Bild */
    height: 1000px;
  }
  
  .overlay-image {
    margin-top: 0%;
    width: 100%;
    height: auto;
  }
  S
  .overlay-container {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(117, 15, 15, 0.582); /* Ändere die Hintergrundfarbe und die Deckkraft nach Bedarf */
    transform-origin: 0 0;
    transform: skewY(-10deg); /* Ändere den Winkel des schrägen Overlays */
    z-index: 1; /* Stelle sicher, dass das Overlay über dem Bild liegt */
  }
  #image-container {
    position: relative;
  }

  #insertedImage {
    width: 100%; /* Beispiel: Das Bild nimmt die volle Breite des Containers ein */
    height: auto;
    display: block;
  }

  #insertButton {
    position: absolute;
    top: 50px; /* Beispiel: Der Button befindet sich 50 Pixel von oben */
    left: 100px; /* Beispiel: Der Button befindet sich 100 Pixel von links */
    background-color: black;
    border: none;
    cursor: pointer;
    z-index: 1; /* Damit der Button über dem Bild erscheint */
  }