ip-checker/assets/static/style.css

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");

/* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
:root {
  --bg: #ede9fe;
  --table: #c4b5fd;
  --text-footer: #475569;
  --text: #2e1065;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --table: #334155;
    --text-footer: #94a3b8;
    --text: #f1f5f9;
  }

  a:link {
    color: #3b82f6;
  }

  a:visited {
    color: #8b5cf6;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 14px !important;
  }
  th {
    padding: 2px !important;
  }
  footer {
    font-size: 12px !important;
  }
}

body {
  font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;

  background-color: var(--bg);
  color: var(--text);
}

table {
  border-collapse: collapse;
}

th {
  border: 2px var(--table) solid;
  padding: 5px 20px;
}

footer {
  color: var(--text-footer);
  font-size: 14px;

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -10px);
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}