#msc {
    --gris:#efefef;   
    --griso:#333333;
    --color1: #000033;
    --color2: #a3896c;
    --color3:#977c33; 
    --color4: #917034;
    color:white;
    background-color: var(--gris);
    --border-width: 5px;
    --border-radius: 22px;
}

/*** FONT COLOR ***/
#msc .fc-white {
  color: white;
}
#msc .fc-griso {
  color: var(--griso);
}
#msc .fc-black{
  color:black;
}
#msc .fc-blue{
  color: var(--color1);
}
#msc .fc-color4{
  color: var(--color4);
}

/*** BACKGROUND COLOR ***/
#msc .bkg-white{
    background-color: white;
}
#msc .bkg-gris{
    background-color: var(--gris);
}
#msc .bkg-black{
    background-color:black;
}
#msc .bkg-white-2{
    background-color: rgba(255,255,255,.7);
}
#msc .bkg-color1{
    background-color:var(--color1) !important; 
}


/*** RECUADRO ***/
.animated-border-wrapper {
    background: #FCEFDA;
    background: -webkit-linear-gradient(90deg, rgba(252, 239, 218, 1) 0%, rgba(109, 222, 255, 1) 52%, rgba(103, 222, 136, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(252, 239, 218, 1) 0%, rgba(109, 222, 255, 1) 52%, rgba(103, 222, 136, 1) 100%);
    background: linear-gradient(90deg, rgba(252, 239, 218, 1) 0%, rgba(109, 222, 255, 1) 52%, rgba(103, 222, 136, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FCEFDA", endColorstr="#67DE88", GradientType=1);
    background-size: 400% 400%;
    animation: gradientMove 5s linear infinite;
    padding: 5px;
}

.animated-border-content {
    background: var(--color5);
    padding: 24px 50px;
    width: 100%;
}

.animated-border-content img {
    max-width: 100%;
    margin-bottom: 16px;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/*** FORMAS ***/
.glow-effect, .rotate-effect-slow, .rotate-effect-fast {
  will-change: transform, filter;
}
#msc .glow-effect {
  animation: color-glow 6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(82, 240, 170, 0.25))
          drop-shadow(0 0 12px rgba(82, 240, 170, 0.15));
  transition: filter 0.3s ease-in-out;
  transform-origin: center center;
  will-change: filter, transform;
}
#msc .rotate-effect-slow {
  animation: rotate 80s linear infinite;
  will-change: transform;
}

#msc .rotate-effect-fast {
  animation: rotate 10s linear infinite;
  will-change: transform;
}
#msc .text-box{
  background-color:var(--color3);
  color:white;
}

@keyframes color-glow {
  0% {
    filter: drop-shadow(0 0 6px rgba(82, 240, 170, 0.25))
            drop-shadow(0 0 12px rgba(82, 240, 170, 0.15));
  }
  25% {
    filter: drop-shadow(0 0 6px rgba(82, 240, 240, 0.25))
            drop-shadow(0 0 12px rgba(82, 240, 240, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(82, 141, 240, 0.25))
            drop-shadow(0 0 12px rgba(82, 141, 240, 0.15));
  }
  75% {
    filter: drop-shadow(0 0 6px rgba(155, 82, 240, 0.25))
            drop-shadow(0 0 12px rgba(155, 82, 240, 0.15));
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(82, 240, 170, 0.25))
            drop-shadow(0 0 12px rgba(82, 240, 170, 0.15));
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}