.notfound-sec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.notfound-div {
    width: 100%;
    text-align: center;
}

.notfound-number {
    background: #fff;
    position: relative;
    font: 900 30vmin 'Consolas';
    letter-spacing: 5vmin;
    text-shadow: 
        2px -1px 0 #000,
        4px -2px 0 hsl(0deg, 0%, 4%),
        6px -3px 0 hsl(0deg, 0%, 6%),
        8px -4px 0 hsl(0deg, 0%, 8%),
        10px -5px 0 hsl(0deg, 0%, 10%),
        12px -6px 0 hsl(0deg, 0%, 12%),
        14px -7px 0 hsl(0deg, 0%, 14%),
        16px -8px 0 hsl(0deg, 0%, 16%);
}

.notfound-number::before,
.notfound-number::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #673ab7;
    background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)),
                      radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0));
    background-repeat: no-repeat;
    background-size: 40vmin 40vmin;
    background-position: -100vmin 20vmin, 100vmin -25vmin;
    mix-blend-mode: screen;
    animation: moving 10s linear infinite both;
}

@keyframes moving {
    to {
        background-position: 100vmin 20vmin, -100vmin -25vmin;
    }
}

.notfound-text {
    display: block;
    font: 400 5vmin 'Courgette';
    text-align: center;
}

.notfound-text span {
    font-size: 10vmin;
}