body{
    font-family: sans-serif;
    padding: 1rem;  max-width:40rem; margin:auto; background: #E6E6FF;
}

:focus {outline:none;}
::-moz-focus-inner {border:0; }

        /* begin style editor*/
        .styleEditor { background-color: #D1A7A7; margin:1em 0 0 0; border-radius: 3px;
            padding: 8px; display:inline-block;
            position: fixed;
            top: 0;
            left: 10rem;
            right: 0;
            z-index: 999; width:fit-content;
        }

        .styleBtn {
            display:inline-block; box-shadow: 3px 3px 5px darkred;
            background-color: #D4E6F1; border-radius: 3px;
        }

          .fsSmall{ font-size:small; }
          .fsMedium{ font-size:medium; }
          .fsLarge{ font-size:large; }
          .fsXlarge{ font-size:x-large; }
          .fsXxlarge{ font-size:xx-large; }

          .editMode{
            font-size:2.2rem; color: orange;
            padding:3rem 0 1rem 2rem;
            background-color: darkblue;
          }
        /* end style editor*/


* {
  border-radius: 5px;
}

    p {
        margin:auto;
        margin-top:.75rem;
    }

    div {
        margin:auto;
    }

   .fake-button {
       background-color: #E9E9ED;
       border-style:solid; border-width:thin; border-radius: 5px;
       box-shadow: 1px 1px; padding: 0 1ex 0 1ex; font-size: 0.85em;

   }

  .fake-button:hover {
       background-color: lightblue;
        border-radius: 5px; box-shadow: 3px 3px gray;

   }

   /*  for <button> class="hltBtn"  */
   .hlBtn {border-radius:5px;}

   .hlBtn:hover {
       background-color:lightblue;  border-radius: 5px;
   }

  h1   {
       color: maroon;
       margin-left: 40px;


       }

    #unit {
        font-weight:bold;
        font-size: .8rem;
        padding:.5rem .7rem .1rem .7rem;
        text-align: right;
        color:blue;
    }

    #title {
    background:black;
    color:white;
    padding: 1rem;
    text-align:center;
    box-shadow: 2px 2px 3px darkblue;

    }

    #mainTitle{
    font-weight: bold;
    font-size:1.3rem;
   text-align:center;
    }
    #subTitle {
        font-size:.9rem;
    }

    #gettingStartedTitle{
        background-color: #E6E6FF;
        padding:.4rem;
        margin-top: .6rem;
        font-weight: bold; font-size:1.1rem;
        box-shadow: 2px 2px 3px darkblue;

    }

    #gettingStarted{
        background-color: #E6E6FF;
        font-weight: initial;
        font-size:.9rem;

    }


 /* the container for MAIN article*/
  #container {
    display: block;
    box-shadow: 0 0 3px gray;
    background:white;
    padding: 1ex 3ex 1ex 1.3rem;
     font-size:1.1rem;
  }

/*set column1/2 for desktop*/
  .column1 {
    display:block;
    width:100%;
    max-width: 35em;
    line-height: 1.3;
  }
/*set column1/2 for small browser
  @media screen and (max-width: 580px) {
    .column1, .column2 {
      width: 100%;
    }
  }
 end Main Article 2 columns*/

    #compQsTitle, #discussQsTitle{
        padding:1ex;
        background-color:#151D90;
        color:white; font-weight: bold;
        box-shadow: 1px 1px 3px black;
        margin: .3rem auto;
    }

    #compQs, #discussQs {
        line-height: 1.3;
    }

    li {
        padding: 0 0 .6rem 0; font-size:1.1rem;
    }

    .zimage{
		 display:block; margin:auto; width:100%;
	}




	/* Layout for the auxiliary links */
    #menu-links {
        background:#EDFBFF;
        box-shadow: 0 0 4px 0 #B8B8B8;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 15px; /* Grid spacing between items */
        scroll-margin-top:6rem;
        padding: .6rem;
    }

    /* Styling for individual secondary links */
    #menu-links a {
        color: #555555;
        text-decoration: none;
        font-size: .92rem;
        transition: color 0.2s ease;
    }

    #menu-links a:hover {
        color: #007bff;
        text-decoration: underline;
    }

    /* Adds modern CSS separators instead of manual "|" vertical pipes */
    #menu-links a:not(:last-child)::after {
        content: "|";
        color: #cccccc;
        margin-left: 15px;
        pointer-events: none; /* Prevents the pipe from being clickable */
    }


    #toBottomMenu {
        font-size:85%;
       text-align:right;
       margin:1rem;
    }


#compQs {
    display:none;
}

#discussQs {
    display:none;
}



    .audio-player {
        background: #E6E6FF;
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        padding-top:.3rem;
    }
    /* Optional: add some style to the audio controls */
    audio {
        width: 100%;
        max-width: 300px;
        height: 40px;
        pointer-events: none;
    }

    #column1 div {
        margin-top:1rem;
    }

    b {font-size:95%;}