/* Explanation in JS tab */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");


body {
	margin: 0px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

#container {
	/* Center the text in the viewport. */
	position: relative;
	margin: auto;
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	top: 0;
	bottom: 0;
	
	/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
	filter: url(#threshold);
}

a {
    display: block;
}

/* Your average text styling */
#text1, #text2 {
	position: absolute;
	width: 100%;
	font-family: 'Pretendard Variable', sans-serif;
    font-weight: 900;
	font-size: 8rem;
	text-align: center;
    text-decoration: none;
    /* color: rgb(255, 255, 200); */
    color: white;
    /* Constant halo effect */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1),
        0 0 20px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 1),
        0 0 40px rgba(255, 255, 255, 1),
        0 0 50px rgba(255, 255, 255, 1);
    /* text-shadow: none; */
    transition: text-shadow 0.3s ease;
    cursor: pointer;
    /* Performance optimizations */
    will-change: filter, opacity;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #text1, #text2 {
        font-size: 4rem; /* Smaller font for mobile */
        /* Reduced text shadow for better performance */
        text-shadow: 
            0 0 8px rgba(255, 255, 255, 1),
            0 0 16px rgba(255, 255, 255, 1),
            0 0 24px rgba(255, 255, 255, 1);
    }
    
    #container {
        /* Simplified filter for mobile */
        filter: url(#threshold) blur(0.3px);
    }
}

#filters {
    display: none;
}

#text1:hover, #text2:hover {
    text-shadow: none;
    transition: text-shadow 0.3s ease;
}