@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap");

body {
    background: #000000;
    margin: 0;
}

.globe {
    width: 920px;
    height: 920px;
    background: url(smallglobe.gif);
    background-size: 920px;
    background-clip: text;
    -webkit-background-clip: text;
    color: #00000000;
    font-family: "DM Mono", monospace;
    font-weight: 500;
    word-wrap: break-word;
    line-height: 10px;
    letter-spacing: 2.8px;
    font-size: 12px;
    image-rendering: pixelated;
}

.globe:before {
    content: "";
    width: 920px;
    height: 920px;
    display: block;
    background: radial-gradient(closest-side, #5599dd 90%, #5599dd00);
    position: absolute;
    mix-blend-mode: color;
    z-index: 2;
}

.globe:after {
    content: "";
    width: 920px;
    height: 920px;
    display: block;
    background: radial-gradient(
        closest-side,
        #202020ff,
        #20202080 75%,
        #20202000 100%
    );
    position: absolute;
    top: 0;
    mix-blend-mode: screen;
    z-index: 1;
}

.shadow {
    width: 920px;
    height: 920px;
    background: linear-gradient(#00000080, #000000ff 25%);
    display: block;
    border-radius: 460px;
    position: absolute;
    top: 460px;
    z-index: 3;
    transform: scale(1.33);
    filter: blur(48px);
    animation: reveal 2.5s ease-out;
}

@keyframes reveal {
    from {
        top: 0px;
    }
    to {
        top: 460px;
    }
}