<style>

#title-text {
	display: none !important; 

</style>

<style>

.expand-control-text {
    color: #0897E9;
	font-size: 15px !important;
	font-weight:500 !important;
}

.expand-icon, .aui-icon, .aui-icon-small, .aui-iconfont-chevron-right {
    color: #0897E9;
}

}
.wiki-content img.confluence-embedded-image, .wiki-content img.editor-inline-macro, .wiki-content table.wysiwyg-macro {
    cursor: grabbing;
}  

ul. {
	list-color: #0897E9;
	list-style: square;
}

hr {
    border-bottom: 5px solid #FEAC0E;
}  

</style>    

<style>
#title-text {
	display: none !important; 
}

.custom-button{
	font-weight: bold}

.composition-banner-overlay{
	background:rgba(0,0,0,0.0);min-height:inherit;position:relative;border-radius:5px;
}

.composition-banner-title{
	color: #FFFAF0!important;
	font-weight: 900;
	font-style: oblique;
}

.composition-banner-desc{
color: #000000!important;
}

.composition-banner-content {
width:100%;
height:100%;
}

a, a:visited, a:focus, a:hover, a:active, a.blogHeading {
    color: #000000;
}
 
</style>

<!--Aqui inserimos o texto --> 
 <div class="container">
    <p>Jornada do Aprendizado 2022<span class="typed-text"></span><span class="cursor"> </span></p>
  </div>   

<!-- Aqui formatamos e damos estilo para fonte -->
<style>
 
.container {
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1C1C1C
 }

.container p {
  font-size: 2rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
 }

.container p span.typed-text {   
  font-weight: bold;
  color: #FEAC0E;
}

.container p span.cursor {
  display: inline-block;
  background-color: #FFFFF0;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}

.container p span.cursor.typing {
  animation: none;
}

</style>
       

<!--Script que faz a animação da fonte -->
<script>

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = [" - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

</script>