/* Grid container */
.grid {
  display: grid;
  grid-template-columns: repeat(49, 20px); /* 49 columns */
  grid-template-rows: repeat(49, 20px); /* 49 rows */
  gap: 7px;
  margin: 20px auto;
  width: 1400px;
  padding: 5px;
  justify-content: center;
}
.grid .cell {
  cursor: pointer;
}
.cr-special {
  color: rgb(220, 243, 8);
  font-weight: bold;
  outline: white;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black; /* Creates a fake border using shadow from all sides */
}

.navbar-toggler {
  background-color: white;
}
.navbar-brand {
  color: white;
}
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6c63ff;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.nav-link.logout {
  background: red;
  padding: 10px;
  border-radius: 10px;
}

/* for mobile screen */
@media (max-width: 1400px) {
  .grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    margin: 0 !important;
    gap: 2px;
    padding-inline: 10px;
  }
  .search-box > input {
    width: 100%;
  }
}