/*CSS styles Sheet for Mae Sot Notes about Education */

* {
	font-family: Helvetica, "Courier New";
	font-size: large;
}

h1 {
	font-size: 2.5em;
	text-align: center;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

p {
	font-size: 1em;
}

header {
	background-color: #D3D3D3;
	background-image: url("https://maesotnotes.com/education/images/play_background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	border: 5px solid #000000;
	padding-top: 100px;
	padding-bottom: 0px;
	display: flex;
	flex-flow: row nowrap;
}

main {
	text-align: justify; 
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
	padding-right: 40px;
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(182, 244, 146);
}

article {
	text-align: justify; 
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
	padding-right: 40px;
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(51, 139, 147);
	border-radius: 0px 0px 25px 25px;
}

footer {
	padding: 25px 0px 25px 0px;
	text-align: center;
	border-style: solid;
	border-width: 25px 25px 25px 25px;
	border-color: rgb(51, 139, 147);
	border-radius: 0px 0px 25px 25px;
}

table {
	margin-left: auto; 
	margin-right: auto; 
}

tr {
	text-align: center;
}

button {
	padding: 5px;
	border-radius: 5px;
	color: #000000;
	background-color: rgba(38, 182, 157, .7); 
	border: none; 
	text-align: center;
}

button:hover {
	background-color: rgb(38, 182, 100);
}

/* container for the header information */
.container {
	background-color: rgba(192, 192, 192, 0.7);
	width: 50%;
	padding: 30px 40px 20px 40px;
	margin-left: auto;
	margin-right: auto;
}

/* classes for separating the pages into different sections */
.secViolet {
	background-color: rgba(148, 0, 211, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(148, 0, 211);
}

.secIndigo {
	background-color: rgba(75, 0, 130, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(75, 0, 130);
}

.secBlue {
	background-color: rgba(0, 0, 255, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(0, 0, 255);
}

.secGreen {
	background-color: rgba(0, 255, 0, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(0, 255, 0);
}

.secYellow {
	background-color: rgba(255, 255, 0, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(255, 255, 0);
}

.secOrange {
	background-color: rgba(255, 127, 0, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(255, 127, 0);
}

.secRed {
	background-color: rgba(255, 0, 0, .2);
	border-style: solid;
	border-width: 0px 25px 0px 25px;
	border-color: rgb(255, 0, 0);
}

/*For centering */
.center_stuff { 
	text-align: center;
}

/* centering and leaning for examples */
.example {
 text-align: center;
 font-style: oblique;
 font-weight: bold;
}

/* text padding for sections */ 
.words {
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 30px;
	padding-right: 30px;
}

/* Picture Resizing for Different Devices */  
.imgControl {
	max-width: 100%;
	height: auto;
}

/* Border of maps and other images */ 
.imgBorder {
	border: 2px solid Black;
}

/* navigation bar background settings */ 
.navbar {
  overflow: hidden;
  background-color: rgb(51, 139, 147);
}
		  
/* navigation settings */
.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
		  
/* nav hover settings */
.navbar a:hover, .dropdown:hover .dropbtn  {
  background-color: rgb(32,178,170);
  color: black;
}
		  
/* active webpage */
.navbar a.active {
  background-color: rgb(95,158,160);
  color: white;
}
		  
/* navigation bar dropdown settings */
		  .dropdown {
			  float: left;
			  overflow: hidden;
		  }
		  
.dropdown .dropbtn {
  font-size: 16px;  
  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: rgba(51, 139, 147, .9);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
		  
/* dropdown link settings */ 
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
		  
.dropdown-content a:hover {
  background-color: rgb(32,178,170);
}
		  
/* dropdown hover settings */
.dropdown:hover .dropdown-content {
  display: block;
}