body {
	background-color:#b5cbd7; 
	text-align:center; 
	font: 28px 'Lucida Sans Unicode'; 
	color:#22436a;
 }
h1 {
	font: 28px;
 }
ol {
	text-align: center;
	list-style-position: inside;
 }
li { 
	margin: 15px auto;
	text-align:left; 
	width: 30%;
	background-color : #8baec1; 
	padding: 8px 13px;
	border-radius: 4px;
 }
input[type="text"], textarea {
	background-color : #d0dff0;
	color:#22436a;
	text-align:center;
	width: 180px;
	height: 15px;
	padding: 15px 32px;
  	font-size: 16px;
  	border-radius: 5px;
 }
button {
  background-color: #476f85; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  -webkit-transition-duration: 0.2s; /* Safari */
 transition-duration: 0.2s;
  }
 button:hover {
  background-color: #2d4553; 
  }
 ::placeholder { 
	color: #22436a;
	opacity: 1; 
 }
.container {
	width 30%;
 }

  /* Modal box */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: #b5cbd7;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 45%;
  border-radius: 7px; 
}

.close {
  color: #22436a;
  float: right;
  font-size: 32px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}