:root {
  --font1: "Nerko One", cursive;
  --color1: #272b30;
  --color2: #3a497b;
  --color3: #363739;
  --btn-color: #0099cc;
  --font2: "Comfortaa", cursive;
}
p,
h1 {
  margin: 0;
  padding: 0;
  font-family: var(--font2);
}
body {
  background: var(--color1);
  font-family: var(--font2);
}
header img {
  max-height: 30vh;
  object-fit: cover;
}
.navbar .container {
  margin-top: -40px;
  background-color: var(--color2);
  box-shadow: 0 0 10px rgb(0 0 0 / 0.7);
}
.navbar .navbar-brand {
  font-size: 1.3rem;
}
.navbar ul a {
  font-size: 0.8rem;
  color: white;
  text-transform: uppercase;
}
.nav-link.active ,.nav-link:hover{
  color: var(--btn-color);
}
.card-footer small {
  background-color: var(--color3);
  border-radius: 10px;
  padding: 0 5px;
}
.home .card {
  filter: grayscale(0.7);
  transition: transform 0.5s, filter 0.5s 0.1s;
}
.home .card:hover {
  transform: scale(1.05);
  filter: grayscale(0);
}

.detials p {
  color: white;
  font-size: 1rem;
}
.detials p span {
  background-color: var(--btn-color);
  border-radius: 10px;
  padding: 3px 5px;
  font-size: 0.8rem;
  color: black;
}
.detials p span:hover {
  color: white;
}
.btn-outline-warning {
  width: max-content;
}
.card-text.text-center {
  font-size: small;
}
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left: 4px solid #FF3D00;
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}