@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&family=Sue+Ellen+Francisco&display=swap');

body{
    margin:0;
    width:100vw;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background-color:#131313;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.bg0{
    background-color:#131313;
}

.container-fluid{
    padding:0;
    text-align:center;
}

.inicio{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

a{
    text-decoration:none;
}


/* ---------- TEXTOS ---------- */

.txt,
.txt2{
    transition:0.3s ease;
    color:white;
    font-size:40px;
    margin:0;
    user-select:none;

    text-shadow:
        -3px -3px 0 #000,
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000;

    margin-top:20px;
    margin-bottom:0;

    position:relative;
    z-index:1;
}

.txt:hover,
.txt2:hover{
    transform:scale(1.2);
    animation:arcoiris 6s linear infinite;
}


/* ---------- FUENTES ---------- */

.t1{
      font-family: "Sue Ellen Francisco", cursive;
  font-weight: 400;
  font-style: normal;
}


/* ---------- TOOLTIP ---------- */

.txt:hover::after,
.txt2:hover::after{

    content:attr(data-autor);

    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:100%;

    margin-top:10px;
    padding:8px 12px;

    background:black;
    color:white;

    border-radius:8px;

    font-size:20px;
    font-family:monospace;
    white-space:nowrap;

    z-index:9999;
}


/* ---------- ANIMACIÓN ---------- */

@keyframes arcoiris{

    0%   { color:#ff0000; }
    16%  { color:#ff8000; }
    33%  { color:#ffff00; }
    50%  { color:#00ff00; }
    66%  { color:#00ffff; }
    83%  { color:#0000ff; }
    100% { color:#ff00ff; }

}

.t1{ animation-delay:0s; }
.t2{ animation-delay:-1s; }
.t3{ animation-delay:-2s; }
.t4{ animation-delay:-3s; }
.t5{ animation-delay:-4s; }
.t6{ animation-delay:-5s; }