@charset “UTF-8”;

body {

border-top: 1px solid $primary;
font-family: $font-family-base; 
font-size: $p-font-size;
color: $body-color;
background-color: $body-bg;

}

h1 {

font-family: $font-family-header, serif;
font-size: $h1-font-size;
font-weight: $headings-font-weight; 
line-height: 1.2;
margin-top: 7.4rem;
margin-bottom: 2rem;

}

h2 {

font-family: $font-family-header, serif;
font-size: $h2-font-size;
font-weight: $headings-font-weight; 
line-height: 1.2;
margin-top: 2.8rem;
margin-bottom: 1rem;

}

h3 {

font-family: $font-family-header, serif;
font-style: italic;
font-size: $h3-font-size;
font-weight: $headings-font-weight; 
line-height: 1.2;
margin-top: 2.8rem;
margin-bottom: 1rem;

}

p {

    font-family: $font-family-base, serif;
    font-size: $p-font-size;
    font-weight: $font-weight-normal; 
    line-height: 1.5;
    margin-bottom: 1.4rem;

    &.subtitle {
font-family: $font-family-header, serif;
            font-size: $subtitle-font-size;
            font-weight: $headings-font-weight; 
font-style: italic;
line-height: 1.2;
margin-top: -1.2rem;
margin-bottom: 2.8rem;
    }

}

.numeral {

font-family: $font-family-numeral;

}

::selection {

background: $selection-color;

}

a {

&::selection {
        color: $black;
}

}

blockquote {

margin-top: 2.8rem;
margin-bottom: 2.8rem;
// margin-left: 1.4rem;
padding-left: 1.4rem;
border-left: 1px solid $grey;

p {
        font-style: italic
}

footer {
        font-style: normal;
        text-align: right;

        cite: {
                font-style: italic;
        }
}

}

code {

font-family: $font-family-monospace;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.4;
color: $black;
background-color: $secondary;

}

pre {

margin-top: 2.8rem;
      margin-bottom: 2.8rem;
      padding-left: 1.4rem;
border-left: 1px solid $grey;
line-height: 1.4;

code {
  font-size: 1rem;
}

}

ol, ul {

font-family: $font-family-base, serif;
font-size: $p-font-size;
font-weight: $font-weight-normal; 
line-height: 1.5;
margin-bottom: 1.4rem;

li {
        &:not(:first-child) { 
                margin-top: 0.7rem;
        }
}

}

figure {

padding: 0;
border: 0;
margin-top: 2.8rem;
margin-bottom: 2.8rem;
text-align: center;

img {
        max-width: 100%;
}

figcaption {
        margin-top: 1.4rem;
        font-size: 1.1rem;
        line-height: 1.4;
        color: $grey;
}

}

@mixin underline($background-color, $underline-color) {

background: -webkit-linear-gradient($background-color, $background-color), 
                                                -webkit-linear-gradient($background-color, $background-color), 
                                                -webkit-linear-gradient($underline-color, $underline-color);
background: linear-gradient($background-color, $background-color), 
                                                linear-gradient($background-color, $background-color), 
                                                linear-gradient($underline-color, $underline-color);
-webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03rem 0 $background-color, 
                                                        -0.03rem 0 $background-color, 
                                                        0 0.03rem $background-color, 
                                                        0 -0.03rem $background-color, 
                                                        0.06rem 0 $background-color, 
                                                        -0.06rem 0 $background-color, 
                                                        0.09rem 0 $background-color, 
                                                        -0.09rem 0 $background-color, 
                                                        0.12rem 0 $background-color, 
                                                        -0.12rem 0 $background-color, 
                                                        0.15rem 0 $background-color, 
                                                        -0.15rem 0 $background-color;
background-position: 0% 93%, 100% 93%, 0% 93%;
line-height: 1.5rem;

&::selection {
        text-shadow: 0.03rem 0 $selection-color, 
                                                         -0.03rem 0 $selection-color, 
                                                         0 0.03rem $selection-color, 
                                                         0 -0.03rem $selection-color, 
                                                         0.06rem 0 $selection-color, 
                                                         -0.06rem 0 $selection-color, 
                                                         0.09rem 0 $selection-color, 
                                                         -0.09rem 0 $selection-color, 
                                                         0.12rem 0 $selection-color, 
                                                         -0.12rem 0 $selection-color, 
                                                         0.15rem 0 $selection-color, 
                                                         -0.15rem 0 $selection-color;
        background: $selection-color;
}

}

@mixin reset-underline {

background: none;
text-shadow: none;

}

.underline {

@include underline($secondary, $black);

}

.reset-underline {

@include reset-underline();

}

a {

&:link {
        color: $link-color;
        text-decoration: $link-decoration;
}

&:visited {
        color: $link-color;
}

&:hover {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;                
}

}

p {

a {
        @include underline($secondary, $black);
}

}

@mixin header-link {

&:link {
        color: $black;
        text-decoration: none;
}

&:hover {
        color: $primary;
        text-decoration: none;          
}

}

.header-link {

@include header-link();

}

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

a {
        @include header-link();
}

}

.color-primary {

color: $primary;

}

.color-secondary {

color: $secondary;

}

.color-grey {

color: $grey;

}

.color-black {

color: $black;

}

.color-white {

color: $white;

}

.bullet {

&:before {
        content:"•\0000a0\0000a0";
}

}