@font-face {
    font-family: 'impossible';
    font-style: normal;
    font-weight: 400;
    src: url('imposible_fill.woff2') format('woff2');
}
body, .text p { font-family: 'Courier', serif; }
button, input { font-family: 'Helvetica', sans-serif; }
#logo {
  font-family: 'impossible';
}
#logo span, header #logo svg  {
  display: none;
}
#logo::before {
  content: url('https://secretde.al/favicon_dark.png');
  padding: 0 10px 0 0;
  vertical-align: top;
}
svg {
  color: #ffff00;
}
button:hover > span svg, .actions a:hover > svg {
  color: #ff00ea;
}
.page a, .page actions.link {
  color: #ffff00;
}
.page a:hover, .page actions.link:hover {
  color: #ff00ea;
}
.home .page .page_split h1 {
  font-size: 5rem;
  font-family: 'impossible';  
  line-height: 5rem;
}
button:hover > span svg, .actions a:hover > svg {
  color: #ff00ea;
}
p {
    font-family: Arial, sans-serif;
}
.page .page_split, .page .page_grid, .page .page_center {
  min-height: 1vh;
}
.page .page_center > *, .page .page_grid > *, .page .page_split > * {
  margin: 2rem var(--page-margin-h);
}
.page_center div {
    max-width:80% !important;
}
.page_center .text {
  background: rgba(0,0,0,0.5);
  margin-top: 1rem;
  margin-bottom: 6em;
  padding: 0.2em 1em 1em;
  border-radius: 1em;
  max-width: 100% !important;
}
.page .actions > .emphasized {
  background: #ff00ea;
  color: #000;
}
.page .actions > .emphasized:hover {
  background: #000;
  color: #fff;
}
.page .actions {
  margin-bottom: 0;
}
h1.sd {
    position: relative;
    color: #000;
}
h1:before {
    content: attr(data-text);
    position: absolute;
    font-family: 'impossible';
    color: #fff;
    top:0;
    left:0;
    width: 0;
    height: 100%;
    overflow: hidden;
    animation: animate 8s linear infinite;
}
@keyframes animate {
    50% ,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}
.agents a {
  display: inline-block;
  color:transparent;
  text-shadow: 0px 0px 0px #fff;
  animation-duration:15s;
  animation-iteration-count: infinite;
  animation-delay: 15s;
  background-color: var(--bg-1);
  padding: 2px 7px 5px;
  border-radius: 7px;
}
.agents a:nth-of-type(9n-8) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: zmove 8s infinite ease-in-out;
}
@keyframes zmove {
  20% { transform: translateY(200%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: translateY(200%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  40% {
    transform: translateY(200%); 
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-7) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: lmove 8.5s infinite ease-in-out;
}
@keyframes lmove {
  20% { transform: skew(50deg) translateY(200%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(50deg) translateY(200%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  40% {
    transform: skew(50deg) translateY(200%); 
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-6) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: rmove 7.5s infinite ease-in-out;
}
@keyframes rmove {
  20% { transform: skew(-50deg) translateY(-200%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(-50deg) translateY(-200%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  40% {
    transform: skew(-50deg) translateY(-200%); 
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-5) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: llmove 8s infinite ease-in-out;
}
@keyframes llmove {
  20% { transform: skew(50deg) translateY(200%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(50deg) translateY(200%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-4) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: rrmove 9s infinite ease-in-out;
}
@keyframes rrmove {
  20% { transform: skew(-50deg) translateY(-200%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(-50deg) translateY(-200%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-3) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: lllmove 8.2s infinite ease-in-out;
}
@keyframes lllmove {
  20% { transform: skew(40deg) translateY(180%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(40deg) translateY(180%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-2) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: rrrmove 7.2s infinite ease-in-out;
}
@keyframes rrrmove {
  20% { transform: skew(-60deg) translateY(-220%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(-60deg) translateY(-220%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-1) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: llllmove 7.8s infinite ease-in-out;
}
@keyframes llllmove {
  20% { transform: skew(60deg) translateY(220%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(60deg) translateY(220%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
.agents a:nth-of-type(9n-0) {
  display: inline-block;
  text-shadow: 0px 0px 0px #fff;
  animation: rrrrmove 8.8s infinite ease-in-out;
}
@keyframes rrrrmove {
  20% { transform: skew(-40deg) translateY(-180%);
    opacity: 0;
    text-shadow: 0px 0px 50px;
  }
   30% {
    transform: skew(-40deg) translateY(-180%); 
     opacity: 0;
     text-shadow: 0px 0px 50px;
  }
  50% { 
    transform: skew(0deg) translateY(0%);
    opacity: 1;
    text-shadow: 0px 0px 50px;
  }
}
