*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --max-page-width: 900px;
    --container-padding: 20px;
    --anim-fade-duration: 160ms;

    --clr-bg-main: #1D2228;
    --clr-bg-secondary: #CACFCF;
    --clr-txt-main: var(--clr-bg-secondary);
    --clr-txt-secondary: var(--clr-bg-main);
}


html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

h2, h3, h4 {
    font-weight: inherit;
    margin: 0;
}

h1, h2,
h3, h4 {
  text-wrap: balance;
  font-family: "Inter", serif;
  font-weight: 700;
  font-style: normal;
}

h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

body {
    font-family: "Kanit", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    min-height: 100vh;
    line-height: 1.5;
    margin: 0;
    background-color: var(--clr-bg-secondary);
    color: var(--clr-txt-secondary);
}

header{
    background-color: var(--clr-bg-main);
    color: var(--clr-txt-main);
}

header a { color: var(--clr-txt-main); }

h1 {
    font-size: 5em;
    margin: 0;
}

h2 { font-size: 1.8em; }

.navbar{
    margin: 0 0 30px 0;
}

.container {
    max-width: var(--max-page-width);
    margin: 0 auto;
    width: 100%;
    padding: var(--container-padding);
}

.paragraph {
    margin: 0 0 50px 0;
}

.paragraph-title{
    font-size: 2em;
    margin: 26px 0 0 0;
    display: flex;

    font-family: "Teko", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.paragraph-title p { min-width: 40px; margin: 0; }

a {
    text-decoration: none;
    color: var(--clr-txt-secondary);
    font-size: 1.6em;
}

p a, li a {
    font-size: 1em;
    text-decoration: underline;
}

ul { padding-left: 1em; }