@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Asap:400,400i,700,700i|Roboto:400,400i,700,700i&display=swap');

body {
  font-family: "Asap";
  color: #1f1f1f;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display";
  letter-spacing: 2px;
  line-height: 2rem; /* increases, so wrapping headers don't overlap */ 
  
}

d-title {
  padding-top: 13rem; /*so that navbar doesn't overlap fixed title */
}



/* --------------Navbar-------------------- */


/* background-image for fade-to-white color of navbar */
.distill-site-header{ 
  padding: 40px 0px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255,255,255,0.5));   
  background-color: transparent;
  font-size: 15px;
  font-family: "Playfair Display";
  letter-spacing: 2px;
  text-transform: uppercase;
}

.distill-site-header .logo img{
  max-height: 40px; /* Makes logo bigger, default was 20px */
}

/* dropdown navbar color on mobile */

@media screen and (max-width: 768px){
  .distill-site-header.responsive {
      background: rgba(255,255,255,0.99);
  }
}


/* Navbar Links with Animated Hover */ 


.distill-site-header a { /* A normal link in navbar */
  color: #1f1f1f;
  display: inline-block; /* This line and line below is so pseudo-element will work later */
  position: relative; 
  text-decoration: none;
  padding-left: 0px; /* overrides default so animation looks Ok */
  padding-right: 0px; /* overrides default so animation looks Ok */
  margin: 10px 14px; /* replaces default padding values for margin values */
}


.distill-site-header a:hover { /* (unanimated) hover behavior for navbar links */
  color: #787878;
  padding-left: 0px; /* overrides default so animation looks Ok */
  padding-right: 0px; /* overrides default so animation looks Ok */
  margin: 10px 14px; /* replaces default padding values for margin values */
}

.distill-site-header a:before { /*Creates pseudoelement line under link */
  background-color: #787878;
  content: '';
  height: 1px; 
  position: absolute;
  bottom: -1px;
  transition: width 0.3s ease-in-out; /* animate the width */
  width: 100%;
}

.distill-site-header a:hover:before {
  width: 0; /* Shrinks width of pseudoelement to 0 when hovered */
}

/* Makes sure animation does NOT apply to Title or Logo links (or toggle on mobile) */

.distill-site-header a.title:before, .distill-site-nav a.logo:before, a.nav-toggle:before {
  display: none;
}

.distill-site-header a.title, .distill-site-nav a.logo {
  padding: 10px 0px;
  margin: 10px 14px;
}


/* No navbar links on mobile except title and nav-toggle */

@media screen and (max-width: 768px) {
  .distill-site-header a, .distill-site-header .nav-dropdown {
    display: none;
  }
  
  .distill-site-header a.title, .distill-site-header a.nav-toggle {
    display: inline-block;
    padding: 10px 0px;
    margin: 10px 14px; 
  }
}

/* -------------Appendix---------------- */

d-appendix {
  background-color: #f7f7f7;
  border-top: none !important;
}

/* -------------Footer------------------*/

.distill-site-footer {
  color: #f7f7f7b0;
  background-color: #1f1f1f;
  margin-top: 0px;
  padding: 50px 20px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 12px;
  
}