body {
  background-color: #ecf0f5;
  font-size: 12px;
}

a,
a:hover {
  color: #333;
  text-decoration: none !important;
}

.wrapper {
  height: 100vh !important;
}

.header {
  padding: 10px 10px;
}

.content {
  padding: 10px 10px;
  border-radius: 55px;
  min-height: calc(100vh - 75px);
}

.card {
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.card-body {
  padding: 0 !important;
  overflow: hidden;
}

table {
  font-size: 13px;
}

tr.r1,
tr.r2,
tr.r3 {
  font-size: 20px;
  font-weight: 600;
  transition: scale 0.5s ease;
}

tr.r1:hover,
tr.r2:hover,
tr.r3:hover {
  --bs-table-accent-bg: transparent !important;
  scale: 1.05;
}

th,
td {
  text-align: center;
  vertical-align: middle;
}

.rankImage {
  width: auto !important;
  height: 85px !important;
  transition: all 0.3s ease;
}

.footer {
  padding: 10px 10px;
}

.footer p {
  margin: 0;
}

@media (max-width: 575.98px) {
  tr.r1,
  tr.r2,
  tr.r3 {
    font-size: 15px;
  }

  .rankImage {
    width: auto !important;
    height: 55px !important;
  }
}