#snowflake1-wrapper {
    /* top-left: snowflake4.png */
    position: absolute;
    top: calc(0.037 * var(--cur-height) * 1px);
    left: calc(0.045 * var(--cur-width) * 1px);
}

#snowflake1 {
    width: calc(0.135 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

#snowflake2-wrapper {
    /* top right: snowflake6.png */
    position: absolute;
    top: calc(0.02 * var(--cur-height) * 1px);
    right: calc(0.03 * var(--cur-width) * 1px);
}
#snowflake2 {
    width: calc(0.16 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

#snowflake3-wrapper {
    /* middle left: snowflake1.png */
    position: absolute;
    top: calc(0.36 * var(--cur-height) * 1px);
    left: calc(0.02 * var(--cur-width) * 1px);
}
#snowflake3 {
    width: calc(0.14 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

#snowflake4-wrapper {
    /* middle right: snowflake3.png */
    position: absolute;
    top: calc(0.36 * var(--cur-height) * 1px);
    right: calc(0.02 * var(--cur-width) * 1px);
}
#snowflake4 {
    width: calc(0.16 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

#snowflake5-wrapper {
    /* bottom left: snowflake5.png */
    position: absolute;
    top: calc(0.635 * var(--cur-height) * 1px);
    left: calc(0.0675 * var(--cur-width) * 1px);
}
#snowflake5 {
    width: calc(0.14 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

#snowflake6-wrapper {
    /* bottom right: snowflake2.png */
    position: absolute;
    top: calc(0.625 * var(--cur-height) * 1px);
    right: calc(0.055 * var(--cur-width) * 1px);
}
#snowflake6 {
    width: calc(0.15 * var(--cur-width) * 1px);
    height: auto;
    aspect-ratio: 1/1;
}

.snowflake-type {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%,-50%);
/*    top: calc(.95 * var(--cur-height) * 1px); */
    font-size: calc(.025 * var(--cur-width) * 1px);
    color: #daa520; /* Silver: #c0c0c0 */
    text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
    line-height: .75;
    text-align: center;
    text-decoration: none;
    z-index: 3;
}

/* Creates an on hover effect of neon green */
.neon-link {
    /* 1. Base Link Setup */
    display: inline-block;
    position: relative; 
    line-height: 0;
    cursor: pointer;
    border-radius: 0; 
    transition: all 0.3s ease-out; 
}

.neon-link img {
    /* Image size is 150px x 150px */
    display: block;
    width: calc(0.14 * var(--cur-width) * 1px);
    height: calc(0.14 * var(--cur-width) * 1px); 
    position: relative;
    z-index: 3; 
    border-radius: 50%;
}

/* 2. Neon Circle (::before Pseudo-Element) */
.neon-link::before {
    content: "";
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);

    /* Initial State: Hidden and small */
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%; 
    z-index: 2; 
    transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;

    /* Radial Gradient: Creates the tapering light effect */
    background: radial-gradient(
        circle,
        rgba(0, 255, 0, 1) 10%,         /* Solid Neon Green Core */
        rgba(0, 255, 0, 0.4) 30%,      /* Fading Green */
        rgba(0, 255, 0, 0) 70%         /* Fully Transparent at perimeter */
    );
}

/* 3. Hover Effect - Diameter Reduced to 150px */
.neon-link:hover::before {
    /* The final diameter is set to match the image width */
    width: calc(0.14 * var(--cur-width) * 1px);
    height: calc(0.14 * var(--cur-width) * 1px); 
    opacity: 1;
}

/* 4. Background Fix (Optional, for better rendering of the gradient)
.neon-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%; 
    background-color: transparent; 
    z-index: 1; 
} */