/* -------------------------------------------------------------------------- */
/*                        DEMO WRAPPER STYLES                                 */
/* -------------------------------------------------------------------------- */
.demo-wrapper {
  position: fixed;
  bottom: 70px;
  right: 40px;
  width: 170px;
 /* border: 1px solid purple;*/
  z-index: 2147483642;
}

.click-to-play-wrapper {
  position: fixed;
  bottom: 70px;
  right: 10px;
  width: 180px;
  /*border: 4px solid orange;*/
  z-index: 2147483642;
  height: 95px;
}


.click-to-play-box {
  width: 180px;
  /*border: 1px solid blue;*/
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Merriweather', serif;
  color: var(--babble-color-2);
  font-size: 17px;
}


/* -------------------------------------------------------------------------- */
/*                        CLICK HERE BOX STYLES                               */
/* -------------------------------------------------------------------------- */
.click-here-box {
  width: 170px;
  height: 50px;
  /*border: 1px solid green;*/
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Merriweather', serif;
  color: var(--babble-color-2);
  font-size: 17px;
}


/* -------------------------------------------------------------------------- */
/*                        PILL ARROW STYLES                                   */
/* -------------------------------------------------------------------------- */
.pill-arrow-container {
  /* border: 1px solid red; */
}

.pill-arrow-container img {
  width: 114px;
  height: auto;
  display: block;
/*  border: 2px solid pink; */
}

.settings-arrow-container {
 /*   border: 2px solid yellow; */
  height: 60px;
  text-align: right; /* pushes inline elements to the right */
}

.settings-arrow-container img {
  width: 114px;
  height: 60px;
  /* border: 2px solid orange; */
  display: inline-block; /* makes it respect text-align from parent */
}

/* -------------------------------------------------------------------------- */
/*                           FONT-FACE DECLARATIONS                           */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_24pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_24pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_24pt-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_24pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------- */
/*                        PILL DEMO CSS VARIABLES                             */
/* -------------------------------------------------------------------------- */
/* Scoped CSS variables - only apply to Babble pill containers */
.pill-container {
  /* Colors - Scoped to avoid conflicts with website CSS */
  --babble-color-1: #292929;  /* very dark gray */
  --babble-color-2: #1D6AFF; /* blue  */
  --babble-color-3: #FFFFFF; /* white */
  --babble-color-4: #f0f0f0; /* very light gray */
  --babble-color-5: #e0e0e0; /* light gray */
  --babble-color-6: #ECF1FC; /* pale blue */
  --babble-color-7: #788092; /* blue gray */
  --babble-color-8: #949494; /* dark gray */
  --babble-color-1-rgb: 41, 41, 41;

  /* Typography - Scoped to avoid conflicts with website CSS */
  --babble-font-primary: 'Merriweather', serif;
  --babble-font-secondary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --babble-font-heading: 'Merriweather', serif;

  /* Font Weights */
  --babble-font-weight-extralight: 200;
  --babble-font-weight-light: 300;
  --babble-font-weight-regular: 400;
  --babble-font-weight-medium: 500;
  --babble-font-weight-semibold: 600;
  --babble-font-weight-bold: 700;

  /* Font Sizes */
  --babble-small-text: 11px;
  --babble-caption-text: 12px;
  --babble-caption-text-lg: 14px;

  --babble-body-text: 16px;
  --babble-h6-text: 19px;
  --babble-h5-text: 24px;
  --babble-h4-text: 32px;
  --babble-h3-text: 48px;
  --babble-h2-text: 64px;
  --babble-h1-text: 80px;

  /* Button Variables */
  --babble-button-font-size-large: 18px;
  --babble-button-font-size-medium: 16px;
  --babble-button-font-size-small: 14px;
  --babble-button-padding-large: 12px 24px;
  --babble-button-padding-medium: 10px 20px;
  --babble-button-padding-small: 8px 16px;
  --babble-button-background-color: var(--babble-color-2);
  --babble-button-text-color: var(--babble-color-3);
  --babble-button-border-color: var(--babble-color-2);
  --babble-button-hover-background-color: var(--babble-color-1);
  --babble-button-hover-text-color: var(--babble-color-3);
  --babble-button-height-large: 48px;
  --babble-button-height-medium: 40px;
  --babble-button-height-small: 32px;

  /* Global Input Form Styles */
  --babble-input-padding: 10px 16px;
  --babble-input-font-size: 16px;
  --babble-input-border-radius: 5px;
  --babble-input-border-color: var(--babble-color-5);
  --babble-input-background-color: var(--babble-color-3);
  --babble-input-text-color: var(--babble-color-1);
  --babble-input-focus-border-color: var(--babble-color-2);
  --babble-input-placeholder-color: var(--babble-color-5);
}

/* -------------------------------------------------------------------------- */
/*                        BASE PILL CONTAINER STYLES                          */
/* -------------------------------------------------------------------------- */
/* Base pill container styles */
.pill-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--babble-color-1);
  border-radius: 25px;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* High z-index, but lower than settings sidebar */
  z-index: 2147483644;
  height: 40px;
  box-sizing: border-box;
  justify-content: space-between;
  width: auto;
  min-width: 129px;
  overflow: hidden; /* Ensure all content stays within the pill */
}

/* Maintain consistent size on hover */
.pill-container:hover {
  height: 40px;
}

/* -------------------------------------------------------------------------- */
/*                        ICON BASE STYLES                                    */
/* -------------------------------------------------------------------------- */
/* Icon base */
.pill-container .icon {
  width: 40px;
  height: 40px;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  position: relative;
  flex-shrink: 0; /* Prevent icons from shrinking */
  padding: 0; /* Remove padding that might create gaps */
}

/* Make icon content sit above all backgrounds */
.pill-container .icon svg,
.pill-container .icon img,
.pill-container .auto_play_icon::after {
  position: relative;
  z-index: 5;
}

/* Add curved corners to the first and last icons */
.pill-container .icon:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.pill-container .icon:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* -------------------------------------------------------------------------- */
/*                        AUTO PLAY ICON STYLES                               */
/* -------------------------------------------------------------------------- */
/* Fix for auto-play icon to ensure its content is visible */
.pill-container .auto_play_icon {
  background-image: none;
  position: relative;
}

/* Add the triangle icon as actual content rather than background */
.pill-container .auto_play_icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/auto_play_triangle_icon.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

/* Special handling for auto-play icon active state */
.pill-container .auto_play_icon.babble_active {
  background-color: transparent;
  position: relative;
  z-index: 1;
}

/* Create the blue background that exactly matches the left curve */
.pill-container .auto_play_icon.babble_active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 45px;
  height: 100%;
  background-color: var(--babble-color-2);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  z-index: 1;
}

/* Make the auto-play icon's content white when active */
.pill-container .auto_play_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/*                        SETTINGS ICON STYLES                                */
/* -------------------------------------------------------------------------- */
/* Special handling for settings icon */
.pill-container .settings_icon {
  position: relative;
  z-index: 2;
  background-image: none;
}

/* Make settings icon create a ::after pseudo-element for the three dots */
.pill-container .settings_icon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url('../images/settings_icon.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Special handling for settings icon active state */
.pill-container .settings_icon.babble_active {
  background-color: transparent;
  position: relative;
  z-index: 2;
}

/* Create the white background with opacity that exactly matches the right curve for active state */
.pill-container .settings_icon.babble_active::before {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 45px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); /* White with 20% opacity */
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  z-index: 1;
}

/* Make the three dots white when the settings icon is active */
.pill-container .settings_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

/* Special handling for settings icon hover state */
.pill-container .settings_icon:hover {
  background-color: transparent;
  position: relative;
}

/* Create the white background with 50% opacity that exactly matches the right curve for hover state */
.pill-container .settings_icon:hover::before {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 42px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* White with 50% opacity */
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  z-index: 1;
}

/* Make the three dots white when the settings icon is hovered */
.pill-container .settings_icon:hover::after {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/*                        CLICK AND PLAY ICON STYLES                          */
/* -------------------------------------------------------------------------- */
/* Click and Play container to handle icon switching */
.click-and-play-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add opacity transition to Click and Play icons */
.click_and_play_icon,
.click_and_play_pause_icon {
  transition: opacity 0.1s ease-in-out;
}

/* Icon background images */
.click_and_play_icon {
  background-image: none;
  position: relative;
  z-index: 2;
}

/* Add the click and play icon as pseudo-element content */
.click_and_play_icon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url('../images/click_and_play_icon.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Regular active state for middle icons */
.pill-container .click_and_play_icon.babble_active,
.pill-container .click_and_play_pause_icon.babble_active,
.pill-container .paste_and_play_icon.babble_active {
  background-color: transparent;
  position: relative;
  z-index: 2;
}

/* Create the blue rectangular background for Click and Play active state */
.pill-container .click_and_play_icon.babble_active::before,
.pill-container .click_and_play_pause_icon.babble_active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 43px;
  height: 100%;
  background-color: var(--babble-color-2);
  border-radius: 0;
  z-index: -1;
}

/* Make the click and play icon white when active */
.pill-container .click_and_play_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

/* Click and Play pause icon */
.click_and_play_pause_icon {
  background-image: none;
  position: relative;
  cursor: pointer;
  z-index: 2;
}

.click_and_play_pause_icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/pause_btn.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Make the pause icon's content white when active */
.click_and_play_pause_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

.paste_and_play_icon {
  background-image: url('../images/paste_and_play_icon.svg');
}

/* -------------------------------------------------------------------------- */
/*                        PAUSE ICON STYLES                                   */
/* -------------------------------------------------------------------------- */
/* Pause icon styles */
.pill-container .pause_icon {
  background-image: none;
  position: relative;
  margin-left: -7px; /* Match click_and_play_icon positioning */
  cursor: pointer; /* Show finger cursor on hover */
}

.pill-container .pause_icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/pause_btn.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
  /* Center the pause icon like AutoPlay does in its flex container */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Make the pause icon's content white when active */
.pill-container .pause_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/*                        PLAY-PAUSE BUTTON CONTAINER STYLES                  */
/* -------------------------------------------------------------------------- */
/* PlayPauseButton container styles to match pill layout */
.pill-container .play-pause-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
}

/* PlayPauseButton icon styles to match existing pill icons */
.pill-container .play-pause-button-container .auto_play_icon,
.pill-container .play-pause-button-container .pause_icon {
  width: 40px;
  height: 40px;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.033s ease-in-out;
  background-image: none;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  padding: 0;
}

/* Auto play icon content using pseudo-element */
.pill-container .play-pause-button-container .auto_play_icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/auto_play_triangle_icon.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

/* Pause icon content using pseudo-element */
.pill-container .play-pause-button-container .pause_icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/pause_btn.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

/* Active state for PlayPauseButton icons */
.pill-container .play-pause-button-container .auto_play_icon.babble_active::before,
.pill-container .play-pause-button-container .pause_icon.babble_active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 45px;
  height: 100%;
  background-color: var(--babble-color-2);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  z-index: 1;
}

/* Make icon content white when active */
.pill-container .play-pause-button-container .auto_play_icon.babble_active::after,
.pill-container .play-pause-button-container .pause_icon.babble_active::after {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/*                        CLICK AND PLAY HOVER BUTTON STYLES                  */
/* -------------------------------------------------------------------------- */
/* Click and Play hover button styles */
.read-to-me-play-button {
  position: fixed;
  width: 30px;
  height: 30px;
  background-color: var(--babble-color-2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, transform 0.1s ease;
  opacity: 0.95;
}

.read-to-me-play-button:hover {
  background-color: var(--babble-color-1);
  transform: scale(1.05);
  opacity: 1;
}

.read-to-me-play-button::after {
  content: "▶";
  color: white;
  font-size: 12px;
  margin-left: 2px;
  line-height: 1;
}

/* -------------------------------------------------------------------------- */
/*                        ICON ACTIVE STATES                                  */
/* -------------------------------------------------------------------------- */
/* Make all active icons' SVG white */
.pill-container .icon.active svg,
.pill-container .click_and_play_icon.active svg,
.pill-container .paste_and_play_icon.active svg {
  filter: brightness(0) invert(1);
}

/* -------------------------------------------------------------------------- */
/*                        TOOLTIP STYLES                                      */
/* -------------------------------------------------------------------------- */
/* Info Icon and Tooltip Styles */
.info-icon {
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: #6c757d;
  cursor: help;
  position: relative;
  line-height: 16px;
  text-align: center;
}

.info-icon:hover {
  color: #495057;
}

.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  width: 170px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-weight: normal;
  line-height: 1.4;
}

.info-icon::before {
  content: '';
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

.info-icon:hover::after,
.info-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------- */
/*                        SETTINGS SIDEBAR STYLES                             */
/* -------------------------------------------------------------------------- */
/* Settings sidebar */
.babble_settings-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #FFFFFF !important;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 2147483647 !important;
  overflow-y: auto;
  padding: 20px;
  font-family: var(--babble-font-secondary);
  box-sizing: border-box;

  /* Add CSS variables for colors */
  --babble-color-1: #292929;
  --babble-color-2: #1D6AFF;
  --babble-color-3: #FFFFFF;
  --babble-color-4: #f0f0f0;
  --babble-color-5: #e0e0e0;
  --babble-color-6: #ECF1FC;
  --babble-color-7: #788092;
  --babble-color-8: #949494;
}

/* Overlay for the rest of the page */
.babble_settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2147483646 !important;
  display: none;
}

.babble_settings-overlay.open {
  display: block;
}

/* Close icon */
.babble_settings-sidebar .babble_close-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: var(--babble-h6-text);
  color: var(--babble-color-7);
}

/* Settings content */
.babble_settings-sidebar .section-title {
  font-size: var(--babble-body-text);
  font-weight: var(--babble-font-weight-semibold);
  margin-bottom: 15px;
  font-family: var(--babble-font-heading);
}

/* Voice category title */
.voice-category-title {
  font-size: 15px;
  font-weight: var(--babble-font-weight-semibold);
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--babble-color-7);
  font-family: 'Oswald', sans-serif;

}

/* Voice list */
.voice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;

}

.voice-item {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: 'Merriweather', serif;
  color: var(--babble-color-1);
  font-size: 20px;
  line-height: 160%;
  position: relative;
  display: inline-block;
  width: auto;
  padding-right: 12px;
}

.voice-item:hover {
  background-color: var(--babble-color-5);
}

.voice-item.active-voice {
  font-weight: var(--babble-font-weight-bold);
}

.voice-item.active-voice::after {
  content: "Now Playing";
  margin-left: 25px;
  font-size: 14px;
  color: var(--babble-color-2);
  font-weight: var(--babble-font-weight-semibold);
  white-space: nowrap;
  background-image: url('../images/listen.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 24px;
  filter: brightness(0) saturate(100%) invert(36%) sepia(99%) saturate(2446%) hue-rotate(207deg) brightness(102%) contrast(101%);
}



/* Chapter headings */
.chapter-title {
  text-align: center;
  font-family: 'Merriweather', serif;
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #222;
}

.chapter-subtitle {
  text-align: center;
  font-family: 'Merriweather', serif;
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 40px;
  color: #222;
}

/* Reset and base styling */
body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
  font-size: 1.2em; /* 20% increase */
  line-height: 1.6;
  background-color: #ffffff;
  color: #222;
}

/* Centering the content */
main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

article {
  max-width: 550px;
  background: white;
  padding: 2rem;
  border-radius: 8px;
 /* border: 1px solid #ccc;  */
}

/* Drop cap style */
.dropcap {
  float: left;
  font-size: 4.8rem;
  line-height: 0.9;
  padding-right: 8px;
  font-weight: bold;
  color: #2b2b2b;
  font-family: 'Merriweather', serif;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  article {
    padding: 1.5rem;
  }
  .dropcap {
    font-size: 3.6rem;
  }
}