:root {
  --color-white-hex: #fff;
  --color-white-oklch: oklch(100% 0.00011 271.152);
  --color-white: var(--color-white-oklch, var(--color-white-hex));
  
  --color-black-hex: #171a1c;
  --color-black-oklch: oklch(21.545% 0.00555 236.816);
  --color-black: var(--color-black-oklch, var(--color-black-hex));

  --color-black-light-hex: #1a1d1f;
  --color-black-light-oklch: oklch(22.843% 0.00598 236.967);
  --color-black-light: var(--color-black-light-oklch, var(--color-black-light-hex));

  --line-color: var(--color-black);
  --dot-color: var(--color-black);
  --bg-color-from: var(--color-black-light);
  --bg-color-to: var(--color-black);

  --spacing: 40px;
  --dot-size: 3px;
  --line-size: 1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  --dot-position: calc(var(--spacing) * -0.5 + (var(--line-size) / 2));

  display: flex;
  justify-content: center;
  align-items: safe center;
  min-height: 100vh;
  line-height: 1.5;
  background-image:
    linear-gradient(to right, var(--line-color) var(--line-size), transparent 0),
    linear-gradient(to bottom, var(--line-color) var(--line-size), transparent 0),
    radial-gradient(circle, var(--dot-color) var(--dot-size), transparent 0),
    linear-gradient(135deg, var(--bg-color-from) 0%, var(--bg-color-to) 70%);
  background-size:
    var(--spacing) var(--spacing),
    var(--spacing) var(--spacing),
    var(--spacing) var(--spacing),
    100% 100%;
  background-position:
    0 0,
    0 0,
    var(--dot-position) var(--dot-position),
    0 0;
  background-repeat:
    repeat,
    repeat,
    repeat,
    no-repeat;
  color: var(--color-white);
  font-family: "Kanit", sans-serif;
  font-weight: 200;
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

h1 {
  margin-bottom: .5rem;
  font-size: 1.125rem;
  font-weight: 200;
}

h2 {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 200;
}

h2 span~span:before {
  content: "•";
  margin: 0 .5rem;
}

p {
  font-size: .875rem;
}

.tagline {
  margin-top: 1.5rem;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#logo {
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  width: auto;
  height: 30px;
}

#logo path {
  fill: var(--color-white);
  fill-rule:nonzero;
}