@font-face {
  font-family: 'MoreSugar';
  src: url('../fonts/MoreSugar-Regular.ttf') format('truetype');
}

.inventory-mobile { 
  max-width:360px; 
  margin:0 auto; 
  padding:12px 10px 36px; 
  color:#6b6b9a; 
  text-align:center; 
  font-family: 'MoreSugar', sans-serif; 
}

.inventory-mobile h1#inv-title { 
  font-family: 'MoreSugar', sans-serif; 
  color:#d4d6f8; 
  font-size:20px; 
  font-weight:800; 
  margin:8px 0 18px; 
}

.fish-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 140px);
  gap: 2px 2px;
}

.fish-card { 
  background: transparent; 
  border-radius:12px; 
  padding:0; 
  box-shadow: none; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  height:98px; 
}

.fish-card img { 
  max-width:100%; 
  max-height:100%; 
  border-radius:10px; 
  object-fit:cover; 
  border: none !important; 
  outline: none !important; 
  box-shadow: none !important; 
}

.controls { 
  display:flex; 
  gap:10px; 
  align-items:center; 
  justify-content:center; 
  margin-top:8px; 
}

.controls input#new-name { 
  padding:10px 14px; 
  border-radius:22px; 
  border:0; 
  background:#fff; 
  width:42%; 
  font-weight:800; 
  font-family:'MoreSugar', sans-serif; 
  color:#6b6b9a; 
}

.controls .add-btn { 
  padding:10px 14px; 
  border-radius:22px; 
  background:#8f81bd; 
  color:#fff; 
  border:0; 
  font-weight:800; 
  font-family:'MoreSugar', sans-serif; 
}

.hint { 
  color:#9b9ab8; 
  font-size:11px; 
  margin-top:8px; 
  font-family:'MoreSugar', sans-serif; 
}

header.navbar { 
  background: #cbbff2; 
}

header.navbar ul li a { 
  color:#f0ecff; 
  font-weight:800; 
  font-family:'MoreSugar', sans-serif; 
}

header.navbar ul li a.active { 
  background:#ffffff; 
  color:#6b6b9a; 
}

@media (min-width: 420px) {
  .inventory-mobile { max-width:420px; }
  .fish-grid { grid-template-columns: repeat(2, 1fr); }
}