style.css

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 900; 
    src: url('fonts/work-sans-latin-900-normal.woff2') format('woff2');
    font-display: swap;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #080808;
    overflow: hidden; 
    font-family: 'Work Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 1vh;
    z-index: 10; 
    pointer-events: none; 
}

#center-text {
    font-size: clamp(3rem, 8vw, 10rem);
    font-weight: bold;
    color: #FF0000; 
    text-shadow: 0 0 20px #FF0000, 0 0 50px #6F003C;
    text-align: center;
    margin-top: 2vh;
}

#embed-container {
    pointer-events: auto; 
    width: 100%;
    max-width: 540px;
    box-shadow: 0 0 20px rgba(111, 0, 60, 0.3); 
    border-radius: 8px;
    
    /* Shrinks the entire embed to 80% of its normal size */
    transform: scale(0.8); 
    transform-origin: top center;
    
    /* Pulls the bottom margin up to compensate for the scaled-down size */
    margin-bottom: -15%; 
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    perspective: 1200px; 
    transform-style: preserve-3d;
    /* Pushes the flying text in front of the Mastodon embed */
    z-index: 999; 
    pointer-events: none; 
}

.text-element {
    position: absolute;
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    animation: float linear infinite;
    top: 0;
    left: 0;
}

@keyframes float {
    0% {
        transform: translate3d(var(--startX), var(--startY), var(--startZ)) 
                   rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate3d(var(--endX), var(--endY), var(--endZ)) 
                   rotateX(calc(var(--rotX) + 180deg)) 
                   rotateY(calc(var(--rotY) + 180deg)) 
                   rotateZ(calc(var(--rotZ) + 180deg));
        opacity: 0;
    }
}

/* --- MOBILE ICON STYLES --- */

/* Hide the mobile icon by default on desktop screens */
#mobile-icon-container {
    display: none;
    pointer-events: auto; /* Makes it clickable */
    z-index: 1000; /* Ensures it stays in front of the flying text */
}
/* Style the SVG wordmark and set up the hover animation */
#mobile-link-icon {
    width: 220px; 
    max-width: 80vw; /* Failsafe: prevents it from being wider than 80% of a very narrow phone screen */
    height: auto;
    transition: filter 0.3s ease-in-out; 
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

/* The #FF0000 Red Hover Glow */
#mobile-link-icon:hover {
    filter: drop-shadow(0 0 15px #FF0000) drop-shadow(0 0 30px #FF0000);
}

/* --- RESPONSIVE MEDIA QUERY --- */

/* When the screen width is less than 768px (tablets/phones) OR 
   when the screen height is too short to fit the embed (laptops) */
@media (max-width: 768px), (max-height: 750px) {
    
    /* Hide the giant Mastodon embed */
    #embed-container {
        display: none !important;
    }
    
    /* Reveal the mobile icon container */
    #mobile-icon-container {
        display: block;
    }

    /* Optional: Ensure the center text fits a bit better on narrow phone screens */
    #center-text {
        font-size: clamp(3rem, 15vw, 10rem); 
    }
}