/* ==========================================
   Base Section
   Brutalsurfcam v0.9.0
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
    --font-sans:"Noto Sans TC","Inter","PingFang TC","Microsoft JhengHei",sans-serif;

    --text-xs:.75rem;
    --text-sm:.875rem;
    --text-base:1rem;
    --text-lg:1.125rem;
    --text-xl:1.25rem;
    --text-2xl:1.5rem;
    --text-3xl:1.875rem;
    --text-4xl:2.25rem;

    --line-tight:1.15;
    --line-normal:1.5;
    --line-relaxed:1.75;

    --tracking-tight:-0.03em;
    --tracking-normal:0;

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;

    --section-y:clamp(88px,8vw,128px);
    --section-y-sm:clamp(56px,6vw,80px);
    --container-x:clamp(20px,6vw,96px);

    --primary:#003566;
    --accent:#0077ff;

    --green:#2ecc71;
    --yellow:#f1c40f;
    --red:#e74c3c;
    --gray:#cfcfcf;

    --surface:#f6f6f6;
    --text:#223042;
    --radius:20px;

    --shadow:0 10px 28px rgba(12,33,71,.08);
    --transition:.3s;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:var(--line-normal);
    color:var(--text);
    background:#fff;
}

h1,
h2,
h3,
h4{
    color:var(--primary);
    font-weight:700;
    letter-spacing:var(--tracking-tight);
    line-height:var(--line-tight);
}

p{
    line-height:var(--line-relaxed);
}

small{
    font-size:var(--text-sm);
    line-height:var(--line-normal);
}

button,
input,
select,
textarea{
    font:inherit;
}

a{
    color:inherit;
}

img,
video{
    display:block;
    max-width:100%;
}

section{
    padding:var(--section-y) var(--container-x);
}

h2{
    text-align:center;
    margin-bottom:var(--space-7);
    font-size:clamp(2rem,3vw,2.75rem);
    line-height:var(--line-tight);
}

@keyframes bounce{

0%,100%{
transform:translate(-50%,0);
}

50%{
transform:translate(-50%,10px);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}