@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=VT323&display=swap");

:root { --blue: #039dda; --dark-blue: #0067b1; --navy: #063475; --yellow: #ffdf32; --red: #ec2638; --ink: #152653; --paper: #fffdf0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: "Fredoka", "Trebuchet MS", sans-serif; background: #63bce0 url("images/nobitas-house.webp") center / cover fixed no-repeat; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; background: linear-gradient(120deg, rgba(0, 103, 177, .37), rgba(255, 255, 255, .1)); backdrop-filter: blur(2px); }
a { color: inherit; }
.site-shell { width: min(100% - 30px, 1010px); margin: 28px auto; overflow: hidden; border: 5px solid #fff; border-radius: 12px; background: #dbf7ff; box-shadow: 0 0 0 4px var(--dark-blue), 0 16px 40px rgba(0, 42, 83, .55); }
.top-strip { display: flex; justify-content: center; padding: 6px 14px; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-align: center; background: var(--red); }
.hero { position: relative; display: flex; min-height: 238px; align-items: center; padding: 27px clamp(24px, 5vw, 54px); overflow: hidden; color: #fff; text-shadow: 3px 3px 0 var(--dark-blue); background: radial-gradient(circle at 28% 25%, #75e9ff 0 3px, transparent 4px) 0 0 / 31px 31px, linear-gradient(135deg, #00a7e2, #0871c1); }.hero::after { position: absolute; right: -48px; bottom: -62px; width: 278px; height: 278px; content: ""; border: 5px solid rgba(6, 52, 117, .38); border-radius: 50%; background: var(--yellow); }
.hero-copy { position: relative; z-index: 2; max-width: min(66%, 600px); }.hero-kicker { display: inline-block; margin: 0 0 10px; padding: 3px 11px; color: var(--yellow); border: 2px solid var(--yellow); border-radius: 3px; font-family: "VT323", monospace; font-size: 1.6rem; letter-spacing: .14em; text-shadow: 2px 2px 0 var(--dark-blue); background: rgba(6, 52, 117, .55); }h1 { margin: 0; font-size: clamp(2.9rem, 6.8vw, 5.25rem); font-weight: 500; line-height: .94; letter-spacing: -.035em; }.tagline { margin: 15px 0 0; font-size: clamp(.9rem, 2vw, 1.15rem); font-weight: 600; }.hero-status { display: inline-block; margin: 13px 0 0; padding: 5px 9px; color: var(--navy); border: 2px solid var(--navy); border-radius: 3px; font-family: "VT323", monospace; font-size: 1.2rem; text-shadow: none; background: #fff; box-shadow: 2px 2px 0 var(--navy); }
.hero-art { position: absolute; z-index: 2; right: -48px; bottom: -24px; display: flex; align-items: flex-end; justify-content: center; width: 278px; height: 225px; }.hero-art img { width: 206px; filter: drop-shadow(3px 3px 0 rgba(3, 42, 103, .22)); }.art-sparkle { position: absolute; z-index: 1; top: 5px; left: 21px; color: var(--red); font-size: 2.25rem; text-shadow: 2px 2px 0 #fff; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.external-icon { width: .9em; height: .9em; }
.nav-bar { display: flex; justify-content: center; gap: clamp(7px, 2vw, 21px); padding: 10px 14px; border-bottom: 3px solid var(--navy); background: #fff; }.nav-bar a { padding: 4px 10px; color: var(--navy); border: 2px solid var(--navy); border-radius: 3px; font-family: "VT323", monospace; font-size: clamp(1.22rem, 3vw, 1.65rem); font-weight: 700; text-decoration: none; background: var(--yellow); box-shadow: 2px 2px 0 var(--navy); }.nav-bar a:hover, .nav-bar a:focus-visible { color: #fff; background: var(--red); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--navy); }
.ticker { margin: 0; overflow: hidden; white-space: nowrap; color: #fff; font-family: "VT323", monospace; font-size: 1.33rem; background: var(--navy); }.ticker-track { display: inline-flex; padding: 5px 0; animation: ticker 50s linear infinite; }.ticker-item { flex: 0 0 auto; }@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.content-grid { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 20px; background: radial-gradient(#a5e6f9 1.2px, transparent 1.2px) 0 0 / 11px 11px, #eaffff; }.side-column, .main-column { display: grid; align-content: start; gap: 16px; }
.window { overflow: hidden; border: 3px solid var(--navy); border-radius: 7px; background: var(--paper); box-shadow: 4px 4px 0 rgba(5, 80, 143, .32); }.window-title { margin: 0; padding: 5px 10px 6px; color: white; font-family: "VT323", monospace; font-size: 1.45rem; font-weight: 400; letter-spacing: .035em; background: linear-gradient(90deg, var(--dark-blue), var(--blue)); }.window-body { padding: 13px; }
.profile-card .window-body { padding: 12px; font-family: "VT323", monospace; font-size: 1.14rem; line-height: .95; }.profile-card p { margin: 8px 0; }.avatar { display: block; width: 95px; height: 104px; margin: 0 auto 10px; object-fit: contain; }.online-dot { color: #24a943; text-shadow: 0 0 3px #24a943; }.mini-list { padding: 0; margin: 0; list-style: none; font-family: "VT323", monospace; font-size: 1.18rem; line-height: 1.15; }.mini-list li + li { margin-top: 7px; }
.badge-stack { display: grid; gap: 9px; text-align: center; }.badge-stack .badge { appearance: none; -webkit-appearance: none; margin: 0; padding: 5px; color: #fff; border: 2px ridge #fff; font-family: "VT323", monospace; font-size: 1rem; line-height: .85; letter-spacing: .06em; background: var(--red); text-shadow: 1px 1px 0 #851224; cursor: pointer; transition: transform .1s ease; }.badge-stack .badge:last-child { color: var(--navy); background: var(--yellow); text-shadow: none; }.badge-stack .badge:hover, .badge-stack .badge:focus-visible { transform: scale(1.04) rotate(-1deg); }
.gif-modal { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100dvh; display: none; place-items: center; padding: 20px; background: rgba(6, 52, 117, .72); }.gif-modal.open { display: grid; }.gif-frame { position: relative; max-width: min(92vw, 400px); padding: 14px; border: 4px solid var(--navy); border-radius: 10px; text-align: center; background: var(--paper); box-shadow: 0 16px 40px rgba(0, 42, 83, .55); }.gif-frame img { display: block; width: 100%; max-height: 70dvh; object-fit: contain; border: 3px solid var(--navy); border-radius: 6px; background: #fff; }.gif-caption { margin: 10px 0 0; color: var(--navy); font-family: "VT323", monospace; font-size: 1.35rem; }.gif-close { position: absolute; top: -15px; right: -15px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: #fff; border: 3px solid var(--navy); border-radius: 50%; font-family: "VT323", monospace; font-size: 1.5rem; line-height: 1; cursor: pointer; background: var(--red); box-shadow: 2px 2px 0 var(--navy); }.gif-close:hover, .gif-close:focus-visible { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--navy); }
.gif-trigger { cursor: pointer; transition: transform .15s ease; }.gif-trigger:hover, .gif-trigger:focus-visible { transform: translateY(-4px) scale(1.05); }
.about-content { display: flex; gap: 10px; align-items: center; font-size: 1.02rem; line-height: 1.32; }.about-content p:first-child { margin-top: 0; }.about-content p:last-child { margin-bottom: 0; }.about-doraemon { width: 128px; flex: 0 0 auto; object-fit: contain; }.sparkle-line { color: var(--red); font-weight: 700; text-align: center; }
.intro { margin: 0 0 11px; color: #416085; font-size: .95rem; }.project-list { display: grid; gap: 8px; }.project-link { display: grid; grid-template-columns: 34px 1fr 20px; gap: 8px; align-items: center; padding: 7px 9px; color: var(--ink); border: 2px dashed #8cb6cf; border-radius: 5px; text-decoration: none; background: #eefaff; }.project-link:hover, .project-link:focus-visible { border-color: var(--red); background: #fff3bc; transform: translateX(3px); }.project-icon { display: grid; width: 29px; height: 29px; place-items: center; overflow: hidden; border: 1px solid #82a9c0; border-radius: 50%; background: #fff; }.project-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }.project-icon-letter { color: var(--navy); font-family: "Fredoka", "Trebuchet MS", sans-serif; font-size: 1rem; font-weight: 700; background: var(--yellow); }.project-link strong { display: block; color: var(--dark-blue); }.project-link small { display: block; color: #54708b; font-size: .75rem; }.project-external-icon { width: 1.2rem; height: 1.2rem; color: var(--red); }.project-link b { color: var(--red); font-size: 1.2rem; }
.contact-content { display: grid; grid-template-columns: 1fr 95px 1fr; gap: 12px; align-items: center; text-align: center; }.contact-content p { margin: 0 0 10px; font-size: .92rem; }.mail-button { display: inline-block; padding: 7px 10px; color: #fff; border: 2px solid var(--navy); border-radius: 4px; font-family: "VT323", monospace; font-size: 1.2rem; text-decoration: none; background: var(--red); box-shadow: 2px 2px 0 var(--navy); }.mail-button:hover, .mail-button:focus-visible { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--navy); }.contact-doraemon { width: 100%; max-height: 91px; object-fit: contain; }.contact-links { display: grid; gap: 5px; }.contact-links a { color: var(--dark-blue); font-size: .86rem; font-weight: 700; }.contact-links a:hover, .contact-links a:focus-visible { color: var(--red); }
footer { padding: 12px 15px 15px; color: #fff; border-top: 4px solid var(--navy); text-align: center; background: var(--blue); text-shadow: 1px 1px 0 var(--dark-blue); }footer p { margin: 5px 0; font-size: .78rem; }.counter { display: inline-block; overflow: hidden; border: 2px inset #94a6b8; line-height: 0; text-shadow: none; background: #1b2735; }.counter img { height: 24px; max-width: 100%; }.footer-stars { color: var(--yellow); font-size: 1.1rem; }
.likes-link { display: block; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }.likes-link:hover, .likes-link:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(5, 80, 143, .32); }.likes-more { margin: 9px 0 0; color: var(--red); font-family: "VT323", monospace; font-size: 1.1rem; text-align: right; }
.likes-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; background: radial-gradient(#a5e6f9 1.2px, transparent 1.2px) 0 0 / 11px 11px, #eaffff; }.likes-page .window-body { font-size: 1rem; line-height: 1.4; }.likes-page .window-body p { margin: 0; }.likes-page .window-body p + p { margin-top: 9px; }.like-list { margin: 0; padding-left: 1.2em; list-style: square; }.like-list li { margin: 0 0 6px; }.like-list li:last-child { margin-bottom: 0; }.like-list li::marker { color: var(--red); }.hike-link { color: var(--dark-blue); font-weight: 700; }.hike-link:hover, .hike-link:focus-visible { color: var(--red); }.hike-elevation { display: inline-block; margin-left: 3px; padding: 0 5px; color: var(--navy); border: 1px solid #8cb6cf; border-radius: 3px; font-family: "VT323", monospace; font-size: .98rem; background: #eefaff; }.likes-page .window-body .anilist-link { margin-top: 10px; font-family: "VT323", monospace; font-size: 1.15rem; text-align: right; }.anilist-link a { color: var(--dark-blue); font-weight: 700; }.anilist-link a:hover, .anilist-link a:focus-visible { color: var(--red); }.likes-intro { grid-column: 1 / -1; margin: 0; color: #416085; font-family: "VT323", monospace; font-size: 1.3rem; }
@media (max-width: 690px) { body { background-position: 58% center; }.site-shell { width: min(100% - 16px, 600px); margin: 10px auto; border-width: 3px; }.hero { min-height: 205px; padding: 22px 20px; }.hero-copy { max-width: calc(100% - 92px); }.hero-art { right: -24px; bottom: -24px; width: 220px; height: 190px; }.hero-art img { width: 210px; }.art-sparkle { top: 0; left: 8px; font-size: 1.5rem; }.hero-status { font-size: 1rem; }.top-strip { font-size: .58rem; }.content-grid { grid-template-columns: 1fr; padding: 13px; }.side-column { grid-template-columns: 1fr 1fr; }.badge-stack { grid-column: span 2; grid-template-columns: 1fr 1fr; }.about-doraemon { width: 95px; }.ticker-track { animation-duration: 90s; }.likes-page { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .top-strip span:first-child, .top-strip span:last-child { display: none; }.nav-bar { flex-wrap: wrap; gap: 2px 11px; }.side-column { grid-template-columns: 1fr; }.badge-stack { grid-column: auto; }.contact-content { grid-template-columns: 1fr 70px; }.contact-links { grid-column: span 2; grid-row: 2; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 691px) { .gif-modal { backdrop-filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }