body .footer {

    margin-top: 100px;

  z-index: 1;

  --footer-background:rgb(0, 0, 0);

  display: grid;

  position: relative;

  grid-area: footer;

  min-height: 12rem;

}

@media (orientation:portrait) {

  body .footer {

    margin-top: 100px;

  z-index: 1;

  --footer-background:rgb(0, 0, 0);

  display: grid;

  position: relative;

  grid-area: footer;

  min-height: 1rem;

}
}

body .footer .bubbles {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1rem;

  background: var(--footer-background);

  filter: url("#blob");

}

body .footer .bubbles .bubble {

  position: absolute;

  left: var(--position, 50%);

  background: var(--footer-background);

  border-radius: 100%;

  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);

          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);

  transform: translate(-50%, 100%);

   z-index: 0;

}



@-webkit-keyframes bubble-size {

  0%, 75% {

    width: var(--size, 4rem);

    height: var(--size, 4rem);

  }

  100% {

    width: 0rem;

    height: 0rem;

  }

}



@keyframes bubble-size {

  0%, 75% {

    width: var(--size, 4rem);

    height: var(--size, 4rem);

  }

  100% {

    width: 0rem;

    height: 0rem;

  }

}

@-webkit-keyframes bubble-move {

  0% {

    bottom: -4rem;

  }

  100% {

    bottom: var(--distance, 10rem);

  }

}

@keyframes bubble-move {

  0% {

    bottom: -4rem;

  }

  100% {

    bottom: var(--distance, 10rem);

  }

}


.wrapper-footer{

    width: 100vw;

    height: auto;

    padding-bottom: 50px;

    background-color: black;

    color: white;

}



.blocchi-footer{

    margin-top: 165px;

    display: flex;

    font-family: Poppins;

}

.blocco-footer{

    text-align: left;

    margin: 10px;

}

h4{

    font-size: 30px;

    margin: 0;

}

.p_footer{
  font-size: 55px;
  max-width: 700px;
  padding-left: 120px;
  padding-right: 40px;
  font-family: 'Cookie', sans-serif !important;
  margin-top: -12px ;
}

.copyright{

    background-color: rgb(10,10,10);

    color: white;

    font-size: 12px;

}

@media (orientation:portrait) {

.blocchi-footer{

   flex-direction: column;

}

    

}

.footer a{

    text-decoration: none;

    color: white;

}

@media (orientation:landscape) {

.blocchi-footer{

  justify-content: space-around;

}

}