:root {
  /* Body Color*/
  --base-color: #ffffff;

  /* Text Color */
  --text-color: #000000;

  /* Theme Switch */
  --base-variant: #e8e9ed;

  /* backToTop button */
  --sideDistance: 10px;
  /* Colors */
    --arrow-color: #2B2B2B;
    --color-surface: #fff;
    --color-surface-variant: #e6e6e6;
    --color-surface-high: #f5f5f5;
    --color-surface-higher: #e3e3e3;
    --color-surface-higher-hover: #cfcfcf;
    --color-surface-high-hover: var(--color-surface-higher);

      /* Anim */
    --duration-multiplier: 1; /* Allow disabling or increase animation speed */
    --duration-75: calc(75ms * var(--duration-multiplier));
    --duration-100: calc(100ms * var(--duration-multiplier));
    --duration-150: calc(150ms * var(--duration-multiplier));
    --duration-200: calc(200ms * var(--duration-multiplier));
    --duration-300: calc(300ms * var(--duration-multiplier));
    --duration-400: calc(400ms * var(--duration-multiplier));
    --duration-500: calc(500ms * var(--duration-multiplier));
    --duration-600: calc(600ms * var(--duration-multiplier));
    --duration-700: calc(700ms * var(--duration-multiplier));
    --duration-800: calc(800ms * var(--duration-multiplier));
    --duration-900: calc(900ms * var(--duration-multiplier));
    --duration-1000: calc(1000ms * var(--duration-multiplier));
    --duration-1200: calc(1200ms * var(--duration-multiplier));
    --duration-1400: calc(1400ms * var(--duration-multiplier));
    --duration-2000: calc(2000ms * var(--duration-multiplier));
    --duration-hover: var(--duration-200);
}

body {
  margin: 0;
  background: var(--base-color);
}

/* Text Colors */
h1, h2, h3, h4, h5, h6, p, a {
  color: var(--text-color);
}

.topnav {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6vh;
  border-bottom: solid #7E0000;
  z-index: 1;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  min-width: 170px;
  height: fit-content;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size: 18px;
  color: white;
}

.topnav a.active {
  background: #7E0000;
  color: white;
  min-width: 170px;
}

/* Top Button */
.topButton {
  margin: 2px;
  /* Fixes width issue on smaller displays | Should be black when not selected */
  min-width: 170px;
  cursor: pointer;
  border: none;
  color: white;
  transition: ease-in 0.2s;
  background: linear-gradient(to left, rgb(0, 0, 0) 50%, #7E0000 50%, #7E0000 100%) right;
  background-size: 200%;
}

.topButton:hover {
  background-position: left;
  color: white;
}
/* Top Button End */

.WrongInput {
  color: var(--text-color);
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.listing-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 16px;
  max-width: 80%;
}

.listing {
  border: 2px solid var(--text-color);
  width: 300px;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.refreshButton {
  padding: 5px;
  cursor: pointer;
  width: 200px;
  height: fit-content;
  border: solid #7E0000;
  color: black;
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
}

.refreshButton:hover {
  background-position: left;
  background-color: #eee;
}