/* typography.css */

/* LOGO FONT */

.ethno {
font-family: "ethnocentric", sans-serif;
font-weight: 400;
font-style: normal;
}
.ethno-b {
font-family: "ethnocentric", sans-serif;
font-weight: 700;
font-style: normal;
}
.ethno-i {
font-family: "ethnocentric", sans-serif;
font-weight: 400;
font-style: italic;
}
.ethno-bi {
font-family: "ethnocentric", sans-serif;
font-weight: 700;
font-style: italic;
}

* root {
font-family:'Raleway', sans-serif;
}

* {
/*  ff font family */
--ff-main: 'Raleway', sans-serif;

--ff-alt-1: script;
--ff-alt-2: cursive;

/*  fs font size */
--fs-xs:   .75rem;
--fs-s:    .88rem;
--fs-m:   1.00rem;
--fs-l:   1.50rem;
--fs-xl:  2.00rem;
--fs-xxl: 3.00rem; 

/*  fw font weight */
--fw-faint: 200;      /*  faint (deprecated) */
--fw-normal: 300;     /*  normal (deprecated) */
--fw-bold: 600;       /*  bold (deprecated) */
--fw-extra-bold: 800; /*  extra bold (deprecated) */
--fw-xf: 100; /* extra faint */
--fw-f: 200;  /*  faint */
--fw-n: 300;  /*  normal */
--fw-b: 600;  /*  bold */
--fw-xb: 800; /*  extra bold */

/*  ls letter spacing */
.ls-n {    letter-spacing: var(--ls-n); } 
.ls-w {    letter-spacing: var(--ls-w); } 

.fs-xs { font-size: var(--fs-xs); }
.fs-s { font-size: var(--fs-s); }
.fs-m { font-size: var(--fs-m); }
.fs-l { font-size: var(--fs-l); }
.fs-xl { font-size: var(--fs-xl); }
.fs-xxl { font-size: var(--fs-xxl); }

.fw-xf { font-weight: var(--fw-xf); }
.fw-f, .fw-faint { font-weight: var(--fw-faint); }
.fw-n, .fw-normal { font-weight: var(--fw-normal); }
.fw-b, .fw-bold { font-weight: var(--fw-bold); }
.fw-xb, .fw-extra-bold { font-weight: var(--fw-extra-bold); }

  

}


body, .raleway, .sans {
font-family:'Raleway', sans-serif;
}

.impact {
font-family:'impact', sans-serif;
}

.raleway-200 {
font-family:  'Raleway', sans-serif;
font-weight:200;
}

.raleway-300 {
font-family:  'Raleway', sans-serif;
font-weight:300;
}

.raleway-600 {
font-family:  'Raleway', sans-serif;
font-weight:600;
}

.raleway-900 {
font-family:  'Raleway', sans-serif;
font-weight:900;
}

.tangerine {
font-family:  'Tangerine', cursive;
}

.fancy-font,
.tangerine-300 {
font-family:  'Tangerine', cursive;
font-weight:300;
}

.fancy-font-b,
.tangerine-700 {
font-family:  'Tangerine', cursive;
font-weight:700;
}

.section_title,
.page_title,
.page_subtitle,
.site_slogan {
 font-family:  'Raleway', sans-serif;
 /* font-family:'impact', sans-serif; */
  font-weight:200;
  text-align: center;
}
.page_title { font-size:3rem; }
.page_subtitle { font-size:1.8rem; }
.site_slogan { font-size:2rem; }

.date-author,
article .date-author,
.article-list-item .date-author {
  padding: 20px 0 10px;
  text-align: left; 
  font-size: .85rem;
}

.friendly-font {
font-family:'Comic Neue', cursive;
}
.feature h1 {
font-size:7rem;
  font-size:2rem; 
line-height:1;
}
.feature h3 {
font-size:5.5rem;
}
.feature h4 {
font-size:4.0rem;
}

.dark_text {
color:var(--main-foreground-color);
text-shadow:2px 2px 6px var(--alt-color);
}
.light_text {
color:var(--alt-color);
text-shadow:2px 2px 6px var(--main-foreground-color);
}

/*************** post ***************/

.post-title {
  padding: .5rem 0 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.post-subtitle {
  padding: 0 0 .5rem;
  font-size: 1.25rem;
}

.hero_image {
  margin-top: 2rem;
  padding: 0;
  background-color : var(--color-a1);
}
.hero_image .caption {
  padding:4px 4px 4px 8px;
  font-size: .85rem;
  color : var(--color-b3);
}




.love-ya {
font-family: 'Love Ya Like A Sister', sans-serif;
}



a {
color : var(--main-link-color);
text-decoration : none;
}

a:hover {
color : var(--main-hover-color);
text-decoration : underline;
}
a:visited {
color : var(--main-visited-color);
}

.post-title,
.post-subtitle {
  font-family: 'Love Ya Like A Sister', sans-serif;
}

a.post-title,
a.post-title:visited {
  font-family: 'Love Ya Like A Sister', sans-serif;
  font-size: 2.0rem;
  color: var(--color-b3);
}
a.post-title:hover {
  color: var(--color-b1);
}

a.read-more,
a.read-more:visited {
  padding: 0;
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  color: var(--main-link-color);
  white-space: nowrap;
}
a.read-more:hover {
  color: var(--main-hover-color);
}

footer a {
color : var(--footer-link-color);
text-decoration : none;
}
footer a:hover {
color : var(--footer-hover-color);
text-decoration : underline;
}

footer a:visited {
color : var(--footer-visited-color);
}