html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0%;
        min-height: 160vh;
        scroll-behavior: smooth;
    }
     *{
        background-color: black;
        padding: 0%;
        margin: 0%;
        box-sizing: border-box;
        user-select: none;   
    }
       .container {
        display: grid;
        grid-template-columns: repeat(20,5%);
        grid-template-rows: repeat(32,3.125%);
        height: 100%;
        width: 100%;
    }
        .textben {
        grid-area: 5/2/18/10;
         color: white;
           font-family: "Caveat", cursive;
           margin-left: -1.3em;
           font-size: 1.4em;
    }   
    .head {
        grid-area: 1/1/2/20;
          font-family: "Bebas Neue", sans-serif;
              color:rgb(251, 218, 156);
              font-size: 7em;
              margin-left: 0.5em;
              margin-top: 0.2em;
    }

    .components {
        grid-area: 22/1/22/5;
                font-family: "Bebas Neue", sans-serif;
              color:rgb(251, 218, 156);
        font-size: 2em;
        text-align: center;
    }
    .pic0{
        grid-area: 22/11/27/14;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
        margin-top: -3em;
        margin-left: 4em;
    }
        .pic1{
        grid-area: 21/15/32/20;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
    }
        .pic2{
        grid-area: 28/11/34/14;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
        margin-top: -3.4em;

        margin-left: 4em;
    }
    .pic3{
        grid-area: 3/12/18/20;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
    }
      .pic4{
        grid-area: 22/5/29/11;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
    }

    .a1{
        grid-area: 30/5/30/11;
        color: white;
        text-align: center;
        font-family: "Bebas Neue", sans-serif;
        font-size: 2em;

    }
    .a2{
        grid-area: 31/5/31/11;
        color: white;
        text-align: center;
              font-family: "Bebas Neue", sans-serif;
              font-size: 2em;
    }
        .down{
        filter: invert(100%) sepia(0%) saturate(23%) hue-rotate(8deg) brightness(105%) contrast(105%);
        width: 100%;
        background-color: transparent;
        margin-left: 50%;
        transition: 0.3s;
          scroll-behavior: smooth;
        ;
  
    }
       .down:hover{
        animation: hover .3s ease;
        margin-top: 10%;
        filter: invert(89%) sepia(10%) saturate(1346%) hue-rotate(342deg) brightness(100%) contrast(90%);
    }


      .down2{
        grid-area: 19/10/19/10;
    }

        .flower1 {
        grid-area: 1/10/4/12;
        width: 90%;
         height: 100%;
        border-radius: 1em;
  
    }
     .flower2 {
        grid-area: 18/1/21/4;
        width: 70%;
rotate: 110deg;
            height: 100%;
        border-radius: 1em;
    }


        @keyframes hover{
        from{
            filter: invert(100%) sepia(0%) saturate(23%) hue-rotate(8deg) brightness(105%) contrast(105%);
        }

        to{
            filter: invert(89%) sepia(10%) saturate(1346%) hue-rotate(342deg) brightness(100%) contrast(90%);
        }
    }