body {
    background-color:   #050e39;
    color: #ffffff;
    font-family: 'Glacial Indifference', sans-serif;
    margin: 2em;
    padding: 0;
    overflow: hidden;
}

svg#svg1 {
    display: block;
    width: clamp(18rem, 24vw, 38rem);
    height: auto;
    max-width: 100%;
}

@media (max-width: 700px) {
    svg#svg1 {
        width: min(82vw, 24rem);
    }
}

.centered {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
}

.highlight {
    color: lightblue;
}

.highlight:hover {
    color: yellow;
}

.highlight:active {
    color: yellow;
}

.big_title {
    font-size: clamp(1.6rem, 2vw, 3.6rem);
    line-height: 1.15;
}

body, p, a {
    font-size: clamp(0.95rem, 1.1vw, 1.35rem);
}

/* Jitter movement classes for SVG groups */
.moved-up {
    transform: translateY(-0.16em);
    transition: transform 1s ease-in-out;
}

.moved-down {
    transform: translateY(0.16em);
    transition: transform 1s ease-in-out;
}