@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    box-sizing: border-box;
    max-width: 70ch;
    margin: auto;
    line-height: 1.4;

    background-color: #303030;
    font-family: 'Fira Code', monospace;
    font-size: clamp(1rem, 0.5rem + 1.5vw, 1.125rem); /* Scales smoothly from 16px to 18px */

    /* Use a clean, soft off-white or light gray for general body text */
    color: #e0e0e0;
    counter-reset: h2-count h3-count;
}
h2 {
    counter-increment: h2-count;
    counter-reset: h3-count;
}
h2::before { content: counter(h2-count) ". "; }
h3 { counter-increment: h3-count; }
h3::before { content: counter(h2-count) "." counter(h3-count) " "; }

h1, strong { color: #FFD800; /* Sunglow */ }
h2, h3     { color: #C1FE1A; /* chartreuse */ }
a          { color: #A4D8FF /* Icy Blue */ }


input, textarea, button, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a:hover { color: #84cc16; text-decoration: underline; font-weight:bold; }

a:link, a:visited { text-decoration: none; font-weight: bold; }
a:hover { color: #ffd800; text-decoration: underline; font-weight: bold; }

.bordered-div {
    border-width: 3px;
    border-style: solid;
    border-color: #ale355;
    border-radius: 5px;
    padding: 10px 5px 20px 50px;
    box-sizing: border-box; /* Includes border and padding in dimensions */
}

.fruit-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

hr {
  border: none;
  height: 1px;
  background-color: #e0e0e0;
  width: 25%;                 /* Spans only a quarter of the width */
  margin: 3rem auto;          /* Centered automatically with generous spacing */
  opacity: 0.4;
}