:root {
  --gh-gray-core: #adb5bd;
  --gh-theme-core: var(--gh-gray-core);
  --gh-theme-100: var(--gh-gray-100);
  --gh-theme-150: var(--gh-gray-150);
  --gh-theme-200: var(--gh-gray-200);
  --gh-theme-300: var(--gh-gray-300);
  --gh-theme-400: var(--gh-gray-400);
  --gh-theme-500: var(--gh-gray-500);
  --gh-theme-600: var(--gh-gray-600);
  --gh-theme-700: var(--gh-gray-700);
  --gh-theme-800: var(--gh-gray-800);
  --gh-theme-850: var(--gh-gray-850);
  --gh-theme-900: var(--gh-gray-900);

  --gh-dark-color: #212121;
  --gh-light-color: #deeefb;

  --gh-gray-100: hsl(210, 17%, 98%);
  --gh-gray-150: hsl(210, 17%, 93%);
  --gh-gray-200: hsl(210, 17%, 88%);
  --gh-gray-300: hsl(210, 17%, 78%);
  --gh-gray-400: hsl(210, 17%, 68%);
  --gh-gray-500: rgb(130, 148, 166);
  --gh-gray-600: hsl(210, 17%, 48%);
  --gh-gray-700: hsl(210, 17%, 38%);
  --gh-gray-800: hsl(210, 17%, 28%);
  --gh-gray-850: hsl(210, 17%, 23%);
  --gh-gray-900: hsl(210, 17%, 18%);
}

/* #region: Sticky Footer */
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

footer {
  flex-shrink: 0;
}

/* #endregion: Sticky Footer */

.btn-primary {
  --bs-btn-bg: var(--gh-theme-600);
  --bs-btn-border-color: var(--gh-theme-600);
  --bs-btn-hover-bg: var(--gh-theme-700);
  --bs-btn-hover-border-color: var(--gh-theme-700);
  --bs-btn-focus-bg: var(--gh-theme-700);
  --bs-btn-focus-border-color: var(--gh-theme-700);
  --bs-btn-active-bg: var(--gh-theme-700);
  --bs-btn-active-border-color: var(--gh-theme-700);
}

.navbar,
.footer {
  background-color: var(--gh-gray-900);
}

.footer {
  color: var(--gh-gray-200);
}

.socialicons {
  font-size: 2rem;
  padding-left: 0.5rem;
  color: var(--gh-gray-300);
  transition: color 0.2s;
}

.socialicons:hover {
  color: var(--gh-gray-core);
}

.app-logo {
  max-width: 600px;
}

.checklist i {
  color: var(--gh-gray-800);
  font-size: 1.2rem;
  padding-right: 0.5rem;
}

.devicons {
  font-size: 3.5rem;
  padding-left: 0.5rem;
}

.devicons:hover {
  color: var(--gh-gray-core);
}

.table tr {
  border: 1px solid #adb5bd;
}

.table td {
  padding: 3px;
  font-size: 14px;
}

.card {
  height: 100%;
  transition: transform 0.25s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transform: scale(1.03) translateY(-2%);
}

/* .card-img-top {
  height: 300px;
  object-fit: cover;
} */

/* Medi Query */

@media (max-width: 576px) {
  .table td {
    padding: 5px;
    font-size: 18px;
  }
  .movie-poster {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 768px) {
  .table td {
    padding: 10px;
  }
}

@media (min-width: 992px) {
  .table td {
    padding: 15px;
  }
}

@media (min-width: 1200px) {
  .table td {
    padding: 20px;
  }
}

.movie-poster {
  width: auto;
  height: auto;
}

.plot-summary {
  margin-top: 10px;
}