body {margin: 0; font-family: "Bookman Old Style", Palatino, Georgia, serif; color: black; overflow-x: hidden;} /*overflow-x:hidden; prevents horizontal scrolling*/
.container {margin: 0; left: 0; height: auto; background: #ebf7f7} /*defines style for all elements wrapped inside the class "container"*/
header { margin: 0; top: 0; width: 100%; height: 4em; position: fixed; z-index: 10; background: #C4E290; color: black; } /*higher z-index elements are stacked above lower ones*/ 
header p {position: fixed; top: 1em; left: 1em; margin: 0; padding: 0; font-weight: bold; } /*"header p" stands for "header paragraph," i.e., the Raag Hindustani, (c) Sadhana part." It floats to the left.*/
nav { position: fixed; top: 1em; right: 1em; margin:0; padding-left:2em; padding-bottom: 2em; } /* nav = navigation. this is the menu icon, it floats to the right */
.menu-icon { display: block; } /*rule for menu icon to be displayed by default for mobile screens*/
nav ul { display: none; margin: 0; right: 0; bottom: 0; top: 4em; width: 50%; position: fixed; padding: 0.4em; background: #C4E290; list-style: none; overflow: auto;} /*defining rules for the drop-down menu container */
nav:hover ul { display: block; } /* Show drop-down menu when cursor hovers over or finger taps menu icon */    
nav li { padding: 0.5em; white-space: nowrap;} /*Defines rules for navigation list */

a { color: #3B5213; text-decoration: underline; font-weight: bold; } /*defines rules for hyperlink text */
a:hover { color: #2E7D32; } /*defines rules for hyperlink text when hovering*/
.current { color: #2E7D32; } /*defines rules for currently-opened hyperlink*/
.content {margin-top: 4em; padding-left: 1em; padding-right: 1em; } /*defines rules for main body of text and its positioning on smaller screens*/
.content a {color: #3B5213; } /*defines rules for hyperlink text in main body */
.content a:hover {color: #2E7D32;} /*defines rules for hyperlink text when hovering */
.image{position:relative;margin-left:0;margin-right:auto;max-width:800px;height:auto;font-size:0.8em;padding-bottom:0.5em;text-align:left;overflow:auto;} /*defines rules for images */
.backnext {text-align: right; font-weight: bold; } /*defines rules for back/next buttons text */
audio {width: 10em; display: block; } /*defines rules for audio element */
.myvideo {position: relative; margin-left: 0; margin-right: auto; width: 100%; height: auto; font-size: 0.8em; padding-bottom:0.5em; text-align: left; overflow: hidden; } /*ensures the video container is responsive and centered*/
.myvideo iframe {width: 13em; height: 12em; border: none; } /*explicitly sets the size of the embedded video*/
h1 {font-size: 1.3em;} /*defines rules for heading 1 */
h2 {font-size: 1.1em;} /*defines rules for heading 2 */
h3 {font-size: 1em; font-weight: normal; text-decoration: underline;} /*defines rules for heading 3 */



@media(min-width: 750px) /* Special instructions for in case screen width is over 750px */
{ 
.menu-icon { display: none;}  /*rule for menu icon not to be displayed on larger screens*/
nav ul { display: block; position: fixed; top: 7em; margin-right: 0; width: 23%; background: inherit;} /*defines rules for sidebar navigation container on large screen */
nav li { font-size: 1.2em; padding: 0.5em; } /*defines rules for navigation links */
.content {float: left; position: relative; width: 70%; padding:2em; top: 0; overflow: hidden; }/* defines rules for main body of the text and its positioning on wider screens*/
}

@media(min-width: 1800px) /* Special instructions for in case screen width is over 1800px */
{
nav ul {top: 8em;}
nav li {font-size: 1.4em}
.content {padding-left: 5em; font-size:1.25em; }/* defines rules for main body of the text, its positioning on wider screens, and font size*/
}