/* HEADINGS */ /———-/

h1, h2, h3, h4, h5, h6 {

font-family: $font-serif;
font-weight: 400;
line-height: 1.4em;
margin: 25px 0 12.5px;

}

h1 {

font-size: 32px;

@media(min-width: 768px){
  font-size: 45px;
}

}

h2 {

font-family: $font-serif;
font-size: 28px;

}

h3 {

font-size: 24px;

}

h4 {

font-size: 20px;
font-weight: bold;

}

h5 {

font-size: 18px;
font-weight: bold;

}

h6 {

font-size: 16px;
font-weight: bold;

}

/* MEDIAS */ /——–/

img, video {

max-width: 100%;

}

/* LISTS */ /——-/

dl {

line-height: 25px;
margin: 25px 0 12.5px;

dt {
  border-bottom: 1px dashed $color-grey;
  display: inline-block;
}

dd {
  margin: 0 0 0 20px;
}

}

ol, ul {

line-height: 25px;
margin: 25px 0 12.5px;
padding: 0 0 0 20px;

ol,
ul {
  margin-top: 0;
}

li {
  margin: 12.5px 0;
}

}

ul {

list-style-type: circle;

}

/* TABLES */ /——–/

table {

border-collapse: collapse;
display: block;
margin: 25px 0 12.5px;
overflow-x: auto;
width: 100%;

@media(min-width: 768px) {
  display: table;
  overflow-x: visible;
}

}

th {

background: $color-grey-70;
text-align: left;

}

th, td {

border: 1px solid $color-grey;
min-width: 80px;
padding: 10px;

}

/* PREFORMATED TEXT */ /——————/

pre {

background: $color-grey-70;
padding: 20px;
margin: 25px 0 12.5px;
overflow-x: auto;
white-space: pre-wrap;

}

code {

background: $color-grey-70;
line-height: 1.4em;
padding: 2px 5px;

}

/* BLOCKQUOTES */ /————-/

blockquote {

border-left: 2px solid $color-grey-30;
color: $color-grey-30;
font-family: $font-serif;
font-size: 20px;
font-style: italic;
line-height: 1.4em;
margin: 25px 25px 12.5px 0;
padding: 0 0 0 25px;

}

/* TEXT-LEVEL SEMANTICS */ /———————-/

a {

border-bottom: 1px solid $color-grey-30;
color: inherit;
text-decoration: none;

&:hover {
  border-bottom: 0;
}

&:focus {
  border-bottom: 0;
  outline-color: $color-grey-30;
}

}

cite {

font-style: italic;

}

dfn {

font-style: italic;

&[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted;
}

}

kbd {

border: 1px solid $color-grey-30;
padding: 2px 5px;

}

mark {

color: $color-grey;
padding: 2px 5px;

}

p {

line-height: 25px;
margin: 25px 0 12.5px;

}

samp {

background: $color-grey-70;
padding: 2px 5px;

}

/* FORMS */ /——-/

button, input, input, input {

background: $color-grey-30;
border: 1px solid $color-grey-30;
box-sizing: border-box;
color: $color-white;
display: block;
margin: 5px 0 15px;
padding: 10px;
width: 100%;

&:hover {
  background: $color-white;
  color: $color-grey-30;
  cursor: pointer;
}

}

fieldset {

border: 1px solid $color-grey-30;
margin: 25px 0 12.5px;
padding: 10px;

}

form {

margin: 25px 0 12.5px;

}

input {

background: $color-grey-70;
border: 1px solid $color-grey-30;
box-sizing: border-box;
color: $color-grey;
display: block;
margin: 5px 0 15px;
padding: 10px;
width: 100%;

&[type=color] {
  padding: 0;
}

}

label {

display: block;

}

legend {

padding: 0 10px;

}

select {

background: $color-grey-70;
box-sizing: border-box;
display: block;
margin: 5px 0 15px;
width: 100%;

}

textarea {

background: $color-grey-70;
border: 1px solid $color-grey-30;
box-sizing: border-box;
color: $color-grey;
display: block;
margin: 5px 0 15px;
padding: 10px;
width: 100%;

}

button:focus, input:focus, select:focus, textarea:focus {

background: $color-white;
color: $color-grey-30;
outline-color: $color-grey-30;

}

/* EMBED */ /——-/

iframe {

max-width: 100%;

}

/* OTHER */ /——-/ hr {

border-top: 1px solid $color-grey-70;
margin: 50px 0;

}