@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bricolage+Grotesque:opsz@10..48&family=Dancing+Script:wght@700&family=Gluten:wght@300&family=Merriweather&family=Noto+Serif:wght@300;400&family=Roboto+Slab:wght@300&family=Sedgwick+Ave+Display&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    padding-left:1px;
}

.container{
    max-width:1180px;
    margin-inline:auto;
    overflow:hidden;
}
.img{
    width:200px;
    height:51px;
    border-radius:50%;
    border-color:aquamarine;
    
    
}
.search-bar{
    align-items:center;
    font-family:'Roboto Slab', serif;

}

ul{
    list-style:none;
    
}
.body{
    font-family:'Roboto Slab', serif;
    
}
p{
    font-family:'Roboto Slab', serif;
    color:lightslategrey;
    line-height:1.4rem;
}
a{
    text-decoration: none;
}
.flex{
    display: flex;
    align-items: center;
}
nav{
    background-color:antiquewhite;
    box-shadow:0 0 4px #bbd0e2;
    position:fixed;
    top:0;
    z-index:99;
    left:0;
    right:0;
    
}
.nav-item.active{
    color:dodgerblue;
}
.main-nav{
    justify-content:space-between;
    padding-block:8px ;
    
}
.nav-links ul{
    gap: 34px;
}
.hover-link{
    cursor:pointer;
}
.hover-link:hover{
    color:dimgray;
}
.hover-link:active{
    color:red;
}
.search-bar{
    height:34px;
    gap:8px;
}
.news-input{
    width:200px;
    height:100%;
    padding-inline:12px;
    border-radius:4px;
    font-family:'Roboto Slab', serif;
}
.search-button{
    background-color:cornflowerblue;
    padding:8px 24px;
    border:none;
    border-radius:4px;
    font-family:'Roboto Slab', serif;
}
.search-button:hover{
    color:gray;
    font-family:'Roboto Slab', serif;
}
main{
    padding-block:20px;
    margin-top:80px;
}
.cards-container{
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:20px;
    align-items: start;
}
.card-content{
    text-align:center;
    font-family:'Roboto Slab', serif;
    padding:12px;
}
.card{
    width:360px;
    min-height:400px;
    box-shadow: 0 0 4px #d4ecff;
    cursor:pointer;
    border-radius:4px;
    overflow:hidden;
    transition:all 0.3s ease;
}
.card:hover{
    box-shadow: 0 0 4px #d4ecff;
    background-color:#f9fdff;
    transform:translateY(-2px);
}
.card-header img{
    width:100%;
    height:180px;
    object-fit: cover;
}
.news-source{
    margin-block:12px;
}