/* ==========================================================
   SammyVibes Portfolio
   typography.css
========================================================== */

/* ==========================================================
   Base
========================================================== */

html{
    font-size:16px;
}

body{
    font-family:var(--font);
    font-size:1rem;
    font-weight:400;
    line-height:1.7;
    color:var(--text);
}


/* ==========================================================
   Headings
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-0.03em;

}

h1{

    font-size:clamp(3rem,7vw,5rem);

    margin-bottom:1.5rem;

}

h2{

    font-size:clamp(2.25rem,5vw,3.5rem);

    margin-bottom:1.25rem;

}

h3{

    font-size:clamp(1.75rem,3vw,2.25rem);

    margin-bottom:1rem;

}

h4{

    font-size:1.35rem;

    margin-bottom:.8rem;

}

h5{

    font-size:1.15rem;

    margin-bottom:.6rem;

}

h6{

    font-size:1rem;

    margin-bottom:.5rem;

}


/* ==========================================================
   Paragraphs
========================================================== */

p{

    margin-bottom:1.5rem;

    color:var(--text-light);

    font-size:1rem;

}


/* ==========================================================
   Links
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

a:hover{

    color:var(--primary);

}


/* ==========================================================
   Lists
========================================================== */

ul,
ol{

    margin:0;

    padding:0;

}

li{

    line-height:1.8;

}


/* ==========================================================
   Strong / Emphasis
========================================================== */

strong{

    font-weight:700;

    color:var(--text);

}

em{

    font-style:italic;

}


/* ==========================================================
   Small Text
========================================================== */

small{

    font-size:.875rem;

    color:var(--text-muted);

}


/* ==========================================================
   Blockquote
========================================================== */

blockquote{

    padding:1.5rem;

    margin:2rem 0;

    border-left:4px solid var(--primary);

    background:var(--bg-secondary);

    color:var(--text-light);

    font-style:italic;

}


/* ==========================================================
   Code
========================================================== */

code{

    padding:.2rem .45rem;

    border-radius:6px;

    background:rgba(255,255,255,.05);

    font-family:Consolas, Monaco, monospace;

    font-size:.95em;

}

pre{

    overflow:auto;

    padding:1.5rem;

    border-radius:12px;

    background:#0d1117;

}

pre code{

    background:none;

    padding:0;

}


/* ==========================================================
   Helpers
========================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-muted{

    color:var(--text-muted);

}

.uppercase{

    text-transform:uppercase;

}

.capitalize{

    text-transform:capitalize;

}

.lowercase{

    text-transform:lowercase;

}

.fw-light{

    font-weight:300;

}

.fw-normal{

    font-weight:400;

}

.fw-medium{

    font-weight:500;

}

.fw-semibold{

    font-weight:600;

}

.fw-bold{

    font-weight:700;

}

.fw-black{

    font-weight:800;

}

.lead{

    font-size:clamp(1.15rem,2vw,1.35rem);

    color:var(--text-light);

    max-width:70ch;

}

.display{

    font-size:clamp(4rem,9vw,7rem);

    font-weight:800;

    line-height:1;

    letter-spacing:-0.05em;

}


/* ==========================================================
   Selection
========================================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   Headings
========================================================== */

.heading-gradient{

    background:linear-gradient(
        135deg,
        var(--primary) 0%,
        var(--secondary) 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

}

.heading-outline{

    color:transparent;

    -webkit-text-stroke:1px var(--text);

}

.heading-accent{

    color:var(--primary);

}

.heading-muted{

    color:var(--text-muted);

}

.heading-uppercase{

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.85rem;

    font-weight:600;

    color:var(--primary);

}

.heading-divider{

    position:relative;

    display:inline-block;

    padding-bottom:14px;

}

.heading-divider::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:72px;

    height:4px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}