body{
    background-color: black;
}
#loader.fade {
    opacity: 0;
}
#thanos {
    margin: auto;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#thanos text {
    fill: transparent;
    stroke-width: 2px;
    fill: white;
    stroke: #fff;
    stroke-dasharray: 850;
    stroke-dashoffset: 0;
    cursor: pointer;
    font-family: arial;
    font-weight: normal;
}

#thanos text {
    animation: thanos 5s ease;
    letter-spacing: 0.4cm;

}

@keyframes thanos {
    0% {
        stroke-dashoffset: 0;
        stroke-width: 0px;
        fill: transparent;
        letter-spacing: 9cm;
    }
    40% {
        stroke-dashoffset: 1700;
        stroke-width: 2px;
        fill: transparent;
    }
    20%{
        stroke-width: 0px;
    }
    80% {
        stroke-dashoffset: 1700;
        fill: transparent;
        stroke-width: 2px;
        letter-spacing: 0.4cm;
    }
    85%{
        fill: #fff;
    }
    100% {
        stroke-dashoffset: 1700;
        fill: #fff;
        stroke-width: 2px;
        

    }
}
@media screen and (max-width:500px) {
    #thanos {
        width: 300px;
        height: 300px;
    }
}
@media screen and (max-width:1280px) {
    #thanos {
        width: 500px;
        height: 500px;
    }
}
@media only screen and (max-width: 768px) {
    #thanos {
        width: 300px;
        height: 300px;
    }
  }