@font-face {
  font-family: "Henny Penny";
  src: url('/font/HennyPenny-Regular.tff') format('truetype');
}

@font-face {
 font-family: "Playfair Display";
 src: url('/font/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: "Playfair Display Italics";
   src: url('/font/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
    /* font vars */
    --hen-pen: "Henny Penny", serif;
    --playfair: "Playfair Display", serif;
    --playfair-ital: "Playfair Display Italics", serif;
    /* color vars */
    --fly-red: #D32F2F;
    --fly-red-op: #D32F2FB5;
    --lush-green: #4F7A5B;
    --lush-green-op: #4F7A5BE5;
    --lush-green-op-less: #4F7A5BB2;
    --dark-green: #3C5D3C;
    --dark-green-op: #3C5D3CB2;
    --ivory: #F2E9E4;
    --char-shad: #2A2A2A;
    --char-shad-op: #2A2A2AE5;
}
/*
0.1 opacity: 1A
0.2 opacity: 33
0.3 opacity: 4D
0.4 opacity: 66
0.5 opacity: 80
0.6 opacity: 99
0.7 opacity: B3
0.8 opacity: CC
0.9 opacity: E6
*/

.gen-style {
  background-color: var(--dark-green-op);
  color: var(--ivory);
  font-family: var(--playfair);
  width: fit-content;
  margin: auto;
  padding: 1em;
  border-radius: 30px;
  border: var(--fly-red) solid 4px;
  box-shadow: 4px 4px 4px var(--char-shad-op);
  margin-bottom: 2em;
}
.gen-style h1,
.gen-style h2,
.gen-style h3,
.gen-style h4,
.gen-style h5,
.gen-style h6 {
  font-family: var(--playfair-ital) 
}


.gen-style-read {
    box-shadow: 0px 0px 18px 13px var(--dark-green);
    background-color: var(--dark-green);
    border-radius: 20px;
}

.page-head {
  font-family: var(--hen-pen);
  font-size: 3em;
  color: var(--fly-red);
  text-shadow:
    1px 1px 4px var(--char-shad),
    -1px 0px 4px var(--char-shad),
    1px 1px 4px var(--char-shad),
    0px -1px 4px var(--char-shad);
  text-align: center;
  width: fit-content;
  margin: auto;
  margin-bottom: .5em;
  border-radius: 40px;
  padding-left: 0.2em;
  padding-right: 0.3em;
}