/* This is a comment in CSS
It is not computed, but used to add notes to the document */

/* This is an @import statement that calls a google fonts file on the internet */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,700;1,300&display=swap");
/* Remember the fonts are Lora for headings and Lato for body */

/* This is a reset the * tag refers to everything */
* {
  box-sizing: border-box;
}

/* The "styles" below reference tags in the html, or defined classes and IDs */
body {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  color: #0b0909;
  background-color: #fffafa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lora", serif;
}

/* style the a tags to remove the default color and underline*/
/*
a {
  text-decoration: none;
  color: #587da5;
}

/*add interaction with the psuedo class ":hover" */

/*
a:hover {
  text-decoration: underline;
}

*/

/* do it fancy with animation */
a {
  color: rgba(88, 125, 165, 1);
  text-decoration: underline 0.15em rgba(0, 0, 0, 0);
  transition: text-decoration-color 300ms;
}

a:hover {
  text-decoration-color: rgba(88, 125, 165, 1);
}

.date {
  font-family: "Lato", sans-serif;
  color: #8c8c8c;
  max-width: 20%;
  border-bottom: 1px solid #8c8c8c;
  padding-bottom: 0.6em;
  margin: 1em auto;
  margin-bottom: 1.2em;
}

.container {
  max-width: 760px;
  margin: 2em auto;
}

/* media query to resize content on smaller screens */

@media only screen and (max-width: 820px) {
  .container {
    max-width: 84%;
    margin: 2em auto;
  }
}

.article-heading {
  text-align: center;
}

.article-heading h1 {
  font-size: 2.6em;
  font-weight: 600;
}

.article-heading img {
  width: 100%;
  height: auto;
}

.caption {
  margin-top: 0.2em;
  text-align: right;
  color: #8c8c8c;
  font-size: 0.8em;
}

.byline {
  color: #44444c;
  font-style: italic;
  font-weight: 200;
  text-align: left;
  max-width: 20%;
  padding: 1em 0;
  border-bottom: 1px solid #44444c;
}

.article-content p {
  font-family: "Lato", sans-serif;
  font-size: 1.125em;
  line-height: 1.28;
}

p.pullout-quote {
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: 1.3em;
  color: #44444c;
  max-width: 60%;
  text-align: justify;
  float: right;
  margin-right: -1.8em;
  padding: 0em 1.2em;
}

@media only screen and (max-width: 820px) {
  p.pullout-quote {
    margin-right: -1.4em;
    text-align: left;
  }
}

.quote-cite {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  color: #8c8c8c;
  text-align: left;
}