core.css

@charset "UTF-8";

* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: inherit;
}

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 1em;
    color: hsl(0, 0%, 17%);
    font-family: "PT Serif", Palatino, Athelas, Georgia, serif;
    line-height: 1.6;
}

main {
	display: block;
    margin: 0 auto;
    padding-top: 4rem;
    max-width: 40em;
    background: #fff;
}

@media (max-width: 40em) {
    .overflow {
        max-width: 100%;
        overflow: auto;
    }
}

/* Text stuff */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
    font-family: "Lucida Grande", sans-serif;
}

h1 {
    font-size: 2.125rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.4em;
}

a {
    color: hsl(224, 66%, 56%);
    text-decoration: none;
}

a:focus,
a:hover {
    text-decoration: underline;
}

a img {
    border: 0;
}

code {
    display: inline;
    margin: 0 .3em;
    padding: .1rem .3rem;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: hsl(354, 66%, 56%);
    vertical-align: baseline;
    background: #efefef;
}

img,
video {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
}

/* Table shit */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Lucida Grande", sans-serif;
}

@media (min-width: 50em) {
    table {
        margin-right: -5em;
        width: calc(100% + 5em);
    }
}

@media (min-width: 60em) {
    table {
        margin-right: -10em;
        width: calc(100% + 10em);
    }
}

thead th {
    border-bottom: 2px solid hsl(0, 0%, 87%);
}

tbody th,
tbody td {
    border-top: 1px solid hsl(0, 0%, 87%);
}

tbody tr:nth-child(even) {
    background: hsl(0, 0%, 98%);
}

th,
td {
    padding: 0.5em 1em;
}

th {
    text-align: left;
}

/* Header */
body > header {
  /*display: flex;
  flex-flow: column;
  justify-content: space-between;*/

  position: relative;
  margin: -1em -1em 0;
  padding: 2rem 1em;
  /*min-height: 12.5em;*/
  overflow: hidden;
  color: hsl(0, 0%, 17%);
  font-family: "Lucida Grande", sans-serif;
  text-align: center;
  background:
    no-repeat
    fixed
    linear-gradient(
      to bottom right,
      hsl(44, 100%, 73%),
      hsl(37, 86%, 59%)
    );
  background-size: cover;
}

body > header p:first-child {
    margin: 0;
    font-size: 2em;
    font-weight: 700;
}

/* Footer */
body > footer {
    position: relative;
    margin: 5rem auto 0;
    padding-top: 1.6em;
    padding-bottom: 0.6em;
    max-width: 40em;
    font-family: "Lucida Grande", sans-serif;
}

body > footer::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: hsl(0, 0%, 30%);
    content: '';
}
body > footer::after {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.5em;
    height: 0.5em;
    border-radius: 2px;
    box-shadow: 0.8em -0.8em 0 0 #fff,
      0.8em -0.8em 0 2px hsl(0, 0%, 30%),
      -0.8em 0.8em 0 0 #fff,
      -0.8em 0.8em 0 2px hsl(0, 0%, 30%),
      0 0 0 2px hsl(0, 0%, 30%),
      0.8em -0.8em 0 10px #fff,
      -0.8em 0.8em 0 10px #fff,
      0 0 0 10px #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
    background: #fff;
    content: '';
}

body > footer img {
    height: 1em;
}

.question {
    font-style: italic;
}