/**************************************************************************************/
.lipdiv { display:inline-block; overflow:hidden; }
.limdiv:first-of-type { margin-left:15px; font-size:24px; color:teal; animation: showup 7s infinite; }
.licdiv:last-of-type {  margin-left:24px;  width:0px;  animation: reveal 7s infinite; }
.licdiv:last-of-type span { color:mediumseagreen; font-size:18px; margin-left:-333px;  animation: slidein 7s infinite; }
@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}
@keyframes slidein {
    0% { margin-left:-600px; }
    20% { margin-left:-600px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}	
/**************************************************************************************/
.glow {
  font-size: 24px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}	
/**************************************************************************************/		
#wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
}

#container {
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    padding: 1em;
    width: 100%;
}

#h1 {
    animation: text-shadow 1.5s ease-in-out infinite;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
	text-align:center;
	margin-bottom:0px;
}

#h1:hover {
    animation-play-state: paused;
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }

    20% {  
        transform: translateY(-1em);
        text-shadow: 
            0 0.125em 0 #0c2ffb, 
            0 0.25em 0 #2cfcfd, 
            0 -0.125em 0 #fb203b, 
            0 -0.25em 0 #fefc4b;
    }

    40% {  
        transform: translateY(0.5em);
        text-shadow: 
            0 -0.0625em 0 #0c2ffb, 
            0 -0.125em 0 #2cfcfd, 
            0 0.0625em 0 #fb203b, 
            0 0.125em 0 #fefc4b;
    }
    
   60% {
        transform: translateY(-0.25em);
        text-shadow: 
            0 0.03125em 0 #0c2ffb, 
            0 0.0625em 0 #2cfcfd, 
            0 -0.03125em 0 #fb203b, 
            0 -0.0625em 0 #fefc4b;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
}
/**************************************************************************************/	
/* Create pseudo elements for both elements */
.text-effect-wrapper,
.text {
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
}
.text-effect-wrapper {
  /* Can be anything light-colored */
  --spotlight-color: white;
  overflow: hidden;
  position: relative;
  /* Shimmer animation */
  &::before {
    animation: shimmer 10s infinite linear;
    background: 
      radial-gradient(circle, var(--spotlight-color), transparent 25%) 0 0 / 25% 25%,
      radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% / 12.5% 12.5%;
    inset-block-start: -100%;
    inset-inline-start: -100%;
    mix-blend-mode: color-dodge;
    z-index: 3;
  }
  /* Extra filter to boost colors and contrast */
  &::after {
    backdrop-filter: blur(1px) brightness(90%) contrast(150%);
    z-index: 4;
  }
}
@keyframes shimmer {
  100% {
    transform: translate3d(50%, 50%, 0);
  }
}
.text {
  /* Mask colors */
  /* Should be black and white */
  --background-color: red;
  --text-color: black;

  /* Text color */
  /* Can be anything */
  --color-1: pink;
  --color-2: skyblue;

  /* Fuzzy white outline text */
  color: transparent;
  text-shadow: 
    0 0 0.02em var(--background-color), 
    0 0 0.02em var(--text-color),
    0 0 0.02em var(--text-color), 
    0 0 0.02em var(--text-color);

  /* Improve contrast of outline */
  &::before {
    backdrop-filter: blur(0.013em) brightness(200%);
    z-index: 1;
  }

  /* Add text color */
  &::after {
    background: linear-gradient(45deg, var(--color-1), var(--color-2));
    mix-blend-mode: multiply;
    z-index: 2;
  }
}

/* === Pen styling, ignore */

h1 {
  --font-size: clamp(1.25rem, 1.25rem + 6vw, 6.75rem);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  &:empty,
  &:focus {
    border: 2px dotted white;
    min-width: 1ch;
    outline-offset: 5px;
  }
}
/**************************************************************************************/		
		@keyframes blinkingText{
			0%{   opacity: 1;  color: red;    }
			
			50%{    opacity: 0; color: transparent; }
		 
			100%{   opacity: 1; color: red;    }
		}
		.blinking { animation: blinkingText 3s infinite; }
		
        @keyframes blink {
            0% { opacity: 1; }

            50% { opacity: 0; }

            100% { opacity: 1; }
        }

        @keyframes blinkc {
            0% { opacity: 1; }

            50% { opacity: 0; }

            100% { opacity: 1; }
        }
		
        .blinking-text {
            text-align: center;
            margin-top: 20%;
            font-size: 24px;
            color: green;
            animation: blink 2s infinite;
        }
        .blinking-contact {
            text-align: center;
            margin-top: 1px;
            font-size: 24px;
            color: #007acc;
            animation: blinkc 2s infinite;
        }