@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 400;
  src: url("asset/font/DMSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: DM Sans;
  font-style: italic;
  font-weight: 400;
  src: url("asset/font/DMSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 500;
  src: url("asset/font/DMSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: DM Sans;
  font-style: italic;
  font-weight: 500;
  src: url("asset/font/DMSans-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 700;
  src: url("asset/font/DMSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: DM Sans;
  font-style: italic;
  font-weight: 700;
  src: url("asset/font/DMSans-BoldItalic.ttf") format("truetype");
}
body {
  margin: 0;
  font-family: DM Sans;
  background: #fff;
}

header {
  padding: 1em 2em;
  background: oklch(97% 0.04 290deg);
  border-bottom: 2px solid oklch(50% 0.2 290deg);
}
header > .wrapper {
  margin: 0 auto;
  max-width: 80em;
}

#page {
  margin: 2em 1em;
}
#page > .wrapper {
  margin: 0 auto;
  max-width: 50em;
}

h1 {
  margin-top: 2em;
  font-size: 25pt;
  text-decoration: underline;
  color: oklch(40% 0.2 290deg);
}

p.main {
  margin: 0 auto;
  margin-bottom: 3em;
  font-size: 1.5em;
}

b {
  color: oklch(50% 0.2 290deg);
}