#project-portfolio{
    position: relative;
    /* display: block;  */
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* bottom: 0;
    right: 0; */
    z-index: 100;
  }
  .canvisContainer{
    pointer-events:auto;
    top: 50%;
    left: 0;
    position: absolute;
    width: 100%;
    max-width: 100vw;
    z-index: -10;
    max-height: 95vh;
    aspect-ratio: 16/9;
    transform: translateY(-50%);
  }
  
  h1.niceFont{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

  }


  form {
    /* display: none; */
    pointer-events:auto;
  max-width: 520px;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
  margin: 2rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  font-family: system-ui, -apple-system, sans-serif;
  z-index: 2;

  transform-origin: top;
  transition: transform 0.8s ease;


    & h2 {
        color: var(--bg-color-0);
        margin-bottom: 1rem;
        margin-top: 0;
    }

    & > div {

        margin-bottom: 1.2rem;
    }

    & label {
    pointer-events:auto;
      display: block;
      margin-bottom: 0.3rem;
      font-size: 0.9rem;
      color: var(--bg-color-0);
    }

    & input,
    & textarea {
    pointer-events:auto;
        box-sizing: border-box;
        width: 100%;
        padding: 0.6rem 0.7rem;
        border: 1px solid var(--txt-color-0);
        border-radius: 4px;
        font-size: 0.95rem;
        display: block;
    }

    & input:focus,
    & textarea:focus {
      outline: none;
      border-color: var(--button-color-1);
      box-shadow: 0 0 0 2px var(--bg-color-0);
    }

    & textarea {
      resize: vertical;
    }

    & ::placeholder {
      color: var(--txt-color-0);
    }
    & button{
      
      pointer-events:auto;
    }

   
    
}
.letter {
  position: relative;
  perspective: 1000px;
}
#contactForm {
  transform-style: preserve-3d;
  opacity: 1;
  transform-origin: center;
  backface-visibility: hidden;
  transform: scale(1);
}
form::after {
  /* --svg-width: 50px;
  --svg-height:80.9px; */
  content: "";
  position: absolute;
  opacity: 1;
  transition: opacity 0.5s ease 0.80s;
  
  /*start nach 5,8s dauer 0,4  */
  inset: 0;
  z-index: -1;
  background: white;
  border-radius: 8px;
  backface-visibility: hidden;
  transform: rotateY(180deg);
   background:
    white
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><line x1='0' y1='0' x2='50' y2='50' stroke='black' stroke-width='1'/><line x1='100' y1='0' x2='50' y2='50' stroke='black' stroke-width='1'/></svg>") ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .rotate::after {
  opacity: 0;
}