html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Manrope';
    src: url('../assets/fonts/Manrope-VariableFont_wght.woff2') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* scroll reveal */
.sr {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.sr.visible {
    opacity: 1;
    transform: translateY(0);
}

.sr-d1 {
    transition-delay: .1s;
}

.sr-d2 {
    transition-delay: .2s;
}

.sr-d3 {
    transition-delay: .3s;
}

.sr-d4 {
    transition-delay: .4s;
}

.sr-d5 {
    transition-delay: .5s;
}

.sr-d6 {
    transition-delay: .6s;
}

.sr-d7 {
    transition-delay: .7s;
}

.sr-d8 {
    transition-delay: .8s;
}

.sr-d9 {
    transition-delay: .9s;
}

.sr-d10 {
    transition-delay: 1s;
}

/* subtle glow */
.glow-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* card hover */
.project-card {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(56, 152, 236, .12);
}

/* btn hover */
.btn-primary {
    transition: background .25s, transform .2s, box-shadow .25s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(56, 152, 236, .3);
}

/* skill chip hover */
.skill-chip {
    transition: border-color .25s, background .25s, transform .2s;
}

.skill-chip:hover {
    border-color: var(--accent) !important;
    background: rgba(56, 152, 236, .08) !important;
    transform: translateY(-2px);
}

/* nav */
.nav-link {
    position: relative;
    transition: color .2s;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent);
    transition: width .25s;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--accent);
}

:root {
    --bg: #111114;
    --surface: #18181c;
    --surface2: #1e1e23;
    --text: #f0f0f2;
    --muted: #8a8a9a;
    --accent: #3898ec;
    --accent-dim: rgba(56, 152, 236, .15);
}

.legal span {
    margin-right: 10px;
}