:root{
    --blue:#087da4;
    --dark:#111;
    --pale:#e1f5ff;
    --line:#aedce8
}

*{
    box-sizing:border-box
}

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

a{
    color:inherit
}

.site-header{
    height:64px;
    padding:0 2.5%;
    display:flex;
    align-items:center;
    gap:30px;
    background:#fff
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  display: block;
  width: 105px;
  height: auto;
  padding: 10px;
}

.main-nav{
    display:flex;
    gap:24px;
    flex:1
}

.main-nav a{
    text-decoration:none;
    font-size:14px
}

.search{
    display:flex;
    border:1px solid #444;
    border-radius:20px;
    overflow:hidden
}

.search input{
    width:135px;
    border:0;
    outline:0;
    padding:5px 10px
}

.search button{
    border:0;
    background:#fff;
    padding-right:9px
}

h1 {
   text-align: center;
}

.bird-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.bird-list .bird-card {
    width: 260px;
    height: auto;
    flex: none;
    margin: 0;
    overflow: hidden;
    background-color: #b4d2ff;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    align-items: center;
}

.bird-card-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.bird-card-text {
    padding: 10px 14px 14px;
}

.bird-card-text h2 {
    margin: 0 0 4px;
    font-size: 15px;
}

.bird-card-text p {
    margin: 4px 0;
    font-size: 12px;
}

.bird-card-text ul {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 12px;
}