@font-face{
  font-family:'M PLUS Rounded 1c';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("mplusrounded-700.woff2") format("woff2");
}
@font-face{
  font-family:'M PLUS Rounded 1c';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("mplusrounded-900.woff2") format("woff2");
}
@font-face{
  font-family:'Fredoka';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fredoka.woff2") format("woff2");
}

:root{
  --ink:#3B2A22;
  --ink-body:#4A3F5C;
  --cream:#FFFBF4;
  --teal:#1E7F92;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:32px 20px 64px;
  background:var(--cream);
  color:var(--ink-body);
  font-family:'M PLUS Rounded 1c', system-ui, sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.75;
}

main{
  max-width:720px;
  margin:0 auto;
  background:#FFFFFF;
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:0 6px 0 rgba(59,42,34,.18);
  padding:28px 30px 24px;
}

h1{
  font-family:'Fredoka', 'M PLUS Rounded 1c', sans-serif;
  font-weight:700;
  font-size:34px;
  letter-spacing:.02em;
  color:var(--ink);
  margin:0;
}

.lede{
  margin:2px 0 26px;
  font-size:13px;
  color:#8A7BA6;
}

h2{
  font-family:'M PLUS Rounded 1c', sans-serif;
  font-weight:900;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8A7BA6;
  margin:26px 0 6px;
}

p{ margin:0 0 12px; }

ul{
  margin:0 0 12px;
  padding-left:20px;
}

li{ margin-bottom:6px; }

strong{ font-weight:900; color:#3E3350; }

code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px;
  background:#F5EFE6;
  border-radius:6px;
  padding:1px 5px;
}

a{
  color:var(--teal);
  text-decoration:underline;
  text-underline-offset:2px;
}

a:hover{ color:#155F6E; }

.mail{
  font-weight:900;
  font-size:17px;
  overflow-wrap:break-word;
}

.foot{
  margin:28px 0 0;
  padding-top:16px;
  border-top:2px solid #EFE7DC;
  font-size:13px;
  color:#8A7BA6;
}

@media (max-width:520px){
  body{ padding:16px 12px 48px; }
  main{ padding:20px 18px 18px; border-radius:18px; }
  h1{ font-size:28px; }
}