@font-face {
font-family: Pacifico-Regular;
src: url(/assets/fonts/Pacifico-Regular.woff2);
}

@font-face {
font-family: OilvareBase-Regular;
src: url(/assets/fonts/OilvareBase-Regular.woff2);
}

@font-face {
font-family: Open-Sans;
src: url(/assets/fonts/Open-Sans.woff2);
}

@font-face {
font-family: Barnum;
src: url(/assets/fonts/Barnum.otf);
}

 body {
  font-family: Open-Sans;
 }

#site-header { display:none; }
#site-header-mobile { display:block; }
#site-header-desktop-spacer {display: none;}
#site-header-mobile-spacer{display:block;}

.no-padding-left {
    padding-left:0px !important;
}

.copy-btn { cursor: pointer; display: inline-flex; align-items: center; background-color: transparent;}
 .copy-btn img { height: 24px; width: 24px; transition: transform 120ms ease; }
 .copy-btn img.copied { transform: scale(1.05); }

b,
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.topmenulink {
    text-decoration:none;color:#ffffff;
    text-shadow:2px 2px #000000;
}

a {
    text-decoration:none;
    color:#000000;
    text-shadow:none;
}

a:hover {
    text-decoration:underline;
}

.menubar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.breadcrumbbar {
    background-color: #4d360c;box-shadow: 2px 2px 5px #000000;font-weight:bold;
    display:inline-block;border-radius:0px 0px 15px 0px;
    color: #fff;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out, padding 0.4s ease;
    padding: 0 1vw;
}

.menubar-wrapper:hover .breadcrumbbar {
    max-height: 3vw;
    padding: 0.5vw 1vw;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.breadcrumb-list li + li::before {
  content: "/";
  margin: 0 8px;
  color: #ffffff;
}

.section-icon::before {
  content: "\273F";
/*  color: #a3a847; */
/*  color: #d87300; */
    color: #d87300;
    font-size: 1.2em;
    margin-right: 0.3em;
}


.crosslink-wrapper {
  display: inline-block;
  text-align: center;
}

.crosslink-bubble {
  position: relative;
  display: inline-block;
  background: white;
  border: 2px solid black;
  border-radius: 14px;
  padding: 8px 16px;
  font-family: 'Pacifico-Regular', cursive;
  font-size: 40px;
  white-space: nowrap;
  text-decoration: none;
  color: black;
}
.crosslink-bubble:hover {
  background: #fef5e7;
}

.crosslink-bubble::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 35px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid black;
}

.crosslink-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 37px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

.crosslink-caption {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
  font-style: italic;
}

/* Animation keyframes */
@keyframes bloopAndShake {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  65%  { transform: scale(0.95) translateX(0); }
  75%  { transform: translateX(-5px); }
  85%  { transform: translateX(5px); }
  95%  { transform: translateX(-2px); }
  100% { transform: scale(1) translateX(0); }
}

.faq-list {
  margin: 0;
  padding: 0;
}

.faq-question {
  font-weight: 600;
  color: #4d360c; /* Or #262626 if better for contrast */
  cursor: pointer;
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  color: #333;
  line-height: 1.6;
  margin: 0 0 1.2rem 0;
  padding-left: 0.5rem;
  font-size: 1rem;
}

.faq-answer.open {
  max-height: 500px;
}

.faq-question:hover {
  text-decoration: underline;
}

.faq-item {
  margin-bottom: 1.5rem; /* Adds space between each Q&A */
}

header {margin:0;padding:0;}
.audio-button-area {padding-left:30px;display:inline-block;vertical-align:top;padding-top:6px;}
.audio-icon {border-width:0;padding:0;background-color:transparent;all:unset; cursor:pointer;}
.pronunciation {display:inline-block;font-size:25px;margin-left:10px;vertical-align:middle;}
.conversationspeaker {display:inline-block;vertical-align:top;}
.conversationwords {display:inline-block;vertical-align:top;margin-left:10px;}
.conversation-example {padding-left:50px;}
.color-link {color:#0000ff;}

.dialogue-grid {
  display: grid;
  grid-template-columns: max-content 1fr; /* “Speaker” column hugs; line fills */
  row-gap: 0.35rem;
  column-gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}
.dialogue-grid .row {
  display: contents; /* lets children align to the grid columns */
}
.dialogue-grid .speaker {
  font-weight: 700;
  white-space: nowrap;        /* keeps “Elmer” from wrapping */
  text-align: right;          /* tidy column edge */
}
.dialogue-grid .line {
  /* lines auto-align in the 2nd column */
}
@media (max-width: 640px) {
  .dialogue-grid {
    grid-template-columns: 1fr; /* stack nicely on phones */
  }
  .dialogue-grid .speaker {
    text-align: left;
  }
}



nav.primary-nav li { display:inline; }
nav.primary-nav { text-align:center; }
nav.primary-nav ul { display:inline-flex; gap:.5em; padding:0; margin:0; list-style:none; }
nav.primary-nav a { display:inline-block; padding:0 .5em; white-space:nowrap; color:#fff; }
nav.primary-nav li + li::before { content:"\2022"; margin:0 .25em 0 0; }




.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}


article {padding:0;}

.summarysection {font-size:23px !important;}
.pronunciation {font-size:25px;}




a.full-disclaimer {
  color: #666666;
  text-decoration: underline;
}
a.full-disclaimer:hover,
a.full-disclaimer:focus-visible {
  color: #0000ff;
}
.random-word-btn {
  border: 1px solid #000;
  border-radius: 25px;
  padding: 10px 15px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Light background change on hover */
.random-word-btn:hover {
  background-color: #f4f;
  animation: shake 0.4s; /* run the shake animation */
}

/* Keyframes for shake effect */
@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}



/* Audio Player Start */
/* Wrapper */
.hb-audio {
  display: inline-flex;
vertical-align:middle;
  align-items: center;
  gap: 8px;
}

/* Button */
.hb-audio__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fffbe6;            /* light cream to pop */
  border: 2px solid #d97706;       /* your orange */
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: transform .08s ease;
}

.hb-audio__btn:hover { transform: translateY(-1px); }
.hb-audio__btn:active { transform: translateY(0); }
.hb-audio__btn:focus-visible {
  outline: 3px solid #f59e0b;     /* accessible focus */
  outline-offset: 2px;
}

/* Icon container (we animate this) */
.hb-audio__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #4d360c;padding:3px;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(217,119,6,0);
}

/* Label */
.hb-audio__label {
  font-weight: 700;
  color: #4b3621;                  /* dark brown */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* --- Animations --- */

/* Little boom-boom-boom on page load */
.hb-audio.pulse-on-load .hb-audio__icon {
  animation: hbPulse 0.6s ease-out 3;
}

/* Tiny thump when starting playback */
.hb-audio.play-thump .hb-audio__icon {
  animation: hbThump 250ms ease-out 1;
}

/* Optional subtle breathing while playing */
.hb-audio.is-playing .hb-audio__icon {
  animation: hbBreath 1.2s ease-in-out infinite;
}

/* Keyframes */
@keyframes hbPulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 rgba(217,119,6,0.0); }
  30%  { transform: scale(1.18);box-shadow: 0 0 10px rgba(217,119,6,0.6); }
  60%  { transform: scale(0.96);box-shadow: 0 0 6px rgba(217,119,6,0.4); }
  100% { transform: scale(1);   box-shadow: 0 0 0 rgba(217,119,6,0.0); }
}

@keyframes hbThump {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes hbBreath {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hb-audio__icon { animation: none !important; }
  .hb-audio__btn { transition: none; }
}
/* Audio Player End */

.hs-card{display:block;border:1px solid #000000;border-radius:10px;padding:.7rem .85rem;background:#fff;text-decoration:none;color:#111;margin-bottom:.55rem;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.hs-card:hover{background:#fbfbfb;text-decoration:none;}
.hs-title{font-weight:800;font-size:1.05rem;margin:.25rem 0 .2rem}
.hs-snippet{opacity:.8;font-size:.92rem;line-height:1.35}
.hs-row{display:flex;align-items:center;gap:.35rem;font-size:.8rem;opacity:.85}
.hs-badge{background:#efefef;border-radius:999px;padding:.05rem .5rem}
.hs-badge.alt{background:#f3f7ff}
.hs-dot{width:.3rem;height:.3rem;background:#bbb;border-radius:50%}

.divider {
  display: flex;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  align-items: center;
  text-align: center;
  color: #333;              /* text color */
  font-weight: bold;        /* optional */
  margin: 1rem 0;           /* spacing */
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;                  /* take up remaining space */
  border-bottom: 1px solid #aaa; /* the line */
  margin: 0 .75em;          /* spacing between line and text */
}

#random-button-div-mobile {display:block;}
.speaker-icon-svg {width:28px;height:28px;}
.speaker-icon-svg-smaller {width:23px;height:23px;}

/* Keep citation lines from blowing out the layout */
#cite-apa, #cite-mla, #cite-chicago{
  /* make the flex child shrink/wrap instead of forcing the row wide */
  flex: 1 1 auto;
  min-width: 0;
  align-items:center; gap:12px; margin-bottom:10px;

  /* allow long URLs / long words to break */
  overflow-wrap: anywhere;   /* modern */
  word-break: break-word;    /* legacy fallback */
  line-break: anywhere;

  /* just in case something set nowrap somewhere */
  white-space: normal;
}

/* If your URL is inside a link, make sure it can break too */
#cite-apa a, #cite-mla a, #cite-chicago a{
  overflow-wrap: anywhere;
  word-break: break-word; /* or break-all if you want more aggressive */
}

.citation-list { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.citation-row { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; margin:10px 0; }
.citation-row .copy-btn { flex:0 0 auto; display:inline-flex; align-items:center; }
.citation-row [id^="cite-"]{ flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.pronunciation {font-size:23px;vertical-align:middle;display:inline-block;}
.dudesaysmobile {display:block;}
.quotation-left-svg {height:6px;vertical-align:top;margin:4px 2px 0px 0px;transform: scale(-1, -1);transform-origin:center;}
.quotation-right-svg {height:6px;vertical-align:top;margin:4px 2px 0px 0px;}
.protip-text {text-align:center;font-family:Open-Sans;color:#ffffff;text-shadow:none;font-weight:bold;font-size:23px;display:inline-block;vertical-align:top;padding:10px;}
.intro {font-size:23px; font-family:Open-Sans;}
.pinterest-svg {height:30px;}
#random-button-div-desktop {display:none;}
.dice-svg {height:30px;}
.nextbutton {float:right;}
.previousbutton {float:right;}
.h1-mp3 {display:none}
.h1-subtitle {display: block; font-size: 23px; font-weight: 400; color: #333; margin: -0.3rem 0 0 0; padding: 5px 0px 10px 15px;font-family:Open-Sans;}
.mobile-floating-audio {display:block;float:right;width:35px;}
.summarysection{font-size:23px;}
.desktop-dudesays{display:none;}
.dudesays-poem {display:none;}
.sidebox {vertical-align:top;display:inline-block;border-radius:25px;width:100%;font-family:Open-Sans;letter-spacing:1px;text-shadow:none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);}
.lightcolor {background-color:#FFDEAD;}
.red {background-color:red;}
.burnt-orange {background-color:#d87300;}
.hunter-green {background-color:#4F6B4A;}
.sage-green {background-color:#A6A25E;}
.faded-navy {background-color:#3C4A58;}
.dark-brown {background-color:#4d360c;}
.padding-15 {padding:15px;}
.sideboxtext {padding:15px;text-align:center;border-radius:25px 25px 0px 0px;margin:-15px;color:#ffffff;font-weight:bold;font-size:20px;}
.numbered-list {
  list-style: decimal;      /* remove default bullets */
  padding: 0;
  margin-left: 0;
  margin-top:15px; margin-top:1.09809vw;
  margin-bottom:25px; margin-bottom:1.83016vw;
}

.numbered-list li {
  position: relative;    /* establishes a positioning context */
  padding-left:0.45em;
/*  font-size:18px;font-size:1.31771vw; */
  margin-bottom:5px; margin-bottom:0.36603vw;
  margin-left:40px !important; margin-left:2.92825vw !important;
  margin-top:0px;
  padding-top:0px;
}

.numbered-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-weight: bold;
  text-shadow: none;
}




/* full-screen overlay */
.modal {
     position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;                  /* hidden by default */
    align-items: center;            /* vertical center */
    justify-content: center;        /* horizontal center */
    background: rgba(0,0,0,0.5);    /* dim the page */
    z-index: 9999;
  }

  /* show the modal (use JS to add/remove this) */
  .modal.show {
    display: flex;
  }

  /* the white ""bubble"" container */
  .modal-content {
    background: #fff;
    width: 50vw;                     /* 50% of viewport */
    max-width: 600px;                /* optional cap */
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
    transform: scale(0);             /* start tiny */
    transform-origin: center center;
  }

  /* when modal has .show, animate the content */
  .modal.show .modal-content {
    animation: bloopdemo 0.3s ease-out forwards;
  }

  @keyframes bloopdemo {
    0%   { transform: scale(0.5);   }
    60%  { transform: scale(1.2);   }
    100% { transform: scale(1);     }
  }

  /* optional close ""X"" */
  .modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
  }

  /* simple form styling */
  .modal-content form input,
  .modal-content form button {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
  }

 .audio-block {
   display: flex;
   flex-direction: column;
   gap: .5em;
   background: #fffaf3;
   border-radius: 16px;padding:15px;margin-left:25px;
 }
 .audio-title {
   font-weight: 600;
   color: #4d360c;
   font-family: "Georgia", serif;
 }

  .hp-wrap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  form { max-width: 640px; margin: 2rem auto; font-family: system-ui, sans-serif; }
  label { display:block; margin: .75rem 0 .25rem; }
  input[type=text], textarea { width:100%; padding:.6rem; border:1px solid #ccc; border-radius:8px; }
  button { margin-top: 1rem; padding:.7rem 1rem; border:0; border-radius:10px; cursor:pointer; }

.rowflex{
  display:flex;              /* make it flex at all sizes */
  flex-direction:column;     /* stack on mobile */
  align-items:flex-start;
/*  gap:.75rem; */
  gap:20px; gap:1.46412vw;
  flex-wrap:nowrap;
}
.grow{ flex:1 1 auto; min-width:0; }
.fixed{ width:100%; flex:0 0 auto; padding-top:15px;}
.regularpage {position:relative;padding:15px;padding:0px;}
.regularpage h1 {font-family: Open-Sans; letter-spacing:-1.5px;margin: 0px;font-size:35px;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
.regularpage p {font-family: Open-Sans; padding-left:0px;font-size:18px;}
.regularpage section {padding-left:0px;}
.regularpage h2 {font-family: Open-Sans; letter-spacing:-1.5px;font-size:25px;margin:0px;padding:0px;font-weight:bold;}
 h1 {font-family: Open-Sans; letter-spacing:-1.5px;margin: 0px;font-size:35px;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
 p {font-family: Open-Sans; padding-left:0px;font-size:18px;}
 section {padding-left:0px;}
 h2 {font-family: Open-Sans; letter-spacing:-1.5px;font-size:25px;margin:0px;padding:0px;font-weight:bold;}
.mainentry {position:relative;}
.citationbody {padding-top:15px;}
.desktopspacer {height:0px;display:none;}
:root { --header-h: 96px; } 


/******************************************************** desktop-only styles here ********************************************/
@media only screen and (min-width: 769px) {
 body {
  font-size:18px; font-size:1.31771vw;
 }

 #random-button-div-mobile {display:none;}
 .speaker-icon-svg {width:28px; height:28px; width: 2.04978vw; height: 2.04978vw;}
 .speaker-icon-svg-smaller {width:23px; height:23px; width: 1.68374vw; height: 1.68374vw;}
 .pronunciation {font-size:23px;vertical-align:middle;display:inline-block;font-size:1.68374vw !important;padding-left:15px;padding-left:1.09809vw;}
 .dudesaysmobile {display:none;}
 .quotation-left-svg {height:6px;height:0.43923vw;vertical-align:top;margin:4px 2px 0px 0px;margin:0.29282vw 0.14641vw 0px 0px;transform: scale(-1, -1);transform-origin:center;}
 .quotation-right-svg {height:6px;height:0.43923vw;vertical-align:top;margin:4px 2px 0px 0px;margin:0.29282vw 0.14641vw 0px 0px;}
 .protip-text {text-align:center;font-family:Open-Sans;color:#ffffff;text-shadow:none;font-weight:bold;font-size:25px;font-size:1.46412vw;display:inline-block;vertical-align:top;padding:10px;padding:0.73206vw;}
 .intro {font-size:18px; font-size: 1.31771vw; font-family:Open-Sans;}
 .pinterest-svg {height:35px;height:2.56222vw;}
 #random-button-div-desktop {display:inline-block;float:right;margin-top:-10px;margin-right:-10px;}
 .dice-svg {height:30px;height:2.19619vw;}
 .nextbutton {float:right;margin-top:-5px;}
 .previousbutton {float:right;margin-top:-5px;}
 .h1-mp3 {display:inline-block}
 .h1-subtitle {display: block; font-size: 23px; font-size: 1.68374vw; font-weight: 400; color: #333; margin: -0.3rem 0 0 0; padding: 5px 0px 10px 15px;font-family:Open-Sans;letter-spacing:1px;}
 .mobile-floating-audio {display:none;}
 .summarysection{font-size:23px;font-size:1.68374vw !important;}
 .desktop-dudesays{display:block;float:right;position:relative;width:25.62225vw;}
 .dudesays-poem {text-align:center;font-family:Open-Sans;color:#ffffff;text-shadow:none;font-weight:bold;font-size:20px;font-size:1.46412vw;display:inline-block;vertical-align:top;padding:10px;padding:0.73206vw;}
 .padding-15 {padding:15px;padding:1.09809vw;}
 .sideboxtext {padding:15px;padding:1.09809vw;text-align:center;border-radius:25px 25px 0px 0px;margin:-15px;margin:-1.09809vw;color:#ffffff;font-weight:bold;font-size:25px;font-size:1.83016vw;}
 .rowflex{ flex-direction:row; }   /* unstack on desktop */
 .fixed{width:330px;width:24.15812vw;padding-top:0;}
 .regularpage {position:relative;padding:15px;padding:1.09809vw;}
 .regularpage h1 {font-family: OilvareBase-Regular;  letter-spacing:2px; margin: 0px;font-size:40px;font-size:2.92825vw;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
 .regularpage p {padding-left:25px;padding-left:1.83016vw;font-size:18px;font-size:1.31771vw;}
 .regularpage section {padding-left:15px;padding-left:1.09809vw;}
 .regularpage h2 {font-size:25px;font-size:1.83016vw;margin:0px;padding:0px;font-weight:bold;}
 h1 {font-family: OilvareBase-Regular;  letter-spacing:2px; margin: 0px;font-size:40px;font-size:2.92825vw;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
 p {padding-left:25px;padding-left:1.83016vw;font-size:18px;font-size:1.31771vw;}
 section {padding-left:15px;padding-left:1.09809vw;}
 h2 {font-size:25px;font-size:1.83016vw;margin:0px;padding:0px;font-weight:bold;}
 .mainentry {position:relative; background-color:#FFDEAD; padding: 20px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);}
 .citationbody {padding-top:15px;padding-top:1.09809vw;padding-left:25px;padding-left:1.83016vw;}
 .desktopspacer {display:block;height:49px;}
  .fixedside.sticky-rail{
    position: sticky;
    top: 125px; top:9.15080vw;             /* ↑ bump this until nothing tucks under */
    align-self: flex-start;  /* needed in flex */
    height: max-content;     /* avoid stretching */
  }
 html { scroll-padding-top: calc(var(--header-h) + 8px); }

 #site-header-mobile {display:none;}
 #site-header {display:block;}
 #site-header-desktop-spacer {display:block;}
 #site-header-mobile-spacer {display:none;}

 #site-header {
    position: sticky; /* keeps it on top while scrolling */
    top: 0;
    z-index: 1000;
    background: #d2b48c; /* your background */
    transition: all 0.3s ease;
 }

#site-header.shrink {
    padding: 5px 0; /* tighter */
}

#site-header .logo img {
    height: 150px; height: 10.98096vw; /* normal size */
    transition: height 0.3s ease;
}

#site-header.shrink .logo img {
    height: 65px; height: 4.75841vw;/* smaller size on scroll */
}

main {margin-top:5px; margin-top:0.36603vw; margin-right:8px; margin-right:0.58565vw; margin-bottom:0px; margin-left:8px;  margin-left:0.58565vw; position:relative;margin:0;}
h1 {  font-size:43px; font-size: 3.14787vw; font-family:OilvareBase-Regular; letter-spacing:0px; margin-top:0px !important; }

.bullet-list {
  list-style: disc;      /* remove default bullets */
  padding: 0;
  margin-left: 0;
  margin-top: 15px; margin-top: 1.09809vw;
  margin-bottom: 25px; margin-bottom: 1.83016vw;
}

.bullet-list li {
  position: relative;    /* establishes a positioning context */
  padding-left:5px !important; padding-left:0.36603vw !important; font-size:18px; font-size:1.31771vw;
  margin-bottom:5px; margin-bottom:0.36603vw; 
  margin-left:45px !important; margin-left:3.29428vw !important;
  margin-top:0px;
  padding-top:0px;
}

.bullet-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-weight: bold;
  text-shadow: none;
}


 td {font-family:Open-Sans;font-size:18px;font-size:1.31771vw;}
 input {font-family:Open-Sans;font-size:18px !important;font-size:1.31771vw !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 select {font-family:Open-Sans;font-size:18px !important;font-size:1.31771vw !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 textarea {font-family:Open-Sans;font-size:18px !important;font-size:1.31771vw !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 .pronunciation {font-size:23px !important;vertical-align:middle;display:inline-block;font-size:1.68374vw !important;padding-left:25px;padding-left:1.83016vw;padding-top:10px;padding-top:0.73206vw;}
 ul {margin:15px 0px 0px 15px;margin:1.09809vw 0px 0px 1.09809vw;padding-left:25px;padding-left:1.83016vw;font-size:18px;font-size:1.31771vw;}
 .line-down-green {font-size:0px;border-width:1px 1px 1px 1px;border-style:solid;border-color:#9fcf67;font-size:0px !important;height:0px;background-color:#9fcf67;border-radius:15px;margin-left:15px;margin-left:1.09809vw;}
 .line-down-brown {font-size:0px;border-width:1px 1px 1px 1px;border-style:solid;border-color:#4d360c;font-size:0px !important;height:0px;background-color:#9fcf67;border-radius:15px;margin-left:15px;margin-left:1.09809vw;}
 .prev-post {font-size:16px;font-size:1.17130vw;}
 .next-post {font-size:16px;font-size:1.17130vw;}

 .spacer-5 {font-size:0px;padding-bottom:5px;padding-bottom:0.36603vw;}
 .spacer-10 {font-size:0px;padding-bottom:10px;padding-bottom:0.73206vw;}
 .spacer-15 {font-size:0px;padding-bottom:15px;padding-bottom:1.09809vw;}
 .spacer-20 {font-size:0px;padding-bottom:20px;padding-bottom:1.46412vw;}
 .spacer-25 {font-size:0px;padding-bottom:25px;padding-bottom:1.83016vw;}
 .padding50 {padding-left:25px;padding-left:1.83016vw;padding-left:50px;padding-left:3.66032vw;}
 .font35 {font-size:35px !important;font-size:2.56222vw !important;font-weight:bold;}
 .font30 {font-size:30px !important;font-size:2.19619vw !important;font-weight:bold;}
 .font40 {font-size:40px !important;font-size:2.92825vw !important;font-weight:bold;}
 .font25 {font-size:25px !important;font-size:1.83016vw !important;font-weight:bold;}
 .date-posted {font-size:15px !important;font-size:1.09809vw !important;padding-left:15px;}
 .date-posted-small {font-size:13px !important;font-size:0.95168vw !important;padding-left:15px;}
 .blog-index-item {display:block;padding-left:15px;padding-left:1.09809vw;}
 h2 {font-weight:bold;font-size:23px;font-size:1.68374vw;margin:0px !important;padding:0px !important;}
 p {font-size:18px;font-size:1.31771vw;padding-left:25px;padding-left:1.83016vw;padding-bottom:10px;padding-bottom:0.73206vw;padding-top:10px;padding-top:0.73206vw;margin: 0 0 1em;margin: 0 0 5px;}

 .crosslink-bubble {
  transform-origin: bottom center;
  animation: bloopAndShake 0.8s ease-out;
 }
 .faq-question {
   font-size: 18px; font-size: 1.31771vw;
   margin-top: 10px; margin-top: 0.73206vw;
   margin-bottom: 3px; margin-bottom: 0.2196193265007321vw;
 }
 .faq-answer {
   font-size: 18px; font-size: 1.31771vw;
 }
 .faq-item {
  padding-left:25px;padding-left:1.83016vw;
 }


}
/******************************************************** desktop-only styles end here ********************************************/



/******************************************************** phone-only styles here ********************************************/
@media only screen and (max-width: 768px) {
  /* tablet + phone overrides here */

 body {
  font-size:18px;
 }

 #site-header-mobile {display:block;}
 #site-header {display:none;}
 #site-header-desktop-spacer {display:none;}
 #site-header-mobile-spacer {display:block;}

 .speaker-icon-svg {width:28px;height:28px;}
 .speaker-icon-svg-smaller {width:23px;height:23px;}
 #random-button-div-mobile{display: block; position: fixed; top: 12px; right: 25%; z-index: 9999; font-size: 20px;}
 .pronunciation {font-size:23px;vertical-align:middle;display:inline-block;}
 .dudesaysmobile {display:block;}
 .quotation-left-svg {height:6px;vertical-align:top;margin:4px 2px 0px 0px;transform: scale(-1, -1);transform-origin:center;}
 .quotation-right-svg {height:6px;vertical-align:top;margin:4px 2px 0px 0px;}
 .protip-text {text-align:center;font-family:Open-Sans;color:#ffffff;text-shadow:none;font-weight:bold;font-size:23px;display:inline-block;vertical-align:top;padding:10px;}
 .intro {font-size:23px; font-family:Open-Sans;}
 .pinterest-svg {height:30px;}
 #random-button-div-desktop {display:none;}
 .dice-svg {height:30px;}
 .nextbutton {float:right;}
 .previousbutton {float:right;}
 .h1-mp3 {display:none}
 .h1-subtitle {display: block; font-size: 23px; font-weight: 400; color: #333; margin: -0.3rem 0 0 0; padding: 5px 0px 10px 15px;font-family:Open-Sans;}
 .mobile-floating-audio {display:block;float:right;width:35px;}
 .summarysection{font-size:23px;}
 .desktop-dudesays{display:none;}
 .dudesays-poem {display:none;}
 .padding-15 {padding:15px;}
 .sideboxtext {padding:15px;text-align:center;border-radius:25px 25px 0px 0px;margin:-15px;color:#ffffff;font-weight:bold;font-size:20px;}
 .rowflex{
  display:flex;              /* make it flex at all sizes */
  flex-direction:column;     /* stack on mobile */
  align-items:flex-start;
  gap:0rem 0.75rem;
  flex-wrap:nowrap;
 }
 .fixed{ width:100%; flex:0 0 auto; padding-top:15px; }
 .regularpage {position:relative;padding:15px;}
 .regularpage h1 {font-family: Open-Sans; letter-spacing:-1.5px;margin: 0px;font-size:35px !important;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
 .regularpage p {font-family: Open-Sans; padding-left:0px;font-size:18px;}
 .regularpage section {padding-left:0px;}
 .regularpage h2 {font-family: Open-Sans; letter-spacing:-1.5px;font-size:25px;margin:0px;padding:0px;font-weight:bold;}
 h1 {font-family: Open-Sans; letter-spacing:-1.5px;margin: 0px;font-size:35px !important;font-weight:bold;padding-top:0px;padding-left:0px;padding-right:0px;}
 p {font-family: Open-Sans; padding-left:0px;font-size:18px;}
 section {padding-left:0px;}
 h2 {font-family: Open-Sans; letter-spacing:-1.5px;font-size:25px;margin:0px;padding:0px;font-weight:bold;}
 .mainentry {position:relative;}
 .citationbody {padding-top:15px;}
 .desktopspacer {height:0px;display:none;}
  .fixedside.sticky-rail {
    position: static;   /* not sticky */
    top: auto;          /* reset any offset */
  }

:root{
  --step--1: clamp(0.9rem, 0.85rem + 0.5vw, 1rem);
  --step-0:  clamp(1rem, 0.9rem + 0.8vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1rem + 1.2vw, 1.375rem);
  --step-2:  clamp(1.35rem, 1.05rem + 2vw, 1.75rem);
}

body{ font-size: var(--step-0); line-height: 1.5; }
h1{ font-size: var(--step-2); line-height: 1.2; }
h2{ font-size: var(--step-1); line-height: 1.25; }
small, .meta{ font-size: var(--step--1); }

html.hs-locked { overflow:hidden; }
#hs-overlay { position:fixed; inset:0; display:none; background:#d4ba79 !important; z-index:9999; }
#hs-overlay.open { display:block; }
#hs-sheet { position:absolute; inset:0; height:100dvh; max-height:100svh; background:#d4ba79; display:flex; flex-direction:column; }
#hs-results { flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }

.hs-controls{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;}
#hs-q-mobile{flex:1;min-width:0;box-sizing:border-box;}
.hs-close{flex:0 0 auto;width:36px;height:36px;border:0;background:none;font-size:20px;line-height:1;}

 main {margin-top:15px; margin-right:8px; margin-bottom:0px; margin-left:8px; position:relative;}
 h2 {font-weight:bold;font-size:23px !important;margin:0px !important;padding:0px !important;}
 h1 {font-size:35px; font-family:OilvareBase-Regular;letter-spacing:2px;margin-top:0;}

.bullet-list {
  list-style: disc;      /* remove default bullets */
  padding: 0;
  margin-left: 0;
  margin-top: 15px;
  margin-bottom: 25px;
}

.bullet-list li {
  position: relative;    /* establishes a positioning context */
  padding-left:5px !important; font-size:18px;
  margin-bottom:5px; 
  margin-left:45px !important;
  margin-top:0px;
  padding-top:0px;
}

.bullet-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-weight: bold;
  text-shadow: none;
}

 td {font-family:Open-Sans;font-size:18px;}
 input {font-family:Open-Sans;font-size:18px !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 select {font-family:Open-Sans;font-size:18px !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 textarea {font-family:Open-Sans;font-size:18px !important;border-width:1px;border-style:solid;border-color:#666666;border-radius:5px;padding:3px;}
 p {font-size:18px;padding-top:0px;padding-bottom:10px;padding-top:10px;margin: 0 0 1em;font-family:Open-Sans;}

 ul {margin:15px 0px 0px 15px;padding-left:5px;font-size:18px;}
 .line-down-green {font-size:0px;border-width:1px 1px 1px 1px;border-style:solid;border-color:#9fcf67;font-size:0px !important;height:0px;background-color:#9fcf67;border-radius:15px;margin-left:0px;}
 .line-down-brown {font-size:0px;border-width:1px 1px 1px 1px;border-style:solid;border-color:#4d360c;font-size:0px !important;height:0px;background-color:#9fcf67;border-radius:15px;margin-left:0px;}
 .prev-post {font-size:16px;}
 .next-post {font-size:16px;}

 .spacer-5 {font-size:0px;padding-bottom:5px;}
 .spacer-10 {font-size:0px;padding-bottom:10px;}
 .spacer-15 {font-size:0px;padding-bottom:15px;}
 .spacer-20 {font-size:0px;padding-bottom:20px;}
 .spacer-25 {font-size:0px;padding-bottom:25px;}
 .padding50 {padding-left:25px;padding-left:50px;}
 .font35 {font-size:35px !important;font-weight:bold;}
 .font40 {font-size:40px !important;font-weight:bold;}
 .font25 {font-size:25px !important;font-weight:bold;}

 .check-list {
   list-style: none;      /* remove default bullets */
   padding: 0;
   margin: 0;
 }

 .check-list li {
   font-family: Open-Sans; position: relative;    /* establishes a positioning context */
   padding-left:25px;font-size:18px;
   margin-bottom:5px;
   margin-left:5px;
   margin-top:0px;
   padding-top:0px;
 }

 .check-list li::before {
   content: "\2713";
   position: absolute;
   left: 0;
   top: 0;
   color: #000000;
   font-weight: bold;
   text-shadow: none;
 }

 .check-list {
   list-style: none;      /* remove default bullets */
   padding: 0;
   margin: 0;
 }

 .check-list li {
   position: relative;    /* establishes a positioning context */
   padding-left:25px; padding-left:1.83016vw;font-size:18px;font-size:1.31771vw;
   margin-bottom:5px; margin-bottom:0.36603vw;
   margin-left:25px !important; margin-left:1.83016vw !important;
   margin-top:0px;
   padding-top:0px;
 }

 .check-list li::before {
   content: "\2713";
   position: absolute;
   left: 0;
   top: 0;
   color: #000000;
   font-weight: bold;
   text-shadow: none;
 }

 .hamburger {
   width: 30px;
   height: 22px;
   position: relative;
   cursor: pointer;
   display: inline-block;
 }

 .hamburger span {
   background: #4d360c;
   position: absolute;
   height: 4px;
   width: 100%;
   border-radius: 2px;
   left: 0;
   transition: all 0.3s ease-in-out;
 }

 .hamburger span:nth-child(1) { top: 0; }
 .hamburger span:nth-child(2) { top: 9px; }
 .hamburger span:nth-child(3) { top: 18px; }

/* Add these for the "X" state: */
 .hamburger.is-active span:nth-child(1) {
   transform: translateY(9px) rotate(45deg);
 }
 .hamburger.is-active span:nth-child(2) {
   opacity: 0;
 }
 .hamburger.is-active span:nth-child(3) {
   transform: translateY(-9px) rotate(-45deg);
 }
 .faq-question {
   font-size: 1.1rem;
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
 .faq-answer {
   font-size: 1rem;
 }
 .faq-item {
  padding-left:25px;padding-left:1.83016vw; /* Adjust as needed for alignment */
 }

  /* tablet + phone overrides end here */
}
/******************************************************** phone-only styles end here ********************************************/



@media only screen and (max-width: 480px) {
  /* phone-only overrides here */
  /* phone-only overrides end here */
}