body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
background-color: #ecf2f8; /* #ecf2f8*/
font-size:17px;
 
}

@media screen and (max-width: 600px) {
 body {
 font-size: 17px;
}
}


.website-heading {
 background-color: #0d1a26;   /*orig. #204060*/
 overflow: hidden;
 border: solid 1px black;
 color: white;
 text-align: center;
 font-size:17px;
}

@media screen and (max-width: 600px) {
.website-heading {
 font-size: 17px;
}
}

p {
line-height: 1.6; /*1.6*/
}

h3.article-description {
text-align: center;
}

h3.post-description {
text-align:center;
}

div.languages {
text-align: center;
margin-top:10px;
margin-bottom: 50px;
}

h2.title-of-article {
text-align: center;
}

h3.title-of-article-pn {
margin-top: 25px;
margin-bottom: 60px;
text-align: center;
}

h3.title-of-article-pn-n {
margin-top: 25px;
margin-bottom: 40px;
}

h2.title-of-post {
text-align: center;
}

h3.title-of-post-pn {
margin-top: 25px;
margin-bottom: 60px;
text-align: center;
}

h3.title-of-post-pn-n {
margin-top: 25px;
margin-bottom: 40px;
text-align: center;
}

a.link-of-title-of-article-pn {
color: #3333ff; /* #3333ff*/
}

a.link-of-title-of-article-pn-n {
color: #3333ff; /* #3333ff*/
}

a.link-of-title-of-post-pn {
color: #3333ff; /* #3333ff*/
}


a.link-of-title-of-post-pn-n {
color: #3333ff; /* #3333ff*/
}


h3.pn-n-vocab {
margin-top: 30px;
}

h3.pn-n-alt {
margin-top: 40px;
}

h3.pn-n-alt-vocab {
margin-top: 40px;
}


h3.post-description {
text-align: center;
}


a.paragraph {
color: #4d4dff; 
font-weight: bold; 
font-size: 20px; /*20px*/
}

a.sentence {

color:#0000ff;

}

span.audio {
line-height: 1.6; /*1.6*/
}

span.title {
white-space: nowrap;
}



audio {
width: 500px; /*500px*/
}

@media screen and (max-width: 700px) {
  audio {
    width: 350px;
  }

}

div.space-between-audio {
height: 10px;
}



/*Single container*/

div.single-container {
 background-color: white; 
 display: block;
 margin-top: 110px;
 margin-bottom:110px;
 margin-left: 30px;
 margin-right: 135px;
 padding-top:10px;
 padding-bottom:50px;
 padding-left:20px;
 padding-right:20px;

}

@media screen and (max-width: 600px) {

 div.single-container {
  margin: auto;
  width: 80%;
  margin-top: 110px;
  margin-bottom: 110px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
}
}



/*Two containers*/

div.first-container {
 background-color: white; 
 display: block;
 margin-top: 110px;
 margin-bottom:0px;
 margin-left: 30px;
 margin-right: 135px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:20px;
 padding-right:20px;

}

@media screen and (max-width: 600px) {

 div.first-container {
  margin: auto;
  width: 80%;
  margin-top: 110px;
  margin-bottom: 0px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
 
}
}



div.last-container {
 background-color: white;
 display: block;
 margin-top: 110px;     /*-20px Negative values seam content together*/
 margin-bottom: 110px;
 margin-left: 30px;
 margin-right: 135px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:20px;
 padding-right:20px;
}

@media screen and (max-width: 600px) {
div.last-container {
  margin: auto;
  width: 80%;
  margin-top: 110px;
  margin-bottom: 110px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
}
}


/*Add for three or more containers with containers in the middle of first and last*/

div.middle-container {
 background-color: white; 
 display: block;
 margin-top: 110px;
 margin-bottom:0px;
 margin-left: 30px;
 margin-right: 135px;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:20px;
 padding-right:20px;

}

@media screen and (max-width: 600px) {

 div.content-middle {
  margin: auto;
  width: 80%;
  margin-top: 110px;
  margin-bottom: 0px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
 
}
}







/* RESOPONSIVE TOPNAV WITH DROPDOWN*/

.topnav {
  overflow: hidden;
  background-color: #333; /*dark brown*/
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2; /*lightest brown*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.active {
  background-color:  #3333ff; /*#009999 (green-bluish)#04AA6D (brght green) #0000ff (link blue) #555 (darker brown)*/
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9; /*light light brown*/
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555; /* #555 (darker brown) #009999 (green-bluish)*/
  color: white;
}

/*To disengage hover on an "a" element use style="pointer-events:none". Use cursor: auto; for vertical cursor to delete default arrow cursor. Pointer cursor is hand.*/

.dropdown-content a:hover {
  background-color: #ddd; /*light brown*/
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
  }


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*When screen is 600px or more float "about" to right. Had to do this because "about" would float right when screen was 600px or less in the hidden hambuger dropdown menu.*/

@media screen and (min-width: 600px) {
  .topnav a.about {
  float: right;

     
  }
  
}

/*END OF RESPONSIVE TOPNAV WITH DROPDWON*/



/*AUDIO BUTTON*/
/*Note that had to move placement of audio button in cascading stylesheet from the last element on the list to a higher spot so that it would function. Otherwise, successive audio buttons only played same audio. Also, the audio button is of class="play" for javascript to work properly. Also, necessary to style default "button" the same as "button.play" so that when the audio is played, the audio button does not revert to the default button styling while the audio is playing.*/


/*Audio button style*/

button.play {
border-radius:8px; /*8px*/
border: none;
text-decoration: none;
border: solid 1px black;
}

button {
border-radius:8px;
border: none;
text-decoration: none;
border: solid 2px black;
}