@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --ink:#11120f;
  --paper:#f2eee5;
  --paper2:#e8e1d4;
  --muted:#77756d;
  --orange:#e4572e;
  --blue:#315c70;
  --green:#465c4c;
  --line:rgba(17,18,15,.17);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}

.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:240px;height:240px;border-radius:50%;pointer-events:none;background:rgba(228,87,46,.08);filter:blur(55px);transform:translate(-50%,-50%);z-index:-1}

.nav{height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:fixed;z-index:50;top:0;width:100%;background:rgba(242,238,229,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:20px;letter-spacing:-.04em}.logo span{color:var(--orange)}
.nav nav{display:flex;gap:30px}.nav nav a{font-size:12px;font-weight:700;letter-spacing:.14em;color:#55544e}.nav nav a:hover{color:var(--orange)}
.music-btn{background:none;border:1px solid var(--ink);padding:9px 13px;font:600 11px var(--sans);cursor:pointer;letter-spacing:.1em}.music-btn.active{background:var(--ink);color:var(--paper)}

.hero{min-height:100vh;padding:125px 6vw 60px;position:relative;display:flex;flex-direction:column;justify-content:space-between}
.hero-top{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.17em;color:var(--muted)}
.hero-main{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;max-width:1350px;width:100%;margin:auto}
.kicker,.label{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--orange)}
.hero h1{font:600 clamp(80px,12vw,175px)/.78 var(--serif);letter-spacing:-.07em;margin:22px 0 32px}
.hero h1 em,h2 em{color:var(--orange);font-style:italic}
.hero-intro{max-width:590px;color:#5e5d56;font-size:17px;line-height:1.65}
.hero-buttons{display:flex;gap:10px;margin-top:30px}.pill{padding:13px 18px;border:1px solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;transition:.25s}.pill.dark{background:var(--ink);color:var(--paper)}.pill.light:hover{background:var(--ink);color:var(--paper)}.pill.dark:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--orange)}
.portrait-wrap{justify-self:end;position:relative}
.portrait-frame{width:min(380px,35vw);height:min(510px,47vw);background:var(--paper2);border:1px solid var(--ink);padding:13px;transform:rotate(2deg);box-shadow:18px 18px 0 var(--green)}
.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.03)}
.photo-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#d9d1c2,#eee8dc)}
.photo-placeholder .placeholder-copy{font:700 38px/.9 var(--serif);color:var(--green);text-align:center}
.scribble{position:absolute;bottom:8px;left:-70px;font:italic 16px var(--serif);transform:rotate(-8deg);color:var(--orange)}
.hero-stamp{position:absolute;right:5vw;bottom:50px;display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.12em}.hero-stamp span{font:700 42px var(--serif);color:var(--orange)}.hero-stamp b{font-size:9px}

.section{width:min(1240px,88%);margin:auto;padding:135px 0;position:relative}.section-number{position:absolute;left:-50px;top:145px;color:var(--orange);font:italic 20px var(--serif)}
.section-head{margin-bottom:65px}.section-head h2{font:600 clamp(55px,8vw,110px)/.9 var(--serif);letter-spacing:-.055em;margin-top:14px}.section-head.split{display:grid;grid-template-columns:1fr .55fr;align-items:end;gap:70px}.section-head.split>p{color:var(--muted);line-height:1.65;max-width:450px}

.about{padding-top:100px}.about-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:100px;align-items:start}.about-copy{max-width:690px}.about-copy p{font-size:17px;line-height:1.7;color:#5f5d56;margin-bottom:25px}.about-copy .lead{font:500 30px/1.25 var(--serif);color:var(--ink)}
.fact-stack{border-top:1px solid var(--ink)}.fact{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font-size:11px}.fact span{color:var(--muted);letter-spacing:.12em}.fact strong{font-size:11px;text-align:right}
.marquee{margin-top:100px;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;white-space:nowrap;color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.18em}.marquee span{display:inline-block;animation:marquee 22s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}

.engineering{background:var(--ink);color:var(--paper);width:100%;padding-left:6%;padding-right:6%;max-width:none}.engineering .section-number{left:3%}.engineering .label{color:#ed9278}.engineering .section-head.split>p{color:#aaa79d}
.skill-orbit{min-height:580px;max-width:1100px;margin:auto;position:relative;border:1px solid rgba(242,238,229,.15);border-radius:50%;aspect-ratio:1.8/1;background:radial-gradient(circle,rgba(228,87,46,.1),transparent 42%)}.skill-orbit:before,.skill-orbit:after{content:"";position:absolute;inset:8%;border:1px dashed rgba(242,238,229,.16);border-radius:50%}.skill-orbit:after{inset:22%}
.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;text-align:center;font:700 36px/.75 var(--serif);box-shadow:0 0 0 15px rgba(228,87,46,.09)}.orbit-center small{font:700 9px var(--sans);letter-spacing:.2em;margin-top:10px}
.orbit-item{position:absolute;width:250px;padding:15px;border-bottom:1px solid rgba(242,238,229,.25);background:rgba(17,18,15,.72);backdrop-filter:blur(6px)}.orbit-item b{color:var(--orange);font-size:10px}.orbit-item span{display:block;font:600 20px var(--serif);margin:5px 0}.orbit-item small{color:#99978e;font-size:9px;letter-spacing:.08em}.one{top:4%;left:7%}.two{top:8%;right:4%}.three{bottom:7%;right:7%}.four{bottom:7%;left:4%}.five{left:50%;top:-18px;transform:translateX(-50%)}
.learning-strip{margin-top:75px;border-top:1px solid rgba(242,238,229,.2);padding-top:20px}.learning-strip>span{color:#88867e;font-size:10px;letter-spacing:.15em}.learning-strip div{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.learning-strip b{border:1px solid rgba(242,238,229,.18);padding:9px 13px;font-size:11px;font-weight:500}

.chpc{display:grid;grid-template-columns:.95fr 1.05fr;gap:90px;align-items:center}.chpc-image{position:relative}.chpc-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.75);border:1px solid var(--ink)}.image-note{position:absolute;right:-35px;bottom:-25px;background:var(--orange);color:#fff;padding:18px;width:190px;font-size:9px;font-weight:700;line-height:1.35;letter-spacing:.12em;transform:rotate(-3deg)}
.chapter{font-size:10px;color:var(--muted);letter-spacing:.16em;margin:18px 0}.chpc h2{font:600 clamp(45px,6vw,78px)/.92 var(--serif);letter-spacing:-.05em}.chpc-copy>p:not(.chapter){color:var(--muted);line-height:1.65;margin:25px 0}.chpc-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:30px}.chpc-grid div{padding:20px 0;border-bottom:1px solid var(--line);display:flex;gap:15px}.chpc-grid strong{color:var(--orange)}.chpc-grid span{font-size:11px;font-weight:700;line-height:1.3}

.projects{background:#ded8cb;max-width:none;width:100%;padding-left:6%;padding-right:6%}.projects .section-number{left:3%}.project-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink)}.project{min-height:380px;padding:35px;border-bottom:1px solid var(--ink);display:grid;grid-template-columns:45px 1fr 120px;gap:20px;align-items:start;transition:.3s}.project:nth-child(odd){border-right:1px solid var(--ink)}.project.featured{grid-column:span 2;grid-template-columns:60px 1fr 300px;min-height:330px}.project:hover{background:#f2eee5}.project-index{font:italic 18px var(--serif);color:var(--orange)}.project-info>span{font-size:9px;letter-spacing:.15em;color:var(--muted);font-weight:700}.project h3{font:600 clamp(30px,4vw,55px)/.9 var(--serif);letter-spacing:-.04em;margin:18px 0}.project p{max-width:550px;color:#69675f;line-height:1.5;font-size:14px}.tech{font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--blue);margin-top:22px}.project-visual{align-self:center;justify-self:end;color:var(--orange)}.traffic{width:65px;height:150px;background:#171814;border-radius:35px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.traffic span{width:20px;height:20px;border-radius:50%;background:#383933}.traffic span:first-child{background:var(--orange);box-shadow:0 0 25px var(--orange)}.sensor{font-size:100px}.graph{font:50px var(--serif);transform:rotate(-8deg)}.seven{font:120px var(--serif);color:var(--green)}.cluster-art{display:grid;grid-template-columns:repeat(3,40px);gap:8px}.cluster-art i{height:40px;border:2px solid var(--blue);position:relative}.cluster-art i:after{content:"";position:absolute;left:50%;top:-9px;width:5px;height:5px;background:var(--orange);border-radius:50%}

.journey{background:var(--green);color:var(--paper);max-width:none;width:100%;padding-left:6%;padding-right:6%}.journey .section-number{left:3%;color:#efad96}.journey-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.journey h2{font:600 clamp(55px,7vw,100px)/.88 var(--serif);letter-spacing:-.055em;margin-top:15px}.timeline{border-top:1px solid rgba(242,238,229,.3)}.timeline>div{display:grid;grid-template-columns:130px 1fr;gap:25px;padding:25px 0;border-bottom:1px solid rgba(242,238,229,.2)}.timeline span{font-size:10px;color:#d6cfc2;letter-spacing:.1em}.timeline h3{font:600 25px var(--serif)}.timeline p{color:#c7c3b9;font-size:13px;margin-top:5px}

.life{padding-bottom:120px}.life-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.life-card{min-height:350px;border:1px solid var(--ink);position:relative;overflow:hidden;padding:28px}.rdr{background:#25231f;color:#f2eee5;display:flex;align-items:end}.life-image{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.05)),url("assets/rdr2.jpg") center/cover;filter:saturate(.65)}.life-overlay{position:relative;z-index:1}.life-overlay span,.music-card>span,.youtube-card>span,.interests>span{font-size:9px;letter-spacing:.17em;font-weight:700}.life-overlay h3{font:600 clamp(38px,5vw,65px)/.82 var(--serif);margin:15px 0}.life-overlay p{font-size:12px;color:#d1ccc1}
.music-card{background:#c5d0c2;display:flex;flex-direction:column;justify-content:space-between}.record{width:135px;height:135px;border-radius:50%;background:repeating-radial-gradient(circle,#151613 0,#151613 5px,#2c2d29 6px,#151613 8px);color:var(--orange);display:grid;place-content:center;font-size:35px;box-shadow:7px 7px 0 rgba(17,18,15,.12)}.music-card h3{font:600 48px/.9 var(--serif);margin-top:20px}.music-card h3 em{color:var(--orange)}.music-card p{font-size:12px;color:#666b62}.music-card button{align-self:start;background:var(--ink);color:#fff;border:0;padding:11px 14px;font:700 9px var(--sans);letter-spacing:.12em;cursor:pointer}
.youtube-card{background:#e7b39d;display:grid;align-content:center;justify-items:start;gap:15px}.yt-logo{font-size:65px;color:#d83224}.youtube-card h3{font:600 45px var(--serif);letter-spacing:-.04em}.youtube-card p{max-width:370px;color:#655b56;line-height:1.5;font-size:13px}
.interests{background:#ebe5d9;grid-column:span 2;min-height:240px}.interest-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:35px}.interest-pills b{border:1px solid var(--ink);padding:11px 15px;font-size:10px;letter-spacing:.05em;font-weight:600}

.closing{text-align:center;padding:160px 0}.closing-line{width:1px;height:100px;background:var(--ink);margin:0 auto 45px}.closing h2{font:600 clamp(65px,10vw,135px)/.82 var(--serif);letter-spacing:-.07em;margin:20px 0 30px}.closing>p{color:var(--muted);font-size:13px}.closing-links{display:flex;justify-content:center;gap:35px;margin-top:35px}.closing-links a{font-size:10px;font-weight:700;letter-spacing:.15em;border-bottom:1px solid var(--ink);padding-bottom:6px}
footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.12em}

@media(max-width:900px){
.nav nav{display:none}.hero-main,.about-layout,.section-head.split,.chpc,.journey-grid{grid-template-columns:1fr}.hero-main{gap:70px}.portrait-wrap{justify-self:center}.portrait-frame{width:320px;height:420px}.hero-stamp{display:none}.about-layout{gap:50px}.skill-orbit{min-height:650px;aspect-ratio:auto;border-radius:20px}.orbit-item{width:42%}.five{top:46%;left:50%}.one{top:5%;left:4%}.two{top:5%;right:4%}.three{bottom:5%;right:4%}.four{bottom:5%;left:4%}.project,.project.featured{grid-column:span 2;grid-template-columns:45px 1fr 100px}.life-grid{grid-template-columns:1fr}.interests{grid-column:span 1}.section-number{display:none}
}
@media (max-width: 600px) {

    /* =========================
       MOBILE NAVIGATION
       ========================= */

    .nav {
        height: 68px;
        padding: 0 20px;
    }

    .logo {
        font-size: 18px;
    }

    .nav nav {
        display: none;
    }

    .music-btn {
        padding: 8px 11px;
        font-size: 10px;
    }

    .music-btn span {
        display: none;
    }


    /* =========================
       HERO
       ========================= */

    .hero {
        min-height: auto;
        padding: 105px 22px 65px;
    }

    .hero-top {
        font-size: 8px;
        letter-spacing: .12em;
    }

    .hero-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 55px;
        margin-top: 45px;
    }

    .hero h1 {
        font-size: clamp(68px, 20vw, 92px);
        line-height: .78;
        margin: 18px 0 28px;
    }

    .hero-intro {
        font-size: 15px;
        line-height: 1.65;
        max-width: 100%;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 25px;
    }

    .pill {
        text-align: center;
        padding: 14px;
    }

    .portrait-wrap {
        width: 82%;
        margin: 0 auto;
        justify-self: center;
    }

    .portrait-frame {
        width: 100%;
        height: 410px;
        transform: rotate(1.5deg);
        box-shadow: 12px 12px 0 var(--green);
    }

    .scribble {
        left: -18px;
        bottom: -20px;
        font-size: 14px;
    }

    .hero-stamp {
        display: none;
    }


    /* =========================
       SECTIONS
       ========================= */

    .section {
        width: 90%;
        padding: 90px 0;
    }

    .section-number {
        display: none;
    }

    .section-head {
        margin-bottom: 45px;
    }

    .section-head h2 {
        font-size: clamp(50px, 15vw, 68px);
        line-height: .88;
    }

    .label {
        font-size: 9px;
        letter-spacing: .15em;
    }


    /* =========================
       ABOUT
       ========================= */

    .about {
        padding-top: 85px;
    }

    .about-layout {
        display: flex;
        flex-direction: column;
        gap: 45px;
    }

    .about-copy .lead {
        font-size: 25px;
        line-height: 1.25;
    }

    .about-copy p {
        font-size: 15px;
        line-height: 1.7;
    }

    .fact {
        padding: 17px 0;
        align-items: flex-start;
    }

    .fact span,
    .fact strong {
        font-size: 9px;
    }

    .fact strong {
        max-width: 55%;
    }

    .marquee {
        margin-top: 65px;
    }


    /* =========================
       ENGINEERING
       ========================= */

    .engineering {
        padding-left: 5%;
        padding-right: 5%;
    }

    .section-head.split {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .section-head.split > p {
        font-size: 14px;
        line-height: 1.65;
    }

    .skill-orbit {
        display: flex;
        flex-direction: column;
        gap: 10px;

        min-height: auto;
        aspect-ratio: auto;

        border: 0;
        border-radius: 0;
        background: none;

        padding: 0;
    }

    .skill-orbit::before,
    .skill-orbit::after,
    .orbit-center {
        display: none;
    }

    .orbit-item {
        position: relative;
        inset: auto !important;

        width: 100%;
        padding: 18px 16px;

        border: 1px solid rgba(242,238,229,.18);

        background:
            linear-gradient(
                100deg,
                rgba(228,87,46,.08),
                transparent 65%
            );

        transform: none !important;
    }

    .orbit-item span {
        font-size: 20px;
        margin: 6px 0;
    }

    .orbit-item small {
        font-size: 8px;
    }

    .learning-strip {
        margin-top: 55px;
    }

    .learning-strip div {
        gap: 7px;
    }

    .learning-strip b {
        font-size: 9px;
        padding: 8px 10px;
    }


    /* =========================
       CHPC
       ========================= */

    .chpc {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .chpc-image {
        width: 92%;
        margin: 0 auto;
    }

    .image-note {
        right: -12px;
        bottom: -20px;
        width: 150px;
        padding: 14px;
        font-size: 8px;
    }

    .chpc h2 {
        font-size: clamp(45px, 13vw, 65px);
    }

    .chpc-copy > p:not(.chapter) {
        font-size: 14px;
        line-height: 1.7;
    }

    .chpc-grid {
        margin-top: 25px;
    }

    .chpc-grid div {
        padding: 17px 0;
    }

    .chpc-grid span {
        font-size: 10px;
    }


    /* =========================
       PROJECTS
       ========================= */

    .projects {
        padding-left: 5%;
        padding-right: 5%;
    }

    .project-list {
        display: block;
    }

    .project,
    .project.featured {
        min-height: auto;

        display: grid;
        grid-template-columns: 30px 1fr;

        padding: 30px 4px;

        border-right: 0 !important;
    }

    .project-index {
        font-size: 15px;
    }

    .project h3 {
        font-size: clamp(31px, 9vw, 45px);
        line-height: .9;
        margin: 13px 0 17px;
    }

    .project p {
        font-size: 13px;
        line-height: 1.6;
    }

    .tech {
        font-size: 8px;
        line-height: 1.5;
        margin-top: 18px;
    }

    .project-visual {
        display: none;
    }


    /* =========================
       JOURNEY
       ========================= */

    .journey {
        padding-left: 5%;
        padding-right: 5%;
    }

    .journey-grid {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .journey h2 {
        font-size: clamp(55px, 16vw, 78px);
    }

    .timeline > div {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 15px;
        padding: 21px 0;
    }

    .timeline span {
        font-size: 8px;
        line-height: 1.4;
    }

    .timeline h3 {
        font-size: 22px;
    }

    .timeline p {
        font-size: 12px;
        line-height: 1.5;
    }


    /* =========================
       INTERESTS
       ========================= */

    .life-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .life-card {
        min-height: 330px;
        padding: 23px;
    }

    .rdr {
        min-height: 410px;
    }

    .life-overlay h3 {
        font-size: clamp(40px, 12vw, 58px);
    }

    .music-card h3 {
        font-size: 43px;
    }

    .youtube-card h3 {
        font-size: 38px;
    }

    .interests {
        grid-column: auto;
        min-height: auto;
    }

    .interest-pills {
        gap: 7px;
        margin-top: 25px;
    }

    .interest-pills b {
        font-size: 8px;
        padding: 9px 10px;
    }


    /* =========================
       CONTACT / END
       ========================= */

    .closing {
        padding: 110px 0;
    }

    .closing h2 {
        font-size: clamp(58px, 17vw, 76px);
        line-height: .83;
    }

    .closing > p {
        font-size: 12px;
    }

    .closing-links {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        margin-top: 30px;
    }

    .closing-links a {
        font-size: 9px;
    }

    .contact-details {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        line-height: 1.5;
    }


    /* =========================
       FOOTER
       ========================= */

    footer {
        padding: 22px 20px;

        flex-direction: column;
        align-items: center;

        gap: 8px;

        text-align: center;

        font-size: 8px;
    }


    .anime-card {
    min-height: 390px;
}

.anime-card .life-overlay h3 {
    font-size: 48px;
}
}

.contact-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 28px;

    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.03em;
}

.contact-details a {
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
    transition: 0.2s ease;
}

.contact-details a:hover {
    color: var(--orange);
    border-color: var(--orange);
}


.anime-card {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #111;
}

.anime-image {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0.05) 100%
        ),
        url("assets/dbz.jpg");

    background-size: cover;
    background-position: center;

    transition: transform 0.7s ease;
}

.anime-card:hover .anime-image {
    transform: scale(1.06);
}

.anime-card .life-overlay {
    position: absolute;
    inset: auto 25px 25px 25px;
    z-index: 2;
}

.anime-card .life-overlay span {
    font-size: 9px;
    letter-spacing: 0.15em;
}

.anime-card .life-overlay h3 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.82;
    margin: 12px 0 18px;
}

.anime-card .life-overlay p {
    max-width: 380px;
    font-size: 12px;
    line-height: 1.5;
}