@charset "UTF-8";
/* Reset margin, padding, and box sizing of everything */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font: 300 11px/1.5 "NotoSansRegular", sans-serif;
  background: #fff;
  color: #121212;
}

body {
  font-size: 1.6rem;
}

header, main, footer {
  padding: 2rem;
}

header {
  background: rgba(86, 61, 123, 0.2);
  display: flex;
  align-content: center;
}
header h1 {
  flex: 1 0 auto;
  margin: 0;
}
header a {
  flex: 0 0 12rem;
  white-space: nowrap;
}

main {
  margin: 2rem auto;
}

main > * + * {
  margin: 3rem 0;
}

footer {
  font-size: 1.3rem;
  text-align: right;
}

a {
  color: #563d7b;
}

a:visited {
  color: #4b626d;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 2rem 0;
  font-family: "NotoSerifBold", serif;
}
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-family: "NotoSerifBoldItalic", serif;
}
h1 b, h1 strong, h2 b, h2 strong, h3 b, h3 strong, h4 b, h4 strong, h5 b, h5 strong, h6 b, h6 strong {
  font-family: inherit;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 3.2rem;
}

h3 {
  font-size: 2.56rem;
}

h4 {
  font-size: 2.24rem;
}

h5 {
  font-size: 1.92rem;
}

h6 {
  font-size: 1.76rem;
}

/*
Did you know? You can use unicode with the list-style and list-style-type
properties, although not every browser supports this.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
*/
ul {
  list-style: square;
  list-style: "✦";
  padding-left: 2rem;
}

li {
  margin: 1rem 0;
  padding-left: 1rem;
}

i, em {
  font-family: "NotoSansItalic", sans-serif;
}

b, strong {
  font-family: "NotoSansBold", sans-serif;
}

code {
  background: #f2f2f2;
  padding: 0.1ch;
}

.demo__controls {
  background: #f2f2f2;
  padding: 2rem;
  border-radius: 0.33rem;
}
.demo__controls label {
  font-family: monospace;
  white-space: pre;
}

button {
  background: #7959a6;
  border: 0px;
  border-radius: 0.3rem;
  color: #fff;
  font: inherit;
  padding: 0.5rem 2rem;
}

.two__panels {
  display: flex;
}
.two__panels > *:first-child {
  margin-right: 3rem;
}

.swatch__tiny {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.demo__wrapper p {
  margin: 3rem 0;
}

[id=change-box-sizing] > div {
  display: flex;
}

.note {
  font-size: 1.2rem;
  line-height: 1.2;
}

.mono {
  font-family: monospace;
}

input,
select {
  font: inherit;
}

.flex {
  display: flex;
  align-items: center;
}