@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    --highlight-color: white;
    --shadow-color: rgb(1, 55, 220);
    --size: 10rem;
    --font-size-1: 5rem;
    --font-size-2: calc(var(--font-size-1) * 1.4);
    --text-padding: 1.4rem;
    --line-height: 0.9;
    --letter-spacing: 0.5rem
}

body, .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
}

body {
    height: 100svh;
    background-color: black;
    color: white;
    margin: auto;
    align-items: flex-start;
}

.wrapper {
    margin: 3rem;
    animation: flicker 10s infinite;
}

.data {
    width: var(--size);
}

.name {
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
    padding-left: var(--text-padding);
    text-align: center;
    line-height: var(--line-height);
}

.hash {
    font-size: var(--font-size-2);
    letter-spacing: var(--letter-spacing);
}

.define {
    font-size: var(--font-size-1);
    letter-spacing: calc(var(--letter-spacing));
}

@keyframes flicker {
    
    0%, 18%, 20%, 22%, 53%, 55%, 100% {

        filter: drop-shadow(0 0 0.3rem var(--highlight-color))
            drop-shadow(0 0 0.2rem var(--shadow-color))
            drop-shadow(0 0 2rem var(--shadow-color))
            drop-shadow(0 0 9rem var(--shadow-color));
            opacity: 1;
    }

    19%, 21%, 54% {
        opacity: 0.3;
    }
}

/* Media query for devices with width < 700px */