@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

html {
  background-color: #0e0e0e;
}

html, body {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

body {
  color: #e0e0e0;
  text-align: center;
}

header {
  text-align: center;
  margin-bottom: 32px;
}

#character {
  width: 50%;
  min-width: 350px;
}

table {
  --border-thickness: 1px;
  --border-length: 12px;
  --border-color: #e0e0e0;

  padding: 16px;
  background:
  linear-gradient(var(--border-color), var(--border-color)) top left,
  linear-gradient(var(--border-color), var(--border-color)) top left,
  linear-gradient(var(--border-color), var(--border-color)) bottom right,
  linear-gradient(var(--border-color), var(--border-color)) bottom right;
  background-size:
  var(--border-length) var(--border-thickness),
  var(--border-thickness) var(--border-length),
  var(--border-length) var(--border-thickness),
  var(--border-thickness) var(--border-length);
  background-repeat: no-repeat;
}

table th, table td {
  padding: 8px;
}

#specifications {
  margin: 0 auto;
}

#specifications th {
  text-align: left;
}