:root{
 --color-bg-outer: #2f3541;
 --color-bg-inner: #f3ebdd;
 --color-text: #2e2e2e;
 --color-border: #2e2e2e;
 --color-main: #5c7fa3;  
 --color-main-dark: #3a4a5c;
 --color-main-light: #8faac4;
 --color-accent-gains: #ac3049;
  --font-sans: "Noto Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-header: "Lakki Reddy", "Georgia", "Times New Roman", serif;
  --font-mono: "Nova Mono", "Fira Mono", "Courier New", monospace;
}
/* point to self-hosted fonts */
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lakki Reddy";
  src: url("/assets/fonts/lakki-reddy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nova Mono";
  src: url("/assets/fonts/nova-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
/*main page background and global containers */
html{
  background-color: var(--color-bg-outer);
  height: 100%
}
body {
  min-height: 95vh;
  background-color: var(--color-bg-inner);
  max-width: 1000px;
  width:98%;
  margin: 8px auto;
  font-family: var(--font-sans);
  padding: 20px;
  line-height: 1.25;
  color: var(--color-text);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*headers*/
header{
  display: flex;
  align-items: center;
}
header h1{
  font-size: 4em;
  margin: 0 auto;
  font-family: var(--font-header);
  color: var(--color-main);
  -webkit-text-stroke: 1px var(--color-main-dark);
  letter-spacing: 0.5px;
  line-height: 1.25;
}
h1, h2, h3 {
  font-weight: 600;
  margin-bottom: 0.5em;
}