@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Ubuntu", sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #333;
}
h1
{
    position: absolute;
    color: #333;
    top: 130;
    background-clip: text;
    -webkit-text-stroke-color: transparent;
    -webkit-text-stroke-width: calc(1em / 16);
    -webkit-background-clip: text;
    letter-spacing: calc(1em / 8);
    font-weight: bold;
    font-size: 6.5vmin;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    animation: animate 2s linear infinite;
    transition: 3s;
}
@keyframes animate{
    0%{
        background-image: linear-gradient(90deg, #ff00d2, #fed90f, #09f1b8);
        transition: 3s;
    }
    25%{
        background-image: linear-gradient(180deg, #ff00d2, #fed90f, #09f1b8);
        transition: 3s;
    }
    50%{
        background-image: linear-gradient(270deg, #ff00d2, #fed90f, #09f1b8);
        transition: 3s;
    }
    75%{
        background-image: linear-gradient(360deg, #ff00d2, #fed90f, #09f1b8);
        transition: 3s;
    }
    100%{
        background-image: linear-gradient(450deg, #ff00d2, #fed90f, #09f1b8);
        transition: 3s;
    }

}
ul
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
ul li
{
    list-style: none;
}
ul li a
{
    position: relative;
    font-size: 2em;
    text-decoration: none;
    margin: 10px 0;
    display: inline-block;
    color: #fff;
    text-shadow: 
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #f09,
    0 0 82px #f09,
    0 0 92px #f09,
    0 0 102px #f09,
    0 0 151px #f09;
    animation: glow 0.50s ease-in-out infinite alternate-reverse;
}
@keyframes glow{
    100%{
        text-shadow: 
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #f09,
        0 0 80px #f09,
        0 0 90px #f09,
        0 0 100px #f09,
        0 0 150px #f09,
    }
    0%{
        text-shadow: 
        0 0 4px #fff,
        0 0 10px #fff,
        0 0 18px #fff,
        0 0 38px #f09,
        0 0 73px #f09,
        0 0 80px #f09,
        0 0 94px #f09,
        0 0 140px #f09,
    }
}
#marker
{
    position: absolute;
    top: 0;
    width: 100px;
    height: 50px;
    display: flex;
    transition: 0.5s;
    align-items: center;
    justify-content: space-between;
}
#marker::before
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(45deg) translate(-20px, 20px);
    animation: marker 1s linear infinite;
}
#marker::after
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(225deg) translate(-20px, 20px);
}
#marker1
{
    position: absolute;
    top: 60;
    width: 100px;
    height: 50px;
    display: flex;
    transition: 0.5s;
    align-items: center;
    justify-content: space-between;
}
#marker1::before
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(45deg) translate(-35px, 35px);
}
#marker1::after
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(225deg) translate(-35px, 35px);
}
#marker2
{
    position: absolute;
    top: 117;
    width: 100px;
    height: 50px;
    display: flex;
    transition: 0.5s;
    align-items: center;
    justify-content: space-between;
}
#marker2::before
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(45deg) translate(-40px, 40px);
}
#marker2::after
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(225deg) translate(-40px, 40px);
}
#marker3
{
    position: absolute;
    top: 175;
    width: 100px;
    height: 50px;
    display: flex;
    transition: 0.5s;
    align-items: center;
    justify-content: space-between;
}
#marker3::before
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(45deg) translate(-67px, 67px);
}
#marker3::after
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(225deg) translate(-67px, 67px);
}
#marker4
{
    position: absolute;
    top: 230;
    width: 100px;
    height: 50px;
    display: flex;
    transition: 0.5s;
    align-items: center;
    justify-content: space-between;
}
#marker4::before
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(45deg) translate(-6px, 6px);
}
#marker4::after
{
    content: '';
    width: 15px;
    height: 15px;
    border-right: 4px solid #30a3ff;
    border-top: 4px solid #30a3ff;
    transform: rotate(225deg) translate(-6px, 6px);
}
.footer
{
    top: 70%;
    position: absolute;
    font-size: 10px;
    animation: color linear infinite 3s;
    cursor: not-allowed;
}
@keyframes color
{
    0% {
        color: #09f1b8;
    }
    50%{
        color: #fed90f;
    }
    100%{
        color: #09f1b8;
    }
}