/*@font-face {
  font-family: "the picnic club light";
  src: url("The-Picnic-Club-Light.otf") format("opentype");
}
*/

@font-face {
  font-family: "the picnic club";
  src: url("the-picnic-club-regular.woff2") format("woff2");
}

@font-face {
  font-family: "graphik";
  src: url("Graphik-Regular-Web.woff2") format("woff2");
}

@font-face {
  font-family: "graphik semibold";
  src: url("Graphik-Semibold-Web.woff2") format("woff2");
}


:root {
  --color-border: #211e1e;
  --color-brand: #97270D;
  --color-surface: #F8F3F3;
  --color-surface-secondary: #c7c4c3;
  --color-text: #211e1e;
  --color-text-secondary: #c7c4c3;
  --color-text-inverse: #fff;

  --spacing-100: 0.25rem;
  --spacing-200: 0.5rem;  
  --spacing-300: 0.75rem;  
  --spacing-400: 1rem;  
  --spacing-500: 1.5rem;  
  --spacing-600: 2rem;  
  --spacing-700: 2.5rem;  
  --spacing-800: 3.5rem;  
  --spacing-900: 4rem;  

  --text-size-s: .875rem;  
  --text-size-m: 1rem;  
  --text-size-l: 1.5rem;  
  --text-size-xl: 2rem;  
}


html {
  background: var(--color-surface);
}

body {
  alignment-baseline: baseline;
  background: linear-gradient(0deg, rgba(248, 243, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
  font-family: "graphik", sans-serif;
  font-size: var(--text-size-m);
  height: 100%;
  margin: 0;
  padding: 0;
}

a {
  background: #fff; 
  border-bottom: 1px dotted var(--color-brand);  
  color: var(--color-brand);
  text-decoration: none;
}

a:active {
  background: #fff;
}

a:focus {
  outline: 4px solid var(--color-brand);
}

a:hover {
  background: none; 
  color: var(--color-text);
  border-bottom: 1px dotted var(--color-border);
  transition: color .4s ease;
}

h1, h2, h3, h4, h5 {
  color: var(--color-brand);
  font-family: "the picnic club light", serif;
}

h1 {
  font-size: 4rem;
  letter-spacing: 1.5px;
  line-height: 1.1;
  margin: 0 0 var(--spacing-500) 0;
}

strong {
  font-family: "graphik semibold", sans-serif;
}

main {
  margin: 0 auto;
  max-width: 60rem;
  padding: var(--spacing-900) var(--spacing-700) 0 var(--spacing-700);
}

footer {
  font-size: var(--text-size-s);
  margin: var(--spacing-600) auto;
  max-width: 60rem;
  text-align: right;
}

#content {
  border-bottom: 1px solid var(--color-border);
  margin-bottom:  var(--spacing-400);
  padding: 0 0 var(--spacing-700) 0;
}

.summary {
  font-size: var(--text-size-xl);
  letter-spacing: -.5px;
  line-height: 1.5;
  margin: 0 0 var(--spacing-300) 0;
}

.bullet {
  color: var(--color-text-secondary) !important;
}

.inline-title {
  color: var(--color-brand);
  font-family: "the picnic club", serif;  
  font-size: 2.125rem;
  letter-spacing: .25px;
}

.avatar {
  border-radius: 999rem;
}


@media only screen and (max-width: 600px) {
  .summary {
    font-size: var(--text-size-l);
    letter-spacing: -.5px;
    line-height: 1.5;
    margin: 0 0 var(--spacing-300) 0;
  }
  .inline-title {
    font-size: 1.625rem;
  }
  .avatar {
    height: 20px;
    width: 20px;
  }
}


}