@font-face {
  font-family: 'Ubuntu';
  src: url("/fonts/Ubuntu-Regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url("/fonts/Ubuntu-Bold.woff") format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-size: 18px;
  --line-height: 1.8em;
  --font-size-h1: 1.6em;
  --font-size-h1-large: 3.2em;
  --font-size-h2: 1.6em;
  --font-color: #333;
  --logo-width: 250px;
  --content-bg-color: #fefefe;
  --content-x-padding: 1.6em;
  --content-x-padding-wide: 12em;
  --content-y-padding: 0.8em;
  --content-bottom-padding: 3.2em;
  --border-radius: 0.25em;
  --border-radius-large: 0.5em;
  --header-bg-color-1: #111;
  --header-bg-color-2: #222;
  --body-bg-color-1: #d8e3ea;
  --body-bg-color-2: #d7e2e9;
  --body-bottom-padding: 8em;
  --common-width: 1400px;
  --common-space: 3em;
  --article-bg-color: #fefefe;
  --article-header-height: 10em;
  --button-padding-y: 0.5em;
  --button-padding-x: 4em;
  --button-radius: 0.25em;
  --input-padding: 0.5em;

  --color-0: #03a9f4;
  --color-1: #c603f4;
  --color-2: #f44e03;
  --color-3: #30f403;
  --color-4: #0349f4;
  --color-5: #f403c2;
  --color-6: #f4ae03;
  --color-7: #61d347;
}

@media (max-width: 1400px) {
  :root {
    --common-width: 1000px;
    --content-x-padding-wide: 4em;
  }
}

@media (max-width: 1000px) {
  :root {
    --common-width: 100%;
    --content-x-padding-wide: 1.6em;
    --content-x-padding: 1.6em;
  }
}

@media (max-width: 800px) {
  :root {
    --logo-width: 90px;
    --common-space: 2em;
    --font-size-h1-large: 1.6em;
    --content-x-padding-wide: 0.8em;
    --content-x-padding: 0.8em;
    --border-radius: 0;
  }

  header > a > img {
    position: absolute;
    top: 5px;
    right: -15px;
  }

  main-wrapper main {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Reset & base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}

body {
  font-size: var(--font-size);
  color: var(--font-color);
  background: linear-gradient(to bottom right, var(--body-bg-color-1), var(--body-bg-color-2));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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;
}

a {
  color: var(--color-0);
}

/* Header */
header-wrapper {
  display: block;
  background: linear-gradient(to bottom right, var(--header-bg-color-1), var(--header-bg-color-2));
  padding-top: calc(var(--common-space) / 2);
  padding-bottom: calc(var(--common-space) / 2);
}

header {
  width: var(--common-width);
  margin: 0 auto;
  display: flex;
  align-items: end;
  padding-left: calc(var(--common-space) / 2);
  padding-right: calc(var(--common-space) / 2);
}

header > a {
  display: inline-block;
}

header > a > img {
  width: var(--logo-width);
  margin-right: var(--common-space);
}

nav a {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
}

nav-main {
  display: flex;
  flex-wrap: wrap;
}

nav-main a {
  font-size: 1.2em;
  margin-right: calc(var(--common-space) / 2);
}

/* Main */
main-wrapper {
  display: block;
  padding-bottom: var(--common-space);
  min-height: 80%;
  flex: 1;
}

main {
  width: var(--common-width);
  padding-top: var(--common-space);
  margin: 0 auto;
  padding-right: calc(var(--common-space) / 2);
  padding-left: calc(var(--common-space) / 2);
}

/* Article */
article {
  background-color: var(--article-bg-color);
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

article-header {
  display: block;
  padding: var(--content-y-padding) var(--content-x-padding);
  min-height: var(--article-header-height);
  display: flex;
  align-items: end;
}

article-body {
  display: block;
  padding: var(--content-y-padding) var(--content-x-padding-wide);
  padding-bottom: var(--content-bottom-padding);
}

article-body a {
  color: var(--color-0);
}

/* Footer */
footer-wrapper {
  display: block;
  background: linear-gradient(to bottom right, var(--header-bg-color-1), var(--header-bg-color-2));
  padding-top: calc(var(--common-space) / 2);
  padding-bottom: calc(var(--common-space) * 2);
}

footer {
  display: flex;
  justify-content: flex-end;
  width: var(--common-width);
  margin: 0 auto;
  padding-left: calc(var(--common-space) / 2);
  padding-right: calc(var(--common-space) / 2);
}

nav-footer {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
}

nav-footer a {
  font-size: 0.8em;
  text-decoration: underline;
  margin-right: calc(var(--common-space) / 2);
}

/* Color classes */
.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); }

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;
}