:root{
  --blur:10px;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont;
  background:linear-gradient(135deg,#1e3c72,#2a5298);
  background-image:url('/bg.jpg'), linear-gradient(135deg,#1e3c72,#2a5298);
  background-size:cover;
  backdrop-filter: blur(var(--blur));
  color:#fff;
}

.topbar{
  display:flex;
  justify-content:space-between;
  padding:15px;
}

#search{
  padding:10px;
  border-radius:10px;
  border:none;
}

#container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:20px;
  padding:20px;
}

.card{
  background:rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius:20px;
  padding:15px;
  text-align:center;
  transition:0.3s;
}

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

.card img{
  width:32px;
}