.pagination {
  display: inline-block;
  padding: 10px 0;
}

.pagination a {
  color: black;
  background: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.3s;
  border: 1px solid #ddd;
  margin: 0 4px;
  border-radius: 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}


/* Hide mobile content by default */
.showOnMobile {
  display: none;
}

/* Hide desktop content by default */
.showOnDesktop {
  display: none;
}

/* Show mobile content when screen width is 768px or less */
@media (max-width: 768px) {
  .showOnMobile {
    display: block;
  }
  .showOnDesktop {
    display: none;
  }
}

/* Show desktop content when screen width is wider than 768px */
@media (min-width: 769px) {
  .showOnDesktop {
    display: block;
  }
  .showOnMobile {
    display: none;
  }
}


/* ScrollBar Shit */

/* width */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background: #5a5853;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #520000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520000;
}
@-webkit-keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
@keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}