body,
html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif;
  font-family: "Aref Ruqaa";
  background: url(washi_new_blue.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* NAV bar */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.6em;
  margin: 0;
  }

.push {
  margin-left: auto;
  
  }

@media only screen and (max-width: 900px) {
  .main-nav {
    font-size: 0.4em;
    padding: 0;
  }
}

.zone {
   /* padding:30px 50px; 
    margin:40px 60px; */
    cursor:pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.4s linear;
  }

   
.blue {
          
    background: rgba(179,199,239,1);
    background: -moz-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,199,239,1)), color-stop(25%, rgba(36,115,235,1)), color-stop(74%, rgba(36,115,235,1)), color-stop(100%, rgba(188,206,240,1)));
    background: -webkit-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -o-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: -ms-linear-gradient(top, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    background: linear-gradient(to bottom, rgba(179,199,239,1) 0%, rgba(36,115,235,1) 25%, rgba(36,115,235,1) 74%, rgba(188,206,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3c7ef', endColorstr='#bccef0', GradientType=0 );
}


li {
  padding: 20px;
}

a {
  color: #f5f5f6;
  
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;

}



.container {
	display: flex;
	justify-content: center;
}

.text-title {
	font-family: "Aref Ruqaa";
	font-size: 2rem;
	text-align: center;
	color: blue;

}

h1 {
	text-align: center;
	font-size: 3rem;
	color: #e2dbdb;
}

img {
    align-self: baseline;
    margin: 5px;
}

.img-wrap1 { 
    margin: 0 0 0 10px; 
    text-align: justify;
    font-family: "Aref Ruqaa";
    font-size: 20px;
    font-weight: bold;
    color: darkblue;
}

.img-container {
    max-width: 1500px;
    display: flex;
}

.subtopic {
  text-align: left;
  color: blue;
  font-family: "Aref Ruqaa";
  font-size: 25px;
}

.buffer {
  height: 2rem;
}

.raw-text {
  font-family: "Aref Ruqaa";
  text-align: justify;
  color: darkblue;
  font-size: 20px;
  font-weight: bold;
}