html {

box-sizing: border-box;
font-size: 62.5%;

}

*, *::before, *::after {

box-sizing: inherit;

}

html, body, p, ul, ol, dl, blockquote, pre, figure, table, iframe, audio, video, embed, h1, h2, h3, h4, h5, h6 {

margin: 0;
padding: 0;

}

body {

background-color: $color-background;
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $color-text;
margin-top: 64px;

}

img {

max-width: 100%;

}

/*

Text Elements

*/

p, ul, ol, dl, blockquote, pre, figure, table, iframe, h1, h2, h3, h4, h5, h6 {

&:not(:last-child) {
  margin-bottom: $spacing-unit;
}

}

strong, b, th {

font-weight: bold;

}

em, i, blockquote {

font-style: italic;

}

// Lists ul, ol {

margin-left: $spacing-unit;

ul, ol {
  margin-bottom: 0;
}

}

ul {

list-style: square;

ul {
  list-style: disc;
}

}

ol {

list-style: decimal;

ol {
  list-style: lower-alpha;
}

}

// Headings h2 {

text-align: center;

}

// Tables

table {

width: 100%;
@include relative-font-size(0.875);
overflow-x: auto;

@include media-query($on-palm) {
  display: block;
}

th,
td {
  text-align: right;
  padding: $spacing-unit / 4;

  &:first-child {
    text-align: left;

    @include media-query($on-palm) {
      min-width: 180px;
    }
  }
}

th {
  border-bottom: 1px solid $color-details;
}

}

// Links a {

color: $color-accent;
transition: color 250ms ease;
font-weight: 500;
text-decoration: none;

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

}

// Horizontal rule

hr {

border: none;
display: block;
content: " ";
width: 50px;
height: 4px;
border-radius: 2px;
background-color: $color-details;
margin: $spacing-unit * 2 auto;

}

/*

Forms

*/

input, input, textarea {

font: inherit;
color: inherit;
background: $color-background;
border: 2px solid $color-details;
border-radius: 6px;
padding: $spacing-unit / 4;
transition: border-color 250ms ease;
display: block;
width: 100%;
max-width: $on-palm;

&:focus,
&:active {
  border-color: $color-accent;
  outline: none;
}

}

textarea {

min-height: 150px;
resize: none;

}

label {

font-weight: 700;
@include relative-font-size(0.875);

}

button {

-webkit-appearance: none;
appearance: none;
padding: $spacing-unit / 4 $spacing-unit / 2;
background-color: $color-background;
color: $color-text;
border: 2px solid $color-details;
border-radius: 6px;
font: inherit;
font-weight: 700;
transition-property: background-color, border-color, color;
transition-timing-function: ease;
transition-duration: 250ms;
cursor: pointer;

@include media-query($on-palm) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

&:hover,
&:focus {
  background-color: $color-accent;
  border-color: $color-accent;
  color: $color-background;
}

}