@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon&display=swap');

/* loads the font from Google’s CDN :contentReference[oaicite:0]{index=0} */

@keyframes ToGold {
    0% {
      background-color: inherit;    /* start from whatever it was before */
      color: inherit;    /* start from whatever it was before */
      }
    100% {
      background-color: gold;       /* end point */
      color: black; 
      }
    }  

body {
  font-family: 'IM Fell DW Pica', 'IM Fell English', 'IM Fell French Canon', serif !important;
  background: black;
  color: Silver;
  font-size:1.1em
  }

h1, h2 {
  font-family: 'IM Fell English SC', 'IM Fell DW Pica SC', serif !important;
  border-left: 4px solid Brass; 
  padding-left: 10px;
  color: Gold !important;
  font-size: 4em;         

}

h3, h4, h5, h6 {
  font-family:  'IM Fell DW Pica SC', 'IM Fell English SC', serif !important;
  border-left: 4px solid Brass; 
  padding-left: 10px;
  color: Gold !important;
  font-size: 3em;         

}

.sidebar {
  font-family: 'IM Fell DW Pica', serif;
  color: gold; 
  background-color: #001; 
}

.sidebar ul li a {
  color: silver; 
  background-color: #112; 
    
    }

.sidebar ul li a:hover {
    animation: ToGold 0.2s ease-in-out forwards;
    }

.quotes {
  font-family: 'IM Fell French Canon SC', 'IM Fell English SC', 'IM Fell DW Pica SC', !important;
  font-size: 1.1em;         
    /* a bit larger for flourish */
  color: gold;           
  padding: 0.2em 0.4em;     
  border-left: 3px solid Brass; 
    /* subtle “quote bar” */
  margin: 0.3em 0;
  padding: 0.8em 1.2em;
  display: block;           
    /* so it behaves like a blockquote */
  line-height: 1.1;
  background-color: #111;
  letter-spacing: 0.03em;
  }

blockquote {
  font-family: 'IM Fell French Canon SC', 'IM Fell English SC', 'IM Fell DW Pica SC', !important;
  font-size: 1.1em;         
    /* a bit larger for flourish */
  color: silver;           
  padding: 1em 1.1em;     
  border-left: 3px solid Gold; 
    /* subtle “quote bar” */
  margin: 1em 0;
  display: block;           
    /* so it behaves like a blockquote */
  line-height: 1.2;
  background-color: #223;
  background: #223;
  }

code {
  font-family: 'IM Fell French Canon', 'IM Fell English', 'IM Fell DW Pica', !important;
  background: black;
  font-size: 1.1em;         
  color: lime;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}

/* docs/custom.css */

/* Target *all* heading levels inside your Markdown area */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  color: gold !important;
}


table, th, td {
    background-color: black;
    color: silver;
    } 


.responsive-iframe {
    width: 100%;
    height:  100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    position: relative;
    }
.responsive-iframe iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    }

p::first-letter {
  font-size: 2.0em;
  float: left;
  line-height: 1;
  padding-right: 0.1em;
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  30%     { transform: scale(1.05); }
  60%     { transform: scale(0.90); }
    }

summary {
    list-style: none;           /* Removes the triangle in some browsers */
    cursor: pointer;            /* Makes it clear you can click */
    outline: none;              /* Removes default focus outline */
    font-size: 1.5em;
    }

summary::-webkit-details-marker {
    display: none;              /* Removes triangle in webkit browsers */
    }

summary::before {
  content: "🔴";    /* Right-pointing triangle or any emoji */
  display: inline-block;
  margin-right: 0.5em;
  animation: beat 1.7s infinite;
  transform-origin: center;
  }

details[open] > summary::before {
  content: "🔘";    /* Down-pointing triangle or another emoji */
  }

/* Optional: Change emoji on hover */
summary:hover::before {
  content: "⚪️";    /* Pointer emoji on hover */
  }