body {
background: whitesmoke; ;
font-family : arial , sans serif ; 
}

/* Default Light Mode Styles */
 .light-mode {
            background-color: whitesmoke;
            h1{ color: dodgerblue;}
				p , pre , ul , a {color: #444}
             }



.dark-mode {
            background-color: #303030;
            h1 , h2 { color: gold;}
				p , ul , a {color: #eee}}

ul {list-style: none; padding:0 10px}

div.main-exp {

 p  {
font-size: 1.25rem;
line-height: 1.6875rem  ;
padding: 0 0;}


h1 {font-size:1.5rem;color: #1e90ff; text-align:left; }
h2 {font-size: 1.25rem;color: #1e90ff; text-align:left;  text-indent:.75rem}
h3 {font-size:1.25rem;color: #1e90ff ; text-align:left; text-indent: 1.25rem}
pre {
background: #c0c0c0; 
display: block; 
padding: 1dvw 5dvw; 
box-shadow: 1px 2px 8px #444}

pre {
font-size: clamp(1rem,  1rem + .25dvw  , 1.25rem);
line-height: clamp(1.2rem,  1.2rem + .25dvw  , 1.375rem);
white-space: pre-wrap;
max-width: 100ch;
}


}

div.main-exp {
  background:transparent;
 width: 80dvw;
padding: 0 5dvw;
  height: 450px; /* If changed adjust height of #myiframe in navbar1.css */
  border:none;
  overflow-y: scroll; /* Add the ability to scroll */
float:left;
overscroll-behavior: contain;
}

/* Hide scrollbar for Chrome, Safari and Opera */
div.main-exp::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
div.main-exp {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#theme-toggle {
		font-family :wingdings;
      font-size: 1.5rem;
      border: none;
      cursor: pointer;
      background:transparent;
      transition: background-color 0.3s;
        }
#theme-toggle:hover {
      background:transparent;
		text-shadow: 1px 1px 4px #ffff00}