@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');

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

html {
  font-family: 'Merriweather', serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body{ 
  background-color: #E2E9F9;
}

main{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  flex:1;
  align-items:center;
  min-height: 95vh;
}

.container{
  max-width: 800px;
  padding: 2rem;
  background-color: #ffffff;
  border-radius:5px;
  
  flex-wrap:wrap;
  flex:1;
}

.title{
    font-size:1rem;
    font-weight:900;
    color:#373C47;
}

.header-options{
    display:flex;
    justify-content:space-between;
    height: 200px;
    padding: .2rem 0;
    height:max-content;
    flex-wrap:wrap;
}

.search{
    padding:.8rem;
    font-size:.7rem;
    font-weight:500;
    width:210px;
    border: solid #E2E9F9 1px;
}

ul{
    list-style-type:none;
}

.nav-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.nav-items{
    padding:0 .5rem;
    font-size:.8rem;
    cursor:pointer;
}

.nav-active{
    background-color:#849fff;
    padding:.4rem;
    border-radius:5px;
    color:#ffffff;
}

.user-cards{
    display:flex;
    justify-content:center;
    margin:2rem 0;
    flex-wrap:wrap;
    gap:.5rem;
}

.card{
    height:150px;
    width:240px;
    padding:1rem;
    background-color: #FBFCFF;
    border-radius:5px;
    
}

.card:hover{
    border:solid #E2E9F9 1px;
    box-shadow: 1px 0px 10px 1px #E2E9F9;
}

.card-details{
    display:flex;
}

.card-info{
    font-size:.5rem;
    width:70%;
}

.card-img{
    width:30%;
}

img{
    width:90%;
    height:60px;
    border-radius:20px;
    clip-path:circle();
}

.card-name{
    font-size:.8rem;
    font-weight:900;
    color:#373C47;
}

.card-city{
    font-size:.6rem;
    font-weight:900;
    color:#373C47;
    line-height:1;
    margin:.2rem 0 .4rem 0;
}

.tags{
    border-radius:25px;
    color:#516FD4;
    font-size:.5rem;
    border: solid #516FD4 1px;
    padding:.2rem;
    font-weight:700;
}

@media (max-width: 680px) {
  #nav-list{
    margin:1rem 0;
  }
}