* {
  font-family: Ubuntu;
}

body {
  background: linear-gradient(to bottom right, var(--body-bg-color-1), var(--body-bg-color-2));
  }

h1 {
  font-size: var(--font-size-h1);
  color: #fff;
}

h1.large {
  font-size: var(--font-size-h1-large);
}

h2 {
  font-size: var(--font-size-h2);
  padding-bottom: var(--content-y-padding);
  padding-top: var(--content-y-padding);

}


p {
  line-height: var(--line-height);
  padding-bottom: calc(var(--content-y-padding) / 2);
  padding-top: calc(var(--content-y-padding) / 2);
}

strong {
  font-weight: bold;
}

code {
  font-family: monospace;
  font-weight: bold;
}
pre > code {
  font-weight: normal;
  background-color: #333;
  color: #fff;
  display: block;
  padding: var(--content-y-padding) var(--content-x-padding);
  border-radius: var(--border-radius-large);
  overflow: scroll;
}

time {
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
}

input[type="submit"] {
  display: inline-block;
  border: none;
  outline: none;
  background-color: var(--color-1);
  color: #fff;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
}

input[type="text"], input[type="password"] {
  background-color: var(--content-bg-color);
  display: inline-block;
  outline: none;
  border: 2px solid silver;
  padding: var(--input-padding);
  border-radius: var(--border-radius);
}

label {
  font-weight: bold;
  display: inline-block;
  width: 6em;

}

aside {
  display: block;
  padding: var(--content-y-padding) var(--content-x-padding);
  border-radius: var(--border-radius-large);
  margin-bottom: calc(var(--content-y-padding) / 2);
  margin-top: calc(var(--content-y-padding) / 2);
}

aside.warning {
  font-weight: bold;
  color: #fff;
  background-color: red;
}

aside.hint {
  background-color: yellow;
}




.bg-color-0 { background-color: var(--color-0); }
.bg-color-1 { background-color: var(--color-1); }
.bg-color-2 { background-color: var(--color-2); }
.bg-color-3 { background-color: var(--color-3); }
.bg-color-4 { background-color: var(--color-4); }
.bg-color-5 { background-color: var(--color-5); }
.bg-color-6 { background-color: var(--color-6); }
.bg-color-7 { background-color: var(--color-7); }

.color-0 { color: var(--color-0); }
.color-1 { color: var(--color-1); }
.color-2 { color: var(--color-2); }
.color-3 { color: var(--color-3); }
.color-4 { color: var(--color-4); }
.color-5 { color: var(--color-5); }
.color-6 { color: var(--color-6); }
.color-7 { color: var(--color-7); }

.right { text-align: right; }