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

html{
scroll-behavior:smooth;
}

:root{
--grass:#2D5A1B;
--leaf:#4A8C35;
--sky:#EAF6FF;
--sun:#FFD166;
--coral:#FF6B6B;
--mint:#A8E6CF;
--sand:#FFF3E0;
--white:#FFFFFF;
--dark:#1A2E12;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:var(--sky);
color:var(--dark);
}

header{
padding:1.5rem 3rem;
display:flex;
justify-content:space-between;
align-items:center;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:100;
}

header h1{
color:var(--grass);
font-size:1.8rem;
}

nav{
display:flex;
gap:1rem;
}

.nav-link{
font-weight:700;
font-size:0.9rem;
color:var(--grass);
padding:0.5rem 1.2rem;
border-radius:50px;
text-decoration:none;
transition:all 0.2s;
}

.nav-link:hover{
background:var(--grass);
color:white;
}

section{
padding:3rem;
}

h2{
margin-bottom:1.5rem;
color:var(--dark);
}

.dogs-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1.5rem;
}

.dog-card{
text-align:center;
padding:1.5rem;
background:white;
border-radius:18px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
transition:transform 0.2s, box-shadow 0.2s;
list-style:none;
}

.dog-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.dog{
width:175px;
height:175px;
margin:0 auto 0.7rem auto;
border-radius:12px;
background-image:url(https://users.ct.fh-salzburg.ac.at/dogs.webp);
background-size:1000px 558px;
background-repeat:no-repeat;
transition:transform 0.2s;
}

.dog-card:hover .dog{
transform:scale(1.05);
}

.breed{
font-weight:700;
color:var(--grass);
margin-top:0.4rem;
}

.age{
font-size:0.9rem;
color:#666;
}

.featured{
background:var(--sand);
border:3px solid var(--sun);
max-width:260px;
margin:auto;
}