/* declare variables */
:root {
  /* backgrounds */
  --bg1: #2a2a2a;
  --bg2: #212121;

  /* foregrounds */
  --fg12: #f5f5f5;
  --fg11: #e9e9e9;
  --fg10: #c7c7c7;
  --fg7: #898989;
  --fg6: #656565;

  /* specify color scheme to browser */
  /* customizes scrollbar to fit with theme */
  color-scheme: dark;
}

* {
  /* remove default browser styles */
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  color: var(--fg11);
}

/* set font */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", Helvetica, sans-serif;
}

body {
  min-height: 100svh;
  background: var(--bg1);

  /* center contet */
  display: grid;
  place-items: center;
}

main {
  width: clamp(650px, 50%, 2000px);
  background: var(--bg2);

  margin: 5rem 0;
  padding: 64px;

  /* comment out the line below to print page */
  /* padding-bottom: 12px; */

  border-radius: 16px;
}

/* utility */
.gray {
  color: var(--fg10);
}

a.disabled {
  pointer-events: none;
  text-decoration: none;
  color: var(--fg7);
}