html{
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

body {
    margin: 0;
    scroll-snap-type: y mandatory;
    background-color: #041B24;
    padding: 0;
    position: relative;
    font-family: monospace;
    color:white;
    scroll-behavior: smooth;
  }
    section{
        min-height: 100vh;
        max-height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
  }
  
  .start {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .start .arrow{
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 50px;
    background-image: url("img/arrow-down-svgrepo-com.svg");
    background-size: contain;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(171deg) brightness(101%) contrast(101%);
  }
  .start .arrow:hover{
    animation-play-state: paused;
  }

  @keyframes move{
    0%{transform: translateY(0px);}
    50%{transform: translateY(20px);}
    100%{transform: translateY(0px); }
  }

  .start .clip{
    width: 31vw;
    height: 31vw;
    min-height: 220px;
    min-width: 220px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
  }
  
  .start .clip .logo {
    width: 30vw;
    height: 30vw;
    min-height: 200px;
    min-width: 200px;
    border-radius: 25px;
    background-image: url("img/logo1_1.avif");
    position: relative;
    background-size: contain;
    background-clip: border-box;
  }
  
  .start .clip .logo::after {
    border-radius: 25px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: var(--shadow-x, 0) var(--shadow-y, 0) 10px 5px #13789d;
             
  }
  
  
  .sidebar{
    width: 100px;
    height: 100vh;
    position: fixed;
    top:10vh;
    display: flex;
    justify-content: center;
    z-index: 10;
    opacity: 0;
  }
  .sidebar .slide{
    width: 3px;
    height: 81%;
    border-radius: 10px;
    background-color:   gray;
    position: relative;
  }
  .sidebar .slide .prog{
    position: absolute;
    width: 3px;
    border-radius: 10px;
    height: 0;
    background-color: aqua;
  }
  .pg{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #666565;
    border-radius: 10px;
    transition: all .2s ease-in-out;
  }
  .pg1{
    top: 20%
  }
  .pg2{
    top: 40%
  }
  .pg3{
    top: 60%
  }
  .pg4{
    top: 80%
  }

  
  
  .home {
    position: relative;
    width: 100%;
    height: 100vh;

  }
  .skils{
    min-width: 250px;
    width: 30vw
  }
  .skils .balcken{
    height:4px;
    width: 100%;
    border-radius: 2px;
    background-color: grey;
  }
  .skils .balcken .bals{
    height: 4px;
    min-width: 1px;
    border-radius: 2px;
    background-color: #0ff;
    transition: width, ease-in-out 1.5s;
  }



  .tag {
    color: white;
    font-family: monospace;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-left: 10vw;
    width: 80vw;
  }
  .absl{
    width: 100%;
    height: 100%;
    position: relative;
  }
 .fr{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  p{
    font-size: 8px;
  }
  #form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .input-group {
    position: relative;
    margin-top: 10px;
   }
   .input {
    border: solid 1.5px #9e9e9e;
    border-radius: 1rem;
    background: none;
    min-width: 250px;
    width: 30vw;
    padding: 1rem;
    font-size: 1rem;
    color: #f5f5f5;
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
    resize: none;
   }
   .textarea{
    border: solid 1.5px #9e9e9e;
    border-radius: 1rem;
    background: none;
    min-width: 250px;
    width: 30vw;
    padding: 1rem;
    font-size: 1rem;
    color: #f5f5f5;
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
    resize: none;
   }
   .user-label {
    position: absolute;
    left: 15px;
    color: #e8e8e8;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4,0,0.2,1);
   }
   
   .input:focus, input:valid {
    outline: none;
    border: 1.5px solid #0ff;
   }
   .textarea:focus, textarea:valid{
    outline: none;
    border: 1.5px solid #0ff;
   }
   .textarea:focus ~ label, textarea:valid ~ label {
    transform: translateY(-50%) scale(0.8);
    background-color: #212121;
    padding: 0 .2em;
    color: #0ff;
   }
   
   .input:focus ~ label, input:valid ~ label {
    transform: translateY(-50%) scale(0.8);
    background-color: #212121;
    padding: 0 .2em;
    color: #0ff;
   }
   .send{
    border: solid 1.5px #9e9e9e;
    border-radius: 1rem;
    background: transparent;
    min-width: 250px;
    width: 32.5vw;
    padding: 1rem;
    font-size: 1rem;
    color: #f5f5f5;
    cursor: pointer;
   }
   .send:hover{
    background: #0ff;
   }



   .split{
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
    width: 100%;
    height: 95vh;
    padding-left: 2.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
   }
   .examples{
    width: 45vw;
    height: 90vh;
   }
   .examples h1{
    margin-left: 2.5vw;
   }
   .work{
    width: 45vw;
    height: 90vh;    
   }
   .work h1{
    margin-left: 2.5vw;
   }
   .wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }
   .card{
    background-color: #13789d;
    width: 40vw;
    height: 26vh;
    margin-top: 2.5vh;
    border-radius: 20px;
    transition: all .2s ease-in-out;
   }
   .card#e1{
      background-image: url("img/Screenshot-2023-05-14-at-17.18.45.avif");
      background-size: cover;
   }
   .card#e2{
      background-image: url("img/Screenshot\ 2023-09-04\ at\ 11.53.56.png");
      background-size: cover;
   }
   .card#w1{
    background-image: url("img/image1.avif");
    background-size: cover;
   }
   .card#w2{
    background-image: url("img/GK.avif");
    background-size: cover;
   }
   .card:hover{
    box-shadow: 10px 10px 30px #000000
   }
   


   .footer{
    width: 100%;
    height: 300px;
    max-height: 300px;
    background-color: #041B24;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
        scroll-snap-stop: always;
   }
   .line{
    position: absolute;
    top:0;
    left:5vw;
    width: 90vw;
    height: 5px;
    border-radius: 5px;
    background-color: #03141b;
  }
  .footer .Info{
    width: 45vw;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer .Pages{
    width: 45vw;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;

  }
  .footer .Ident{
    position: absolute;
    bottom: 0;
  }
  .footer h2{
    margin: 5px;

  }
  .footer a{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
  }

  
  .animate {
    opacity: 0; 
    transition: opacity 1s, transform 1s; 
  }
  .animateT {
    opacity: 0;
    transform: translateY(-100%); 
    transition: opacity 1s, transform 1s; 
  }
  .animateB {
    opacity: 0; 
    transform: translateY(100%);
    transition: opacity 1s, transform 1s; 
  }
  .animateR {
    opacity: 0; 
    transform: translateX(100%);
    transition: opacity 1s, transform 1s; 
  }
  .animateL {
    opacity: 0; 
    transform: translateX(-100%); 
    transition: opacity 1s, transform 1s; 
  }
  .visible {
    opacity: 1; /* Setzt die Transparenz auf 1, um das Element sichtbar zu machen */
    transform: translateY(0); /* Verschiebt das Element auf den Ausgangspunkt (0% Translation auf der X-Achse) */
  }