*{
   box-sizing: border-box;
}
body{
   background-image: url(images/floral\ bg.jpg);
   background-size: 500px;
   font-family:Georgia, 'Times New Roman', Times, serif
}
body h1{
   font-family: 'Aref Ruqaa', Georgia;
}
#even-bigger-box{
   height: 85vh;
}
#main-box{
   border: 2px solid rgb(95, 48, 73);
   background-color: rgb(255, 241, 246);
   border-radius: 3px;
   width: 700px;
   height: 95vh;
   margin-left: 20%;
   overflow-y: auto;
}
#chatroom{
   border: 2px solid rgb(95, 48, 73);
   background-color: rgb(255, 249, 251);
   width: 80%;
   height: 80%;
   border-radius: 3px;
   margin-left: 10%;
   margin-bottom: 5px;
   font-family: Arial, Helvetica, sans-serif;
}
#chatroom iframe{
   height: 100%;
}
#header{
   text-align: center;
   background-image: url(images/soft\ floral\ ipad\ wallpaper!!.jpeg);
   background-size: 790px;
   border: 0.5px solid rgb(117, 88, 94);
   padding: 5px;
   margin-bottom: 3px;
}
#header h1{
    font-family: 'Luxurious Roman', 'Courier New';
    color: rgb(252, 240, 243);
    text-shadow: 4px 3px 8px rgb(200, 151, 174), -4px -3px 8px rgb(200, 151, 174);
   }
.navbar ul{
   list-style-type: none;
   background-color: rgb(222, 239, 225);
   border: 2px dashed rgb(46, 88, 59);
   margin: 0px;
   padding: 0px;
   overflow: hidden;
}
.navbar a{
   color: rgb(42, 36, 37);
   text-decoration: none;
   padding: 15px;
   display: block;
   text-align: center;
}
.navbar a:hover{
   background-color: rgb(190, 218, 195);
}
.navbar li{
   float: left;
}



.content{
   border: 1px;
   border-style: solid;
   border-color: rgb(117, 88, 94);;
   background-color: white;
   padding: 5px;
   margin: 5px;
   float: left;
   font-size: 15px;
}
.content h2{
   font-family: 'Aref Ruqaa', Georgia;
   margin-top: 1px;
   color: rgb(141, 97, 116);;
}
#blogs{
   width: 30%;
   margin-left: 20px;
   padding: 10px;
}
#medias{
   width: 30%;
   padding: 10px;
}
#medias span{
   color: rgb(86, 122, 93);
}
#medias p{
   font-size: 14px;
}
#updates{
   width: 32%;
   height: 85%;
   overflow-y: auto;
}
.update-box{
   background-color: rgb(209, 227, 209);
   border: 1px dotted rgb(110, 142, 110);
   border-radius: 8px;
   margin-bottom: 5px;
   margin-left: 3%;
   margin-right: 3%;
   margin-top: 4%;
   padding: 5px;
   font-size: 15px;
   font-family: sans-serif, Arial, Helvetica;
}
.update-box h3{
   margin-bottom: 1px;
   color: rgb(85, 126, 97);
   font-size: 11px;
}
.update-box p{
   font-size: 12px;
   margin: 3.5px;
   color: rgb(58, 35, 43);
}
.blogbutton{
   font-size: 13px;
   margin-right: 10px;
   margin-bottom: 10px;
   border: 1px;
   border-style: solid;
   border-radius: 5px;
   border-color: rgb(117, 88, 94);;
   background-color: rgb(247, 226, 233);
   color: rgb(95, 67, 72);
}
.blogbutton:hover{
   font-size: smaller;
   background-color: rgb(218, 188, 198);
}
#blogs a{
   text-decoration: none;
   text-align: center;
}


.blog-content{
   border: 1px;
   border-style: solid;
   border-color: rgb(117, 88, 94);;
   background-color: white;
   padding: 12px;
   margin: 10px;
   float: left;
   font-size: 15px;
   width: 97%;
}
.content-content h3{
   font-size: 42px;
   margin-bottom: 1px;
}
.blog-content h4{
   color: rgb(117, 120, 117);
   font-size: 15px;
   margin-top: 1px;
}
.blog-content p{
   margin-left: 5%;
   margin-right: 5%;
}

.page-title{
   margin-left: 50px;
}
.page-title h1{
   color: rgb(95, 57, 73);
   margin-bottom: 2px;
}
.page-title p{
   color: rgb(182, 151, 168);
   margin-top: 2px;
}
.page-title span{
   color: rgb(48, 66, 54);
   background-color: rgb(199, 223, 208);
}
.posts{
   border: 1px;
   border-style: solid;
   border-color: rgb(117, 88, 94);
   border-radius: 5px;
   background-color: rgb(250, 244, 246);
   padding: 10px;
   margin: 5px;
   margin-left: 10px;
   margin-right: 10px;
   overflow: hidden;
}
.a-posts{
   text-decoration: none;
}
.posts img{
   width: 100px;
   height: 100px;
   float: left;
}
.post-title{
   color: rgb(49, 65, 54);
   margin-left: 20%;
}
.post-title h3{
   font-family: Georgia, 'Times New Roman', Times, serif;
   margin-bottom: 5px;
}
.post-title p{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: rgb(105, 130, 113);
   margin-top: 1px;
}
.monthly-post{
   border: 1px;
   border-style: solid;
   border-color: rgb(117, 88, 94);
   border-radius: 5px;
   background-color: rgb(250, 244, 246);
   padding: 10px;
   margin: 15px;
}
.sections{
   background-color: rgb(250, 230, 240);
   border: 2px dotted rgb(92, 68, 75);
   border-radius: 5px;
   margin: 10px;
   height: 60%;
   overflow-y: auto;
}
.sections h2{
   margin-left: 30px;
}

#chattable{
   background-color: rgb(244, 221, 231);
   width: 98%;
}

@media screen and (max-width: 600px){
   #main-box{
      width: 95%;
      height: auto;
      margin-left: 3%;
      margin-right: 3%;
      margin-bottom: 5px;
   }
   #header h1{
      font-size: 25px;
   }
   .navbar li{
      font-size: 12px;
      display: inline;
   }
   .navbar a{
      padding: 9px;
   }
   .blogbutton{
      font-size: 13px;
      display: inline;
      margin-right: 4px;
   }
   .content h2{
      font-size: 10x;
      font-weight: 600;
   }
   .content p{
      font-size: 14px;
   }
   .update-box h3{
      font-size: 11px;
   }
   .update-box p{
      font-size: 13px;
   }
   #blogs, #medias, #updates{
      width: 90%;
      height: auto;
      margin-left: 5%;
   }
   #updates{
      max-height: 75%;
      overflow-y: auto;
   }

   .page-title h1{
      font-size: 21px;
   }
   .page-title p{
      font-size: 13px;
      margin-left: 0px;
   }
    .a-posts img{
      width: 75px;
      height: 75px;
   }
   .posts h3{
      font-size: 16px;
   }
   .posts p{
      font-size: 12px;
   }
   .sections h2{
      font-size: 14px;
      margin-bottom: 1.5px;
   }

   .blog-content{
      width: 94%;
      margin-left: 3%;
      margin-right: 3%;
   }
   .blog-content p{
      font-size: 15px;
   }
   #chatroom{
      width: 80%;
      height: 70vh;
   }
}