@font-face {
    font-family: "prueba";
    src: url(fonts/Best_Valentina_TTF.ttf); /* Eliminate other formats*/
}
.contenedor{
    box-sizing:border-box;
    width:100%;
    padding:10px;
}
.lienzo{ 
    border:1px solid #d9d9d9;  
}

.gradient-border {
    --borderWidth: 3px;
    background: white;
    position: relative;
    border-radius: var(--borderWidth);
  }
  .gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }

  .gradient-border2 {
    --borderWidth: 3px;
    background: white;
    position: relative;
    border-radius: var(--borderWidth);
  }
  .gradient-border2:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #b9e326, #9add31, #80c32a, #69a121, #5e8c0d, #0d8c2b, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }
  
  
  @keyframes animatedgradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }

  /* Animaciones para mensajes de éxito */
  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes fadeOut {
      from {
          opacity: 1;
          transform: translateY(0);
      }
      to {
          opacity: 0;
          transform: translateY(-10px);
      }
  }