/**/
    @font-face { font-family: 'Glegoo'; src: url('fonts\\Glegoo\\Glegoo-Regular.ttf'); }
    @font-face { font-family: 'GlegooBold'; src: url('fonts\\Glegoo\\Glegoo-Bold.ttf'); }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body, html { font-family: 'Glegoo', serif; line-height: 1.6; height:100vh; overflow: auto; scroll-behavior: smooth;color: #000;}
    a {text-decoration: none;color: #000; background-color: #fff;}
    a:hover {color: #fff; background-color: #000;}
   
    textarea, input { font-family: 'Glegoo', serif; color:#000;}
    textarea {height: calc(1.5em * 3); overflow-y: auto; resize: vertical; padding:0.5rem;}
    input {padding:0.5rem;}
    p, a, input, textarea {line-height:1.8; }
    p {text-align: justify;}
   
    /* Fixed Navigation Header */
    header { background-color: #fff; position: fixed; margin: 0 auto; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid #CCC;}
    .sticky-menu { padding: 0; }
    /* Navigation container split in two columns */
    .nav-container { max-width: 1200px; margin: 1rem auto; display: flex; justify-content: space-between; align-items: center; }
    .nav-left { text-align: left;  }
    .nav-right { flex: 1; text-align: right; font-size: 80%;}
    .nav-right ul { list-style: none; display: inline-flex; gap: 15px; }

    /* Main content is padded to avoid being hidden under the fixed header */
    main { padding-top: 5rem; min-height: 100%;
  display: flex;
  flex-direction: column;}
   
    .section { display:block; position:relative; padding:5rem 0rem; }
    .container { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; flex-wrap: wrap; ;}
    .column { flex: 1; padding: 1.3rem;}
   
    /* All other section images will appear above the fixed home image */
    .section:not(#home) img { position: relative; z-index: 2; max-width: 100%; height: auto; border-radius: 4px; /* unchanged */ }

    button { width:100%; margin-top: 0.9rem; padding: 0.6rem; border: 1px solid #000; background-color: #fff; color: #000; font-size: 1rem; 
      cursor: pointer; border-radius: 4px; }
    button:hover { background-color: #000; color:#fff;}
    
    #contact { padding-bottom: 12.5rem; }
    /* Footer Styling */
    footer { background-color: #fff; color: #000; text-align: center; padding: 1.3rem 0; font-size: 14px; border-top: 1px solid #ccc;}
   
    .fontSmaller {font-size:80%;}
    .fontBigger {font-size: 150%; line-height:1.8;}

    .pushOutBottom03 {margin-bottom:0.3rem;}
    .pushOutBottom1 {margin-bottom:1rem;}
    .pushOutBottom2 {margin-bottom:2rem;}
    .pushOutBottom4 {margin-bottom:4rem;}
        
    .displayNone {display:none;}
    .visibilityHidden {visibility: hidden;}
    .displayBlock {display:block; position: relative;}
    .displayFlexLeft {display: flex; align-items: center; gap: 1em;}
    .displayFlexLeftTop {display: flex; align-items: top;}
    .displayFlexCenter {display: flex; justify-content: center; align-items: center;}
    .displayFlexVertical { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em; }
    .displayFlexMargins {display: flex; justify-content: space-between; align-items: center; width: 100%;}

    .displayGrid {display: grid; max-width:1200px; grid-template-columns: 400px 1fr; align-items: start; margin:0 auto;}
    .displayGrid2Cols {display: grid; grid-template-columns: 1em 1fr; gap: 1em;}
    .displayGrid3 {display: grid; grid-template-columns: 3em 1fr; gap: 1em;}
    .displayGrid2 {display: grid; max-width:1200px; grid-template-columns: 600px 1fr; align-items: start; } 

    .stickySectionHeader {position:sticky; top: 12rem; padding-right:1rem;}

    /* Used in HOME page for overlapping pictures  */
    .imgFixedSize {min-height:500px; min-width: 500px;}

    /* Used only for blog 2010  */
    .divBackground { background-image: url('tile-learning.gif'); background-repeat: repeat-x; background-position: top left; background-size: auto; 
      width: 100%; height: 100px; }
    .smallerContent {font-size: 80%; border:1px solid black; padding:0.5rem; }
    .headerStory {color: #663300; font-weight: bold;}
    .headerExample {color: #FF7F00; font-weight: bold;}

    .forContact {width:100%;border:1px solid #444; }
    .forShadow {width:100%;overflow-y: none;}

    .cartoonSize {height:400px;} 
    

    .hatchingBkg {background-image: linear-gradient(45deg, #d2d2d2 4.55%, #ffffff 4.55%, #ffffff 50%, #d2d2d2 50%, #d2d2d2 54.55%, #ffffff 54.55%, #ffffff 100%);
background-size: 15.56px 15.56px;}
    #A-theThanx, #A-contactFormShadow {position:absolute; top:0; left:0;} /**/

    .tagAppearance {animation:slideFromRight 0.6s 1;}
      @keyframes slideFromRight { 0% {transform: translateX(25px); opacity:0;} 100% {transform: translateX(0); opacity:1;}}

    .tagDisappearance {animation:slideToRight 0.6s 1;}
      @keyframes slideToRight { 0% {transform: translateX(0); opacity:1; } 100% {transform: translateX(25px); opacity:0; }}

    /* Responsive Design */
    @media (max-width: 768px) 
    {
      .nav-container { flex-direction: column; text-align: center; }
      .nav-left, .nav-right { flex: none; width: 100%; }
      .container { flex-direction: column; text-align: center; }
      .column { padding: 0.6rem; }
    }