/* Base */

html, body {

box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Open Sans', sans-serif;

}

*, *:before, *:after {

box-sizing: inherit;

}

p {

line-height: 1.6em;

}

li {

line-height: 2em;

}

img {

max-width: 100%;

}

.hidden{

display: none;

}

a {

border-bottom: 3px solid lighten($medium-gray, 20);
color: darken($teal, 30);
text-decoration: none;
transition: all 0.5s;

&:hover {
  border-color: $dark-gray;
}

}

iframe {

border: 1px solid $medium-gray;
margin-bottom: 1em;

}

blockquote {

margin-bottom: 1em;
padding-left: 1em;
border-left: 5px solid lighten($medium-gray, 20);
p {
  font-size: 16px;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 0.5em;
}
footer {
  border: none;
  margin-top: 0;
  padding-top: 0;
  text-align: right;
  font-size: 1.5em;
  font-style: italic;
  &::before {
    content: '— ';
  }
}

}

footer {

border-top: 1px dashed lighten($medium-gray, 10);
margin-top: 5em;
padding-top: 2em;

}

/* Layout */

.container {

display: flex;

min-height: 100vh;
@media (max-width: $tablet-width) {
  flex-direction: column;
}

}

/* Header */

header {

margin-bottom: 2em;

& > h1 {
  font-weight: 400;
  line-height: 1.2em;

  & > small {
    display: block;
    font-weight: 300;
  }
}

}

// .content { // width: 80%; // }

@media (max-width: $tablet-width) {

.content: 100%;

}

.underline {

text-decoration: underline;

}