/* ============================================================================ NIF Studio — Fabian Coelman, illustrator portfolio Dark editorial single-page site. Design tokens, type scale, animation timings recreated from the "Fabian Portfolio v2" handoff spec. ============================================================================ */ /* --- Tokens --------------------------------------------------------------- */ :root { --bg: #060d09; /* page */ --bg-deep: #050b07; /* footer */ --card: #0b1610; /* illustration card / lightbox backing */ --text: #EDE8DF; /* warm off-white */ --on-accent: #04130c; /* text/icons on accent */ /* themeable accent — default scheme: Terracotta. JS overrides at runtime. */ --accent: #AD4B33; --accent-bright: #D47A65; } /* --- Reset / base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Archivo', system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; } ::selection { background: var(--accent-bright); color: var(--bg); } /* Hide the OS cursor on pointer devices — the custom cursor replaces it. */ @media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } } /* Scroll-reveal initial states only apply when JS is active (set on ). */ .js [data-reveal] { opacity: 0; } .js [data-fade] { opacity: 0; } /* --- Keyframes ------------------------------------------------------------ */ @keyframes nifcue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(8px); opacity: 1; } } @keyframes nif-hb { 0% { transform: scale(1); opacity: .55; } 13% { transform: scale(1.18); opacity: 0; } 26% { transform: scale(1); opacity: 0; } 34% { opacity: .38; } 44% { transform: scale(1.12); opacity: 0; } 58%, 100% { transform: scale(1); opacity: 0; } } @keyframes nif-cur-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .6; } 100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; } } /* --- Custom cursor -------------------------------------------------------- */ .nif-cursor { position: fixed; top: 0; left: 0; width: 22px; height: 22px; border: 1.5px solid var(--text); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; display: flex; align-items: center; justify-content: center; transform: translate3d(-100px,-100px,0) translate(-50%,-50%); transition: width .32s cubic-bezier(.16,1,.3,1), height .32s cubic-bezier(.16,1,.3,1), background-color .3s ease, border-color .3s ease; } .nif-cursor__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--on-accent); line-height: 1; opacity: 0; white-space: nowrap; transition: opacity .22s ease; } @media (hover: none) { .nif-cursor { display: none !important; } } /* --- Progress bar --------------------------------------------------------- */ .progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-bright); transform: scaleX(0); transform-origin: 0 50%; z-index: 250; will-change: transform; pointer-events: none; } /* --- Header / nav --------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); /* No mix-blend-mode here: it would fight the custom cursor's own difference blend, making the cursor vanish over the logo/nav. The nav always sits over dark sections, so plain light text stays readable. */ border-bottom: 1px solid transparent; transition: background-color .45s ease, padding .45s ease, border-color .45s ease; } .site-header.scrolled { background: rgba(6,13,9,0.94); padding-top: 13px; padding-bottom: 13px; border-bottom-color: rgba(212,122,101,0.35); } .brand { display: flex; align-items: baseline; gap: 9px; font-weight: 900; letter-spacing: -0.02em; } .brand__mark { font-size: 21px; } .brand__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; opacity: .65; } .site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); } .site-nav a { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } /* Magnetic elements get a smooth return transition (JS drives the offset). No will-change here: promoting nav links to their own GPU layers prevents the custom cursor's mix-blend-mode from blending with them correctly. */ [data-mag] { transition: transform .35s cubic-bezier(.16,1,.3,1); } /* --- Hero (shared) -------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; overflow: hidden; } .hero__grid { /* subtle background grid lines */ position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.2; background-image: linear-gradient(rgba(4,10,6,0.72) 1px, transparent 1px), linear-gradient(90deg, rgba(4,10,6,0.72) 1px, transparent 1px); background-size: clamp(60px,7vw,96px) clamp(60px,7vw,96px); } .hero canvas[data-hero-grid] { /* NIF spotlight canvas (created by JS) */ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .eyebrow { display: flex; align-items: center; gap: 14px; } .eyebrow__line { width: 34px; height: 1.5px; background: var(--accent-bright); } .eyebrow__text { font-size: 13px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-bright); } .hero__name { font-weight: 900; line-height: 0.84; letter-spacing: -0.015em; text-transform: uppercase; color: rgba(237,232,223,0.72); } .hero__name [data-scramble] { display: block; } .hero__name [data-scramble] span { display: inline-block; text-align: center; } .hero__sub { line-height: 1.55; font-weight: 500; } .hero-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; background: var(--accent); color: var(--on-accent); border-radius: 100px; font-weight: 800; font-size: 15px; letter-spacing: 0.01em; position: relative; } .hero-cta__ring { position: absolute; inset: -3px; border-radius: 100px; border: 2px solid var(--accent-bright); animation: nif-hb 2.5s ease-out infinite; pointer-events: none; } .hero-scroll { position: absolute; bottom: 30px; left: clamp(20px,5vw,72px); z-index: 5; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,232,223,0.6); } .hero-scroll span { animation: nifcue 1.8s ease-in-out infinite; } /* Hero — Split */ .hero--split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; background: radial-gradient(125% 100% at 100% 50%, var(--accent) -10%, rgba(10,26,18,0) 52%), linear-gradient(102deg, #050c08 0%, #06110b 46%, #0a1c12 100%); } .hero--split .hero__text { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 120px clamp(20px,5vw,72px) 64px; z-index: 3; } .hero--split .hero__name { font-size: clamp(72px, 15vw, 236px); } .hero--split .hero__sub { max-width: 470px; font-size: clamp(16px,1.5vw,21px); color: rgba(237,232,223,0.74); } .hero--split .hero__media { position: relative; isolation: isolate; overflow: hidden; z-index: 1; } .hero--split .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; filter: grayscale(1) contrast(1.08) brightness(0.96); } .hero__media-multiply { position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; z-index: 2; pointer-events: none; } .hero__media-lighten { position: absolute; inset: 0; background: #04130c; mix-blend-mode: lighten; opacity: 0.35; z-index: 3; pointer-events: none; } .hero__media-edge { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(102deg, #050c08 0%, rgba(6,17,11,0.2) 38%, rgba(0,0,0,0) 70%); } /* Hero — Centered */ .hero--centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; padding: 120px 24px 64px; background: radial-gradient(120% 80% at 50% 18%, var(--accent) -30%, rgba(10,26,18,0) 50%), linear-gradient(180deg, #050c08 0%, #0a1c12 100%); } .hero--centered .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: grayscale(1) contrast(1.05) brightness(0.5); opacity: 0.4; z-index: 0; } .hero--centered .hero__bg-multiply { position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; opacity: 0.55; z-index: 1; pointer-events: none; } .hero--centered .hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 26px; } .hero--centered .eyebrow { justify-content: center; } .hero--centered .hero__name { font-size: clamp(80px, 20vw, 320px); line-height: 0.82; } .hero--centered .hero__sub { max-width: 560px; font-size: clamp(16px,1.6vw,21px); color: rgba(237,232,223,0.76); } /* --- Work ----------------------------------------------------------------- */ .work { position: relative; background: var(--bg); padding: clamp(40px,5vh,72px) clamp(20px,5vw,72px) clamp(80px,12vh,160px); } .work__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(40px,6vh,72px); } .section-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .section-eyebrow .eyebrow__line { width: 28px; } .section-eyebrow .eyebrow__text { letter-spacing: 0.24em; } .work__title { font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.9; font-size: clamp(40px,6.5vw,104px); } .work__desc { max-width: 320px; font-size: 15px; line-height: 1.5; color: rgba(237,232,223,0.6); font-weight: 500; } .grid--uniform { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,22px); } .grid--masonry { columns: 3; column-gap: clamp(12px,1.6vw,22px); } .more-projects { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); flex-wrap: wrap; gap: 12px; } .more-projects:empty { display: none; } .more-projects__btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(237,232,223,0.18); border-radius: 100px; padding: 10px 22px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: rgba(237,232,223,0.6); transition: border-color .25s ease, color .25s ease; } .more-projects__btn:hover { border-color: var(--accent-bright); color: var(--text); } .more-projects__btn .mp-arrow { font-size: 14px; transition: transform .25s ease; } .more-projects__btn:hover .mp-arrow { transform: translateX(3px); } .work-card { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 14px; background: var(--card); isolation: isolate; } .grid--masonry .work-card { margin-bottom: clamp(12px,1.6vw,22px); break-inside: avoid; } .work-card__media { position: absolute; inset: 0; z-index: 1; } .work-card__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .8s cubic-bezier(.16,1,.3,1); } .work-card:hover .work-card__img { transform: scale(1.08); } .work-card__tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.18; transition: opacity .5s ease; background: linear-gradient(to top, rgba(4,19,12,0.85) 0%, rgba(4,19,12,0.1) 45%, rgba(4,19,12,0) 70%); } .work-card:hover .work-card__tint { opacity: 1; } .work-card__num { position: absolute; top: 16px; left: 18px; z-index: 3; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: rgba(237,232,223,0.75); opacity: 1; transition: opacity .4s ease; } .work-card:hover .work-card__num { opacity: 0; } .work-card__cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 3; display: flex; flex-direction: column; gap: 8px; transform: translateY(14px); opacity: 0; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease; } .work-card:hover .work-card__cap { transform: translateY(0); opacity: 1; } .work-card__title { font-size: clamp(20px,2vw,30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .work-card__cat { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); } /* --- About ---------------------------------------------------------------- */ .about { position: relative; background: var(--bg); padding: clamp(60px,8vh,100px) clamp(20px,5vw,72px); border-top: 1px solid rgba(237,232,223,0.08); } .about__inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px,6vw,96px); align-items: center; } .about__photo { display: block; width: auto; max-width: min(85%, 360px); height: auto; max-height: min(65vh, 560px); margin: 0 auto; } .about__copy { display: flex; flex-direction: column; gap: 30px; } .about__intro { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(28px,4vw,56px); } .about__body { max-width: 620px; font-size: clamp(16px,1.4vw,19px); line-height: 1.65; color: rgba(237,232,223,0.72); font-weight: 500; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(237,232,223,0.1); border: 1px solid rgba(237,232,223,0.1); border-radius: 16px; overflow: hidden; max-width: 420px; } .stats__cell { background: var(--bg); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; } .stats__value { font-size: clamp(30px,3.5vw,46px); font-weight: 900; letter-spacing: -0.03em; color: var(--accent-bright); } .stats__label { font-size: 13px; font-weight: 600; color: rgba(237,232,223,0.6); letter-spacing: 0.01em; } .skills { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; } .skills span { padding: 9px 16px; border: 1px solid rgba(237,232,223,0.16); border-radius: 100px; font-size: 13px; font-weight: 600; color: rgba(237,232,223,0.8); } /* --- Contact -------------------------------------------------------------- */ .contact { position: relative; overflow: hidden; padding: clamp(72px,12vh,150px) clamp(20px,5vw,72px); background: var(--accent); color: var(--on-accent); } .contact__inner { display: flex; flex-direction: column; gap: clamp(30px,6vh,64px); } .contact .section-eyebrow .eyebrow__line { background: var(--on-accent); } .contact .section-eyebrow .eyebrow__text { color: inherit; } .contact__title { font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; line-height: 0.86; font-size: clamp(48px,11vw,180px); white-space: pre-line; } .contact__row { display: flex; flex-wrap: wrap; gap: 16px 56px; align-items: flex-end; justify-content: space-between; } .contact__links { display: flex; flex-direction: column; gap: 18px; } .contact__link { display: inline-flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px,3.5vw,46px); border-bottom: 2px solid rgba(4,19,12,0.3); padding-bottom: 6px; } .contact__link span { font-size: 0.7em; } .contact__avail { max-width: 280px; font-size: 15px; line-height: 1.5; font-weight: 600; opacity: 0.8; } /* --- Footer --------------------------------------------------------------- */ .site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 28px clamp(20px,5vw,72px); background: var(--bg-deep); font-size: 13px; font-weight: 600; color: rgba(237,232,223,0.55); } .site-footer__right { display: flex; align-items: center; gap: 22px; } .site-footer__admin { opacity: 0.5; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; } /* --- Lightbox ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(4,10,7,0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; justify-content: center; padding: 24px; overflow-y: auto; } .lightbox.open { display: flex; } .lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: 1.5px solid rgba(237,232,223,0.25); border-radius: 50%; background: rgba(6,13,9,0.72); color: var(--text); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s ease; z-index: 10; } .lightbox__close:hover { border-color: var(--accent-bright); } .lightbox__panel { width: min(88vw, 1040px); margin: auto 0; display: flex; flex-direction: column; gap: 20px; } .lightbox__stage { position: relative; width: 100%; background: var(--card); border-radius: 18px; overflow: hidden; display: flex; gap: 2px; } .lightbox__main { flex: 1; min-width: 0; } .lightbox__img { width: 100%; height: min(72vh, 700px); object-fit: contain; background: var(--card); display: block; } .lightbox__details { flex: none; width: 84px; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 0; overflow-y: auto; max-height: min(72vh, 700px); } .lb-detail-thumb { width: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; cursor: pointer; border: 2px solid transparent; padding: 0; background: none; flex: none; transition: border-color .2s ease, opacity .2s ease; opacity: 0.65; } .lb-detail-thumb:hover { opacity: 1; } .lb-detail-thumb.active { border-color: var(--accent-bright); opacity: 1; } .lb-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 640px) { .lightbox__stage { flex-direction: column; } .lightbox__img { height: auto; max-height: 58vh; } .lightbox__details { width: 100%; flex-direction: row; max-height: none; padding: 10px; overflow-x: auto; } .lb-detail-thumb { width: 64px; } } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lightbox__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .lightbox__title { font-size: clamp(18px,2.5vw,26px); font-weight: 800; letter-spacing: -0.02em; } .lightbox__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); } .lb-btn { padding: 11px 20px; border: 1.5px solid rgba(237,232,223,0.22); border-radius: 100px; background: transparent; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .25s ease; } .lb-btn:hover:not([disabled]) { border-color: var(--accent-bright); } .lb-btn[disabled] { border-color: rgba(237,232,223,0.08); color: rgba(237,232,223,0.25); cursor: default; pointer-events: none; } .lightbox__count { text-align: center; font-size: 13px; font-weight: 600; color: rgba(237,232,223,0.35); letter-spacing: 0.08em; } /* --- Project gallery (secondary projects, e.g. "Zwarte Coffee") ----------- */ .project-gallery { position: fixed; inset: 0; z-index: 480; background: rgba(4,10,7,0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; justify-content: center; padding: 24px; overflow-y: auto; } .project-gallery.open { display: flex; } .project-gallery__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: 1.5px solid rgba(237,232,223,0.25); border-radius: 50%; background: rgba(6,13,9,0.72); color: var(--text); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s ease; z-index: 10; } .project-gallery__close:hover { border-color: var(--accent-bright); } .project-gallery__inner { width: min(92vw, 1200px); margin: auto 0; } .project-gallery__title { font-size: clamp(20px,2.4vw,30px); font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 24px; color: var(--text); } .project-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.2vw, 16px); } .pg-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--card); border: none; padding: 0; } .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.16,1,.3,1); } .pg-thumb:hover img { transform: scale(1.06); } @media (max-width: 860px) { .project-gallery__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .project-gallery__grid { grid-template-columns: repeat(2, 1fr); } } /* description + maakproces */ .lightbox__desc { max-width: 620px; margin: -4px auto 0; text-align: center; font-size: clamp(14px,1.3vw,16px); line-height: 1.6; font-weight: 500; color: rgba(237,232,223,0.66); } .lightbox__process-toggle { position: relative; display: inline-flex; align-self: center; align-items: center; gap: 10px; margin: 6px auto 0; padding: 13px 28px; cursor: pointer; background: var(--accent); border: none; border-radius: 100px; color: var(--on-accent); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color .25s ease, transform .25s ease; } .lightbox__process-toggle:hover { background: var(--accent-bright); transform: scale(1.03); } .lb-pt__chev { transition: transform .3s ease; font-size: 15px; } .lightbox__process-toggle.open .lb-pt__chev { transform: rotate(180deg); } .lb-pt__ring { position: absolute; inset: -4px; border-radius: 100px; border: 2px solid var(--accent-bright); animation: nif-hb 2.2s ease-out infinite; pointer-events: none; } .lightbox__process-toggle.open .lb-pt__ring { display: none; } .lightbox__process { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: min(88vw, 1040px); margin: 4px auto 0; } .lightbox__process[data-single="1"] { grid-template-columns: 1fr; max-width: min(70vw, 720px); } .lb-proc__item { margin: 0; background: var(--card); border-radius: 14px; overflow: hidden; } .lb-proc__img, .lb-proc__video { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #04100a; } .lb-proc__cap { padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); } @media (max-width: 640px) { .lightbox__process { grid-template-columns: 1fr; } } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .grid--uniform { grid-template-columns: repeat(2, 1fr); } .grid--masonry { columns: 2; } .about__inner { grid-template-columns: 1fr; gap: 40px; } .about__media { position: static; } .about__photo { max-width: min(60%, 320px); } } @media (max-width: 860px) { .hero--split { grid-template-columns: 1fr; } .hero--split .hero__media { min-height: 48vh; order: -1; } .hero--split .hero__text { padding-top: 110px; } } @media (max-width: 560px) { .grid--uniform { grid-template-columns: 1fr; } .grid--masonry { columns: 1; } .work__head { flex-direction: column; align-items: flex-start; } .contact__row { flex-direction: column; align-items: flex-start; } .about__photo { max-width: 80%; } } /* On phones the 80px clamp min is wider than the screen — scale the name down so "FABIAN" stays on one line instead of wrapping. */ @media (max-width: 480px) { .hero--centered .hero__name { font-size: clamp(40px, 17vw, 92px); } .hero--split .hero__name { font-size: clamp(38px, 16vw, 84px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } }