:root { --color-magnasilvar: #7433fb; --color-external: #ff007f; --color-internal: #1e90ff; --graphite-pencil-6b: #2e2e2e; --graphite-pencil-standard: #595959; --graphite-pencil-hb: #7f7f7f; --graphite-pencil-light: #b0b0b0; --graphite-pencil-6h: #f0f0f0; --max-width: 720px; } body { color: var(--graphite-pencil-6b); font-family: "Inter", sans-serif; background-image: linear-gradient(var(--graphite-pencil-6h) 1px, transparent 1px), linear-gradient(to right, var(--graphite-pencil-6h) 1px, transparent 1px); background-size: 5mm 5mm; } a.internal-link, a.external-link { color: var(--color-magnasilvar); text-decoration: underline; transition: color 0.3s ease; } a.internal-link:hover { color: var(--color-internal); text-decoration: none; } a.external-link:hover { color: var(--color-external); text-decoration: none; } main { max-width: var(--max-width); margin: 0 auto; padding: 1rem; } :root { --card-bg: linear-gradient(to bottom right, #2b1055, #7597de); --card-size: 250px; --radius: 18px; } .card-container { position: relative; width: var(--card-size); height: var(--card-size); perspective: 1000px; z-index: 1; } .tracker-grid { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; z-index: 100; } .tracker { width: 100%; height: 100%; cursor: pointer; } .card { width: 100%; height: 100%; position: relative; border-radius: var(--radius); transform-style: preserve-3d; transition: transform 0.25s ease-out, box-shadow 0.2s ease; will-change: transform; box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4); } .card-bg { position: absolute; inset: 0; border-radius: var(--radius); background: var(--card-bg); overflow: hidden; z-index: 1; } .stars { position: absolute; width: 2px; height: 2px; background: transparent; box-shadow: 20px 30px #fff, 80px 10px #fff, 150px 50px rgba(255, 255, 255, 0.6), 40px 120px #fff, 200px 180px rgba(255, 255, 255, 0.8), 240px 40px #fff, 100px 220px #fff, 260px 260px rgba(255, 255, 255, 0.5), 10px 280px #fff; opacity: 0.4; transition: opacity 0.5s ease; } .stars::after { content: " "; position: absolute; top: 20px; left: 30px; width: 3px; height: 3px; border-radius: 50%; background: transparent; box-shadow: 100px 100px rgba(255, 200, 200, 0.8), 220px 20px rgba(200, 200, 255, 0.8); filter: blur(1px); } .card-container:hover .stars { opacity: 0.9; } .card-image { position: absolute; inset: 15px; z-index: 5; display: flex; align-items: center; justify-content: center; transform: translateZ(30px); } .card-image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); } .holo { position: absolute; inset: 0; border-radius: var(--radius); background: repeating-linear-gradient(115deg, transparent 0%, rgba(255, 0, 180, 0.4) 15%, rgba(0, 255, 255, 0.4) 30%, transparent 45%); background-size: 150% 150%; mix-blend-mode: color-dodge; opacity: 0; z-index: 10; pointer-events: none; transition: opacity 0.3s ease, background-position 0.3s ease; } .glare { position: absolute; inset: 0; border-radius: var(--radius); background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 80%); mix-blend-mode: overlay; opacity: 0; z-index: 11; pointer-events: none; transition: opacity 0.3s ease; } .card-container:hover .holo, .card-container:hover .glare { opacity: 1; } .card-container:has(.tr-1:hover) .card { transform: rotateX(12deg) rotateY(-12deg); } .card-container:has(.tr-1:hover) .holo { background-position: 0% 0%; } .card-container:has(.tr-1:hover) .glare { --x: 10%; --y: 10%; } .card-container:has(.tr-2:hover) .card { transform: rotateX(12deg) rotateY(0deg); } .card-container:has(.tr-2:hover) .holo { background-position: 50% 0%; } .card-container:has(.tr-2:hover) .glare { --x: 50%; --y: 10%; } .card-container:has(.tr-3:hover) .card { transform: rotateX(12deg) rotateY(12deg); } .card-container:has(.tr-3:hover) .holo { background-position: 100% 0%; } .card-container:has(.tr-3:hover) .glare { --x: 90%; --y: 10%; } .card-container:has(.tr-4:hover) .card { transform: rotateX(0deg) rotateY(-12deg); } .card-container:has(.tr-4:hover) .holo { background-position: 0% 50%; } .card-container:has(.tr-4:hover) .glare { --x: 10%; --y: 50%; } .card-container:has(.tr-5:hover) .card { transform: scale(0.97); } .card-container:has(.tr-5:hover) .holo { opacity: 0.6; background-position: 50% 50%; } .card-container:has(.tr-5:hover) .glare { --x: 50%; --y: 50%; opacity: 0.8; } .card-container:has(.tr-6:hover) .card { transform: rotateX(0deg) rotateY(12deg); } .card-container:has(.tr-6:hover) .holo { background-position: 100% 50%; } .card-container:has(.tr-6:hover) .glare { --x: 90%; --y: 50%; } .card-container:has(.tr-7:hover) .card { transform: rotateX(-12deg) rotateY(-12deg); } .card-container:has(.tr-7:hover) .holo { background-position: 0% 100%; } .card-container:has(.tr-7:hover) .glare { --x: 10%; --y: 90%; } .card-container:has(.tr-8:hover) .card { transform: rotateX(-12deg) rotateY(0deg); } .card-container:has(.tr-8:hover) .holo { background-position: 50% 100%; } .card-container:has(.tr-8:hover) .glare { --x: 50%; --y: 90%; } .card-container:has(.tr-9:hover) .card { transform: rotateX(-12deg) rotateY(12deg); } .card-container:has(.tr-9:hover) .holo { background-position: 100% 100%; } .card-container:has(.tr-9:hover) .glare { --x: 90%; --y: 90%; } @keyframes floatAndRotate { 0% { transform: rotateX(8deg) rotateY(-8deg); } 50% { transform: rotateX(-5deg) rotateY(0deg) translateY(-10px); } 100% { transform: rotateX(8deg) rotateY(8deg); } } @keyframes holoShine { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @media (hover: none) { .tracker-grid { display: none; } .holo { opacity: 0.5; animation: holoShine 6s ease-in-out infinite alternate; } .glare { opacity: 0.4; } .stars { opacity: 0.8; } .card { animation: floatAndRotate 6s ease-in-out infinite alternate; } } header { display: flex; justify-content: center; margin: 0 auto; max-width: var(--max-width); padding: 1rem; } main h1 { font-size: 2rem; margin-bottom: 1rem; margin-top: 0.5rem; } main p { line-height: 1.8; margin-top: 0; margin-bottom: 0; text-align: justify; } main section { margin-top: 1.75rem; padding-top: 0; } main h2 { font-size: 1.1rem; margin: 0 0 1rem 0; font-weight: 700; } main ul { list-style: none; padding: 0; margin: 0; } .no-break { white-space: nowrap; } a.magic-link { text-decoration: none; display: inline-flex; align-items: center; line-height: 100%; gap: .25rem; border-radius: .25rem; padding: .25rem .375rem; } p a.magic-link { transform: translateY(0.15em); } .raw-content .magic-link { vertical-align: middle; } a.magic-link:hover { box-shadow: 0 0 0.1em var(--graphite-pencil-light); } a.magic-link.malt{ background: #ff5c5720; color: var(--graphite-pencil-6b); } a.magic-link.malt:hover{ background: #ff5c5730; color: var(--graphite-pencil-standard); } a.magic-link.alan{ background: #ff6d3920; color: var(--graphite-pencil-6b); } a.magic-link.alan:hover{ background: #ff6d3930; color: var(--graphite-pencil-standard); } a.magic-link.nfconoff{ background: #4688fa20; color: var(--graphite-pencil-6b); } a.magic-link.nfconoff:hover{ background: #4688fa30; color: var(--graphite-pencil-standard); } a.magic-link.archived{ background: #3f598620; color: var(--graphite-pencil-6b); } a.magic-link.archived:hover{ background: #3f598630; color: var(--graphite-pencil-standard); } .magic-link-img { display: inline-block; height: 1em; width: 1em; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 2px; } main .mau-chip { display: inline-block; padding: 2px 4px; border-radius: 5px; border: 1px solid var(--color-magnasilvar); background: linear-gradient(45deg, #6a0dad, var(--color-external), var(--color-internal), #7f00ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .raw-item.project-grid { grid-template-columns: 4.75rem 1fr; } .raw-status { font-size: 0.85rem; font-weight: 600; } .status-archived { color: var(--graphite-pencil-hb); } .raw-item { display: grid; grid-template-columns: 2.25rem 1rem 1fr; gap: 1.5rem; margin-bottom: 0.75rem; } .raw-year { color: var(--graphite-pencil-hb); } .raw-lang{ position: relative; top: -0.15em; } .raw-lang-content { color: var(--graphite-pencil-hb); font-size: 0.7rem; background: var(--graphite-pencil-6h); padding: 0.15rem; border-radius: 4px; } .raw-sub { display: block; color: var(--graphite-pencil-hb); margin-top: 2px; font-size: 0.75rem; } .raw-sub a { color: var(--graphite-pencil-hb); text-decoration: underline; } .raw-sub a:hover { text-decoration: underline; } footer { max-width: var(--max-width); margin: 0 auto; padding: 1rem; font-size: 1rem; } .social-content, .project-row { display: inline-flex; align-items: center; gap: 0.25rem; line-height: 100%; flex-wrap: wrap; } footer a.social-link { display: inline-flex; vertical-align: middle; align-items: center; gap: .25rem; line-height: 100%; color: var(--graphite-pencil-6b); } footer .social-link-img { display: inline-block; height: 1.2rem; width: 1.2rem; } @media (max-width: 600px) { .raw-item { gap: 0.75rem; } .raw-item.project-grid { gap: 0rem; } .raw-content .magic-link.archived { margin-bottom: 4px; } }