body {
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
    margin:0;
    padding:0}

* {
    box-sizing:border-box}

html {
    scroll-behavior:smooth}

.hero-bg {
    background-image:linear-gradient(rgba(30,64,175,.85),rgba(30,64,175,.7)),url('https://images.unsplash.com/photo-1643035660996-0834db96a85a');
    background-size:cover;
    background-position:center;
    background-attachment:fixed}

.diy-hero {
    background-image:linear-gradient(rgba(30,64,175,.85),rgba(30,64,175,.7)),url('https://images.unsplash.com/photo-1531906278209-2fca6412fca5');
    background-size:cover;
    background-position:center}

.fade-up {
    animation:fadeUp .7s ease both}

@keyframes fadeUp {
    from {
    opacity:0;
    transform:translateY(24px)}

to {
    opacity:1;
    transform:none}
}

.input {
    width:100%;
    padding:0.75rem 1rem;
    border:1px solid #d1d5db;
    border-radius:.5rem;
    background:white;
    color:#111827}

.input:focus {
    outline:2px solid #1d4ed8;
    border-color:transparent}

.resource {
    background:#f9fafb;
    padding:2rem;
    border-radius:.75rem;
    text-align:center;
    border:1px solid #f3f4f6;
    transition:.2s}

.resource:hover {
    background:#eff6ff}

.resource svg {
    color:#1d4ed8;
    width:32px;
    height:32px;
    margin:0 auto 1.5rem}

.resource h3 {
    font-size:1.25rem;
    font-weight:700;
    color:#111827;
    margin-bottom:.5rem}

.resource p {
    color:#4b5563}

i[data-lucide] svg, svg {
    width:20px;
    height:20px}

.line-clamp-2 {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden}