@media screen { .project { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; width: fit-content; } .projects { padding-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-16); } .project:nth-child(odd) { align-self: flex-end; } .project__title { font-size: var(--text-2xl); } .project__thumbnail { width: 100%; max-width: 750px; } .project__title { font-family: "Manrope", sans-serif; font-weight: 800; } .project__tags { display: flex; flex-wrap: wrap; gap: var(--space-4); } } @media screen and (min-width: 768px) { .projects { gap: var(--space-20); } .project { gap: var(--space-4); } .project__title { font-size: var(--text-3xl); } } @media screen and (min-width: 1200px) { .projects { gap: var(--space-28); } .project__title { font-size: var(--text-4xl); } .project__thumbnail { max-width: 1000px; } } /* * Custom Inverted Cursor on Project Hover */ @media (hover: hover) and (pointer: fine) { .project { cursor: none; } /* * Single fixed element on — NOT nested inside .project. * mix-blend-mode: difference needs the element to share * a stacking context with the page content it inverts. * Avoiding z-index, will-change, and opacity keeps * the blending context open to the whole page. * * The radial-gradient fills only the center 100px circle white; * the outer transparent area holds the rotating text ring. */ .project-cursor { position: fixed; top: 0; left: 0; width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; border-radius: 50%; background: radial-gradient(circle, #fff 49px, transparent 51px); mix-blend-mode: difference; pointer-events: none; transform: scale(0); visibility: hidden; } /* Rotating "VIEW PROJECT •" text ring */ .project-cursor__ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: cursor-spin 8s linear infinite; } /* Center redirect arrow */ .project-cursor__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes cursor-spin { to { transform: rotate(360deg); } } }