:root {
    --accentColor: rgb(255, 255, 255);
    --font: 'Karla', sans-serif;
    --delay: .3s;
}

#profilePicture, #profilePicture img {
    position: relative;
    width: 256px;
    height: 256px;
    display: block;
    margin: 10px auto 10px;
    border-radius: 10%;
    -webkit-tap-highlight-color: transparent;
}

#userName {
    color: var(--accentColor);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25;
    display: block;
    font-family: "Font Awesome 5 Free";
    width: 100%;
    text-align: center;
    text-decoration: none;
}

#links {
    max-width: 300px;
    width: auto;
    display: block;
    margin: 27px auto;
}

.link {
    position: relative;
    background-color: transparent;
    color: var(--accentColor);
    border: solid var(--accentColor) 2px;
    border-radius: 20px;
    font-size: 1rem;
    text-align: center;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px; /* 17px */
    text-decoration: none;
    /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}

@media (hover: hover) {
    .link:hover {
        background-color: var(--accentColor);
        color: var(--bgColor);
    }
}

.link:active {
    background-color: var(--accentColor);
    color: var(--bgColor);
}

#hashtag {
    position: relative;
    padding-bottom: 20px;
    color: var(--accentColor);
    font-size: 1rem;
    display: block;
    font-family: "Font Awesome 5 Free";
    width: 100%;
    text-align: center;

    /*  animation   */
    overflow: hidden;
    background: linear-gradient(90deg, var(--bgColor), var(--accentColor), var(--bgColor));
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear var(--delay) infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}


/*-------------------------animations-----------------------*/
@keyframes transitionAnimation {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}


/*-------------------------popup------------------------*/
/* credits: https://www.youtube.com/watch?v=lAS2glU0xlc */
.overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition: .5s ease-in-out;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.overlay:target .popup {
    transform: scale(1);
    top: 0;
    /* right: 0; */
    /* transform: rotate(0); */
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgb(84, 12, 151);
    background: linear-gradient(50deg, rgb(57, 7, 104) 0%, rgb(98, 0, 255) 35%, rgb(98, 0, 255) 65%, rgb(202, 21, 148) 100%);
    overflow: hidden;
}

.background span {
    width: 3vmin;
    height: 3vmin;
    border-radius: 3vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 5;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #583C87;
    top: 35%;
    left: 17%;
    animation-duration: 383s;
    animation-delay: -172s;
    transform-origin: -21vw 22vh;
    box-shadow: 6vmin 0 1.580797214835674vmin currentColor;
}
.background span:nth-child(1) {
    color: #FFACAC;
    top: 25%;
    left: 62%;
    animation-duration: 208s;
    animation-delay: -41s;
    transform-origin: -11vw 14vh;
    box-shadow: -6vmin 0 0.8829514541920243vmin currentColor;
}
.background span:nth-child(2) {
    color: #E45A84;
    top: 83%;
    left: 75%;
    animation-duration: 156s;
    animation-delay: -116s;
    transform-origin: -3vw 3vh;
    box-shadow: -6vmin 0 1.1537698036992206vmin currentColor;
}
.background span:nth-child(3) {
    color: #FFACAC;
    top: 93%;
    left: 88%;
    animation-duration: 73s;
    animation-delay: -286s;
    transform-origin: 7vw -7vh;
    box-shadow: -6vmin 0 1.4948381502879267vmin currentColor;
}
.background span:nth-child(4) {
    color: #E45A84;
    top: 89%;
    left: 44%;
    animation-duration: 360s;
    animation-delay: -311s;
    transform-origin: 25vw -17vh;
    box-shadow: 6vmin 0 1.3480610009977296vmin currentColor;
}
.background span:nth-child(5) {
    color: #FFACAC;
    top: 35%;
    left: 40%;
    animation-duration: 314s;
    animation-delay: -65s;
    transform-origin: -24vw 6vh;
    box-shadow: -6vmin 0 1.4355229375143266vmin currentColor;
}
.background span:nth-child(6) {
    color: #E45A84;
    top: 79%;
    left: 20%;
    animation-duration: 168s;
    animation-delay: -46s;
    transform-origin: 25vw 19vh;
    box-shadow: 6vmin 0 1.2963723744583744vmin currentColor;
}
.background span:nth-child(7) {
    color: #E45A84;
    top: 45%;
    left: 63%;
    animation-duration: 129s;
    animation-delay: -387s;
    transform-origin: 4vw 25vh;
    box-shadow: -6vmin 0 1.047743696102545vmin currentColor;
}
.background span:nth-child(8) {
    color: #583C87;
    top: 46%;
    left: 93%;
    animation-duration: 226s;
    animation-delay: -358s;
    transform-origin: 9vw 22vh;
    box-shadow: 6vmin 0 1.005968810120342vmin currentColor;
}
.background span:nth-child(9) {
    color: #FFACAC;
    top: 1%;
    left: 87%;
    animation-duration: 251s;
    animation-delay: -136s;
    transform-origin: 15vw 12vh;
    box-shadow: 6vmin 0 0.9238823004240933vmin currentColor;
}
.background span:nth-child(10) {
    color: #E45A84;
    top: 57%;
    left: 99%;
    animation-duration: 72s;
    animation-delay: -340s;
    transform-origin: -11vw -18vh;
    box-shadow: 6vmin 0 1.7266939426040246vmin currentColor;
}
.background span:nth-child(11) {
    color: #FFACAC;
    top: 25%;
    left: 88%;
    animation-duration: 154s;
    animation-delay: -306s;
    transform-origin: -12vw -24vh;
    box-shadow: -6vmin 0 1.0828355650012518vmin currentColor;
}
.background span:nth-child(12) {
    color: #E45A84;
    top: 48%;
    left: 78%;
    animation-duration: 341s;
    animation-delay: -371s;
    transform-origin: -4vw 22vh;
    box-shadow: 6vmin 0 1.1899958800073014vmin currentColor;
}
.background span:nth-child(13) {
    color: #E45A84;
    top: 4%;
    left: 72%;
    animation-duration: 112s;
    animation-delay: -342s;
    transform-origin: -5vw 3vh;
    box-shadow: 6vmin 0 1.044788316561004vmin currentColor;
}
.background span:nth-child(14) {
    color: #FFACAC;
    top: 32%;
    left: 40%;
    animation-duration: 138s;
    animation-delay: -238s;
    transform-origin: 3vw -5vh;
    box-shadow: -6vmin 0 1.0530471372557753vmin currentColor;
}
.background span:nth-child(15) {
    color: #583C87;
    top: 10%;
    left: 81%;
    animation-duration: 395s;
    animation-delay: -262s;
    transform-origin: -20vw -5vh;
    box-shadow: 6vmin 0 0.7596446867225606vmin currentColor;
}
.background span:nth-child(16) {
    color: #E45A84;
    top: 43%;
    left: 87%;
    animation-duration: 240s;
    animation-delay: -363s;
    transform-origin: -24vw -8vh;
    box-shadow: -6vmin 0 0.9654413596392042vmin currentColor;
}
.background span:nth-child(17) {
    color: #FFACAC;
    top: 60%;
    left: 82%;
    animation-duration: 13s;
    animation-delay: -219s;
    transform-origin: 20vw -10vh;
    box-shadow: 6vmin 0 1.3313353347446948vmin currentColor;
}
.background span:nth-child(18) {
    color: #FFACAC;
    top: 94%;
    left: 93%;
    animation-duration: 293s;
    animation-delay: -62s;
    transform-origin: -11vw 8vh;
    box-shadow: 6vmin 0 1.6161493289267297vmin currentColor;
}
.background span:nth-child(19) {
    color: #583C87;
    top: 30%;
    left: 67%;
    animation-duration: 382s;
    animation-delay: -174s;
    transform-origin: 10vw -19vh;
    box-shadow: -6vmin 0 0.8754609315248969vmin currentColor;
}
.background span:nth-child(20) {
    color: #FFACAC;
    top: 28%;
    left: 80%;
    animation-duration: 166s;
    animation-delay: -326s;
    transform-origin: -4vw -22vh;
    box-shadow: -6vmin 0 1.3474080505109562vmin currentColor;
}
.background span:nth-child(21) {
    color: #E45A84;
    top: 52%;
    left: 58%;
    animation-duration: 332s;
    animation-delay: -287s;
    transform-origin: 15vw -21vh;
    box-shadow: -6vmin 0 1.4516510289583229vmin currentColor;
}
.background span:nth-child(22) {
    color: #FFACAC;
    top: 37%;
    left: 20%;
    animation-duration: 62s;
    animation-delay: -182s;
    transform-origin: 17vw 1vh;
    box-shadow: -6vmin 0 1.4765850207882083vmin currentColor;
}
.background span:nth-child(23) {
    color: #583C87;
    top: 58%;
    left: 52%;
    animation-duration: 16s;
    animation-delay: -71s;
    transform-origin: -2vw 17vh;
    box-shadow: 6vmin 0 1.6361590938735568vmin currentColor;
}
.background span:nth-child(24) {
    color: #E45A84;
    top: 75%;
    left: 97%;
    animation-duration: 46s;
    animation-delay: -125s;
    transform-origin: 18vw 2vh;
    box-shadow: 6vmin 0 1.5142833694200473vmin currentColor;
}
.background span:nth-child(25) {
    color: #583C87;
    top: 22%;
    left: 98%;
    animation-duration: 400s;
    animation-delay: -261s;
    transform-origin: -2vw 20vh;
    box-shadow: 6vmin 0 1.5729576679469417vmin currentColor;
}
.background span:nth-child(26) {
    color: #583C87;
    top: 37%;
    left: 86%;
    animation-duration: 406s;
    animation-delay: -234s;
    transform-origin: 22vw -24vh;
    box-shadow: -6vmin 0 1.3913249133189358vmin currentColor;
}
.background span:nth-child(27) {
    color: #583C87;
    top: 8%;
    left: 75%;
    animation-duration: 397s;
    animation-delay: -105s;
    transform-origin: 16vw 5vh;
    box-shadow: -6vmin 0 1.0355115077722645vmin currentColor;
}
.background span:nth-child(28) {
    color: #E45A84;
    top: 22%;
    left: 91%;
    animation-duration: 207s;
    animation-delay: -34s;
    transform-origin: 9vw 7vh;
    box-shadow: -6vmin 0 1.642855158496235vmin currentColor;
}
.background span:nth-child(29) {
    color: #E45A84;
    top: 66%;
    left: 40%;
    animation-duration: 85s;
    animation-delay: -181s;
    transform-origin: -6vw 9vh;
    box-shadow: -6vmin 0 1.1629029052951012vmin currentColor;
}
.background span:nth-child(30) {
    color: #E45A84;
    top: 5%;
    left: 76%;
    animation-duration: 89s;
    animation-delay: -271s;
    transform-origin: -12vw 19vh;
    box-shadow: 6vmin 0 1.6247035573504967vmin currentColor;
}
.background span:nth-child(31) {
    color: #583C87;
    top: 57%;
    left: 70%;
    animation-duration: 58s;
    animation-delay: -238s;
    transform-origin: 23vw 17vh;
    box-shadow: -6vmin 0 1.6707143526960635vmin currentColor;
}
.background span:nth-child(32) {
    color: #E45A84;
    top: 91%;
    left: 55%;
    animation-duration: 229s;
    animation-delay: -338s;
    transform-origin: -11vw -20vh;
    box-shadow: 6vmin 0 1.2305243208657384vmin currentColor;
}
.background span:nth-child(33) {
    color: #FFACAC;
    top: 100%;
    left: 68%;
    animation-duration: 194s;
    animation-delay: -266s;
    transform-origin: -2vw 24vh;
    box-shadow: 6vmin 0 0.8672588582288183vmin currentColor;
}
.background span:nth-child(34) {
    color: #583C87;
    top: 22%;
    left: 41%;
    animation-duration: 330s;
    animation-delay: -7s;
    transform-origin: 17vw 4vh;
    box-shadow: -6vmin 0 1.2617741537216263vmin currentColor;
}
.background span:nth-child(35) {
    color: #E45A84;
    top: 30%;
    left: 57%;
    animation-duration: 186s;
    animation-delay: -412s;
    transform-origin: 13vw -13vh;
    box-shadow: -6vmin 0 1.583956878487054vmin currentColor;
}
.background span:nth-child(36) {
    color: #FFACAC;
    top: 35%;
    left: 11%;
    animation-duration: 79s;
    animation-delay: -25s;
    transform-origin: 5vw 10vh;
    box-shadow: -6vmin 0 1.4625021873079989vmin currentColor;
}
.background span:nth-child(37) {
    color: #583C87;
    top: 77%;
    left: 13%;
    animation-duration: 151s;
    animation-delay: -302s;
    transform-origin: 21vw -18vh;
    box-shadow: 6vmin 0 1.0489735027753508vmin currentColor;
}
.background span:nth-child(38) {
    color: #E45A84;
    top: 23%;
    left: 74%;
    animation-duration: 328s;
    animation-delay: -137s;
    transform-origin: 6vw -15vh;
    box-shadow: -6vmin 0 1.5645899158049852vmin currentColor;
}
.background span:nth-child(39) {
    color: #E45A84;
    top: 32%;
    left: 39%;
    animation-duration: 308s;
    animation-delay: -426s;
    transform-origin: 14vw 8vh;
    box-shadow: 6vmin 0 1.2318165422350038vmin currentColor;
}
.background span:nth-child(40) {
    color: #E45A84;
    top: 92%;
    left: 21%;
    animation-duration: 301s;
    animation-delay: -234s;
    transform-origin: 18vw -12vh;
    box-shadow: 6vmin 0 0.9081379998182992vmin currentColor;
}
.background span:nth-child(41) {
    color: #583C87;
    top: 78%;
    left: 100%;
    animation-duration: 304s;
    animation-delay: -336s;
    transform-origin: -14vw 23vh;
    box-shadow: -6vmin 0 1.0613887955573564vmin currentColor;
}
.background span:nth-child(42) {
    color: #E45A84;
    top: 80%;
    left: 25%;
    animation-duration: 29s;
    animation-delay: -445s;
    transform-origin: 0vw 7vh;
    box-shadow: 6vmin 0 0.9667456040620772vmin currentColor;
}
.background span:nth-child(43) {
    color: #FFACAC;
    top: 30%;
    left: 86%;
    animation-duration: 198s;
    animation-delay: -296s;
    transform-origin: -24vw 2vh;
    box-shadow: 6vmin 0 1.742057018461789vmin currentColor;
}
.background span:nth-child(44) {
    color: #583C87;
    top: 55%;
    left: 97%;
    animation-duration: 148s;
    animation-delay: -349s;
    transform-origin: -9vw 13vh;
    box-shadow: -6vmin 0 0.955340836086036vmin currentColor;
}
.background span:nth-child(45) {
    color: #FFACAC;
    top: 98%;
    left: 94%;
    animation-duration: 353s;
    animation-delay: -229s;
    transform-origin: 7vw 25vh;
    box-shadow: -6vmin 0 1.148160008069393vmin currentColor;
}
.background span:nth-child(46) {
    color: #583C87;
    top: 53%;
    left: 99%;
    animation-duration: 326s;
    animation-delay: -430s;
    transform-origin: -15vw -16vh;
    box-shadow: 6vmin 0 1.6901682526397988vmin currentColor;
}
.background span:nth-child(47) {
    color: #E45A84;
    top: 87%;
    left: 15%;
    animation-duration: 200s;
    animation-delay: -447s;
    transform-origin: 9vw -14vh;
    box-shadow: -6vmin 0 0.9048120654268501vmin currentColor;
}
.background span:nth-child(48) {
    color: #583C87;
    top: 45%;
    left: 48%;
    animation-duration: 290s;
    animation-delay: -187s;
    transform-origin: 2vw -16vh;
    box-shadow: -6vmin 0 1.2790444104303784vmin currentColor;
}
.background span:nth-child(49) {
    color: #583C87;
    top: 12%;
    left: 32%;
    animation-duration: 49s;
    animation-delay: -222s;
    transform-origin: 5vw 4vh;
    box-shadow: -6vmin 0 1.5643586909797917vmin currentColor;
}