[v-cloak] {
    visibility: hidden;
    display: none;
    border: red 1px solid;
}

#bg.main .text {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: regular;
}

#bg.main .font {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: regular;
    letter-spacing: normal;
}

#bg.main {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%25%22 height=%22100%25%22%3E %3Cdefs%3E %3Cpattern id=%22diamondPattern%22 patternUnits=%22userSpaceOnUse%22 width=%22120%22 height=%22240%22%3E %3Crect width=%22120%22 height=%22240%22 fill=%22%231a273a%22 /%3E %3Cpath d=%22M60,10 Q80,60 100,60 Q80,60 60,110 Q40,60 20,60 Q40,60 60,10%22 fill=%22none%22 stroke=%22%23c8a165%22 stroke-width=%222%22 /%3E %3Cpath d=%22M60,130 Q80,180 100,180 Q80,180 60,230 Q40,180 20,180 Q40,180 60,130%22 fill=%22none%22 stroke=%22%23c8a165%22 stroke-width=%222%22 /%3E %3C/pattern%3E %3C/defs%3E %3Crect width=%22100%25%22 height=%22100%25%22 fill=%22url(%23diamondPattern)%22 /%3E %3C/svg%3E') no-repeat center center fixed;
    background-size: contain;
}

#bg.main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.97;
    background-color: hsl(var(--main-hue), var(--main-saturation), var(--main-lightness));
    background-image: radial-gradient(circle, hsla(215, 16%, 41%, 1) 67%, hsla(214, 21%, 30%, 1) 120%);
}

body.main {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0;
}