body {
  background-color: rgb(87, 171, 228);
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: contain;
  background-position: center;
  margin: 0;
}

.navbar { 
  display: flex; 
  justify-content: center; /* This centers the navbar items horizontally */ 
  background-color: navy; 
  position: fixed; 
  top: 0; 
  width: 100%; 
} 
.navbar a { 
  color: white; 
  text-align: center; 
  padding: 16px 25px; 
  text-decoration: none; 
  font-size: 20px; 
}


.navbar a:hover {
  background-color: #ffff66;
  color: black;
}




.heading {
  padding: 16px;
  margin-top: 45px;
  height: 100px; /* Used in this example to enable scrolling */
  margin-bottom: 360px;
}

.body1 {
  display: block;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 60px;
  text-align: center;
  border: none;
  width: 70%;
  }


.body2 {
    
  border: none;
  margin: auto;
  width: 75%;
  padding: 10px;
  height: 900px;

}


.div1 {
  display: block;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 60px;
  text-align: center;
  border: solid black;
  width: 70%;
  background-color: rgba(247,247,214, 0.5)
}

 h1	{ 	
  font-family: "times new roman", arial, courier, sans-serif;
	font-size: 40px;          /* em is recommended by W3C. 1em = default text size 16px. 40px/16 = 2.5em. Pixels/16 = EM */ 
	text-align: center;
	text-decoration:underline; 
	color: black; 
	}

h2	{ 	
  	font-family: "times new roman", arial, courier, sans-serif;
	font-size: 30px;          /* em is recommended by W3C. 1em = default text size 16px. 40px/16 = 2.5em. Pixels/16 = EM */ 
	text-align: center;
	text-decoration: none; 
	color: black; 
	}

  h22	{ 	
  	font-family: "times new roman", arial, courier, sans-serif;
	font-size: 30px;          /* em is recommended by W3C. 1em = default text size 16px. 40px/16 = 2.5em. Pixels/16 = EM */ 
	text-align: center;
	text-decoration: none; 
	color: red; 
	}



p 		{                 
		font-family: "times new roman", arial, courier, sans-serif;
		font-size: 28px;
		color: black;            /* color of text */
		text-align: left; 
		padding-left: 1em; 
    font-weight: bold;
		}


.center { text-align: center; }    /* <p class="center"> */

        
ul li {
text-align:center;
    font-size: 28px;
    list-style-type: none;
    font-weight: bold;
}

ol {
  text-align:left;
  font-size: 28px;
  list-style-type: numbers;
  font-weight: bold;
  padding-left: 90px;
}
.threecol {
  column-count: 3;
  column-rule-style: solid;
}
mark { 
	background-color: #f5f108;
	color: black;
	padding: .5em .5em .5em .5em;  /*top Right Bottom Left */
	border-radius: 25px;
	}


  @media screen and (max-width: 768px) {
    body {
      background-image: none;
      background-color: lightblue;
    }

    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .navbar a { 
      float: left;
      color: white; 
      text-align: center;
      padding: 15px 4px; 
      text-decoration: none; 
      font-size: 15px; 
    }
    
    .navbar a:hover {
      background-color: #ffff66;
      color: black;
    }




  }