@import url(https://fonts.bunny.net/css?family=montserrat:400);
@import url(https://fonts.bunny.net/css?family=acme:400);
@import url(https://fonts.bunny.net/css?family=aldrich:400);
@import url(https://fonts.bunny.net/css?family=antic-slab:400);
@import url(https://fonts.bunny.net/css?family=ABeeZee:400);


html {
    font-family: 'Montserrat', sans-serif;
    color:#fff;
}

.font-acme{
    font-family: 'Acme', sans-serif;
}

.font-aldrich{
    font-family: 'Aldrich', sans-serif;
}

.font-AnticSlab{
    font-family: 'Antic Slab', serif;
}

.font-ABee{
    font-family: 'ABeeZee', sans-serif;
}

.glitch{
    transition: .3s all ease;
    cursor: pointer;
    letter-spacing: 7px;
    text-shadow: #ff0000 0 0, #ff0000 0 0;
}

.glitch:hover{
    text-shadow: #ff0000 -5px 0, #ff0000 -5px 0;
}

.aura{
    letter-spacing: 2px;
    text-shadow:1px 1px 5px red,
    0 0 1em white,
    0 0 0.2em white;


}

.sombra:hover{
    text-shadow: #201547 -4px 0, #ff0000 -3px 0;
}

.typing{
    display:block;
    white-space: nowrap;
    border-right: 4px solid;
    width: 18ch;

    animation: typingKey 2s steps(18), blink .5s infinite step-end alternate;
    overflow: hidden;
}

@keyframes typingKey{
    from { width: 0 }
}

@keyframes blink {
    50% { border-color: transparent }
}

.static {
    background: 
      repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
      repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
    background-blend-mode: difference;
    animation: b .2s infinite alternate;
  }
  @keyframes b{
    100% {background-position: 50% 0, 60% 50%}
  }

.fondo1 {
    background: rgb(113,108,136);
background: linear-gradient(113deg, rgba(113,108,136,1) 0%, rgba(29,21,70,1) 46%, rgba(102,83,201,1) 100%);
}

.nav {
  text-align: center;
  border-bottom: 1px solid hsla(0,0%,100%,0.1);
}
  
.nav-link {
  text-decoration: none;
  display: inline-block;
  color: #fff;
}
  
.nav-link:hover {
  text-decoration:none;
  color: #98a3af;
  border-bottom: 2px solid #c3fae8;
}
  
.nav-link.current {
  border-bottom: 2px solid #38d9a9;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #ffccff transparent transparent;
}

li{
  color:#D8D7CF;
  font-weight: bold;
  padding-left: 1.2em;
}

.marker-size{
  font-size: 3rem;
}


/** SPINNER */
.spinner {
  position: none;
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.hand {
  cursor: pointer;
}