@import “_breakpoints”; @import “_mixins”;

$font: “Space Grotesk”; $mono-font: “Space Mono”; $scalefactor: 1.414;

$scarlet: rgb(252, 47, 0); $purple: rgb(194, 0, 251); $yellow-green: rgb(162, 215, 41); $black-coffee: rgb(52, 46, 55); $black-coral: rgb(89, 101, 111); $emerald: rgb(89, 205, 144); $cerulean-crayola: rgb(63, 167, 214); $pink: rgb(228, 0, 102); $accent: $emerald;

.scarlet {

color: $scarlet;

}

.purple {

color: $purple;

}

.yellow-green {

color: $yellow-green;

}

.black-coffee {

color: $black-coffee;

}

.black-coral {

color: $black-coral;

}

.emerald {

color: $emerald;

}

.cerulean-crayola {

color: $cerulean-crayola;

}

.pink {

color: $pink;

}

@function pow($number, $exponent) {

$value: 1;

@if $exponent > 0 {
    @for $i from 1 through $exponent {
        $value: $value * $number;
    }
}

@return $value;

}

}

body {

font-family: $font;
margin: 0;
width: 100%;

}

.container {

margin: 2em auto 2em auto;
padding: 0 2em 0 2em;
max-width: 760px;
@include sm {
    margin: 2em auto 2em auto;
    padding: 0 2em 0 2em;
}
@include xl {
    margin: 8em auto 8em auto;
}

}

small, footer, figcaption, p.small, cite, .meta, .kicker {

font-size: 0.8 em;
line-height: 1.3;
color: $black-coral;

}

p, nav {

font-size: 1em;
line-height: 1.6;
color: $black-coffee;
margin-top: 40px;
margin-bottom: 40px;

}

.logo {

width: 50px;

}

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

font-family: $font;
// line-height: 1.5em;

}

a {

text-decoration: none;
color: $emerald;
padding-bottom: 0.001em;
border-bottom: 1px solid lightgray;

}

a:hover {

color: darken($emerald, 20%);
border-bottom: 1px solid darken($emerald, 20%);

}

h1 {

font-size: 1em * pow($scalefactor, 3);
line-height: 1.4;
margin-top: 80px;
margin-bottom: 40px;
font-family: $font;

}

h1.title {

a {
    border: none;
    color: black;
}

}

h2 {

color: $emerald;
font-size: 1em * pow($scalefactor, 2);
margin-top: 60px;
margin-bottom: 40px;

}

h2.subtitle {

font-size: 1em * pow($scalefactor, 2);
margin-top: -30px;
font-weight: 300;

}

h3 {

font-size: 1em * pow($scalefactor, 1);
margin-top: 40px;
margin-bottom: 20px;

}

h4 {

font-size: 1em * pow($scalefactor, 1);
line-height: 140%;

} h5 {

font-size: 1em * pow($scalefactor, 1);
letter-spacing: 1px;
text-transform: uppercase;

} h6 {

font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;

}

ul, li, ol, dl {

line-height: 200%;
font-size: 1em;

}

img, audio, video, figure {

width: 100%;
margin-left: 0;

}

iframe {

width: 100%;

}

nav {

margin-top: 40px;
margin-bottom: 40px;

a {
    color: black;
    margin-right: 30px;
    line-height: 40px;
    text-decoration: none !important;
    border-bottom: none;
    padding-bottom: 0.3em;
}
a:hover {
    text-decoration: none !important;
    padding-bottom: 0.3em;
}
a.active {
    text-decoration: none;
    color: $emerald;
    padding-bottom: 0.3em;
    border-bottom: 1px solid $emerald;
}

}

.center {

text-align: center;
align-content: center;
justify-content: center;

}

.fixed {

position: fixed;

}

.filler {

background-color: white;
width: 100%;
height: 100%;

}

table {

text-align: left;
font-size: 1em;

caption {
    text-align: left;
}

}

li {

list-style-type: "■";
padding-inline-start: 1ch;

}

blockquote {

font-family: $font;
color: black;
font-size: 1em * pow($scalefactor, 1);
// font-style: italic;
line-height: 140%;
margin-top: 40px;
margin-bottom: 40px;
p {
    color: inherit;
    font-style: italic;
}

}

mono, pre, samp, code, kbd {

font-family: $mono-font;
font-size: inherit;
font-weight: 400;

}

pre {

font-size: 1em;

}

cite {

font-family: $font;
font-style: normal;

}

hr {

height: 1px;
border-width: 0;
background-color: lightgray;

}

footer {

margin-top: 80px;
margin-bottom: 160px;
color: grey;

p {
    color: inherit;
    font-size: inherit;
}

}

figcaption {

font-family: $font;
margin-top: 10px;
color: grey;
text-align: center;

}

.meta {

margin-top: -20px;
margin-bottom: 40px;
p {
    color: grey;
}

}

.post {

margin-bottom: 80px;

}

.kicker {

color: grey;
margin-top: 80px;
margin-bottom: -70px;
text-transform: none;
letter-spacing: 2;
font-weight: 400;
text-transform: uppercase;

}

strong, b {

font-weight: 700;
color: black;

}

.gallery-col3 {

column-count: 3;
column-gap: 1em;

}

.gallery-col2 {

column-count: 2;
column-gap: 1em;

} .gallery-item {

display: inline-block;
margin: 0 0 1em;
width: 100%;

}