body{
  margin: 0;
}

.hidden{
  display: none;
}

/*
contactImproved
*/

.contact-improved{
  text-align: center;
}

.contact-improved .header{
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 2vw;

}

.contact-improved input{
  font-family: "Roboto", sans-serif;
}

.contact-improved button{
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 1vw;
}

/*NAV BAR SECTION*/

.nav-bar{
  background-color: #98c462;
  margin: 0;
}

.nav-bar .normal{
  text-decoration: none;
  font-size: 1.5vw;
  padding-right: 2vw;
  font-family: "Montserrat", sans-serif;
  color: white;
  transition: color 0.5s;
}

.nav-bar .normal:hover{
  color: black;
}

.nav-bar .first-child{
  margin-left: 45vw;
}

.nav-bar .big{
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 3vw;
  margin: 0;
  padding-left: 2vw;
  color: #648240;
  transition: color 0.5s;
}

.nav-bar .big:hover{
  color: white;
}


/* HOME SECTION */

.home-intro{
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("images/background.jpg");
  height: 35vw;
  background-size: cover;
  background-position: top;
  text-align: center;
}

.home-intro .header{
  margin: 0;
  text-align: center;
  color: white;
  font-size: 4vw;
  font-family: "Roboto", sans-serif;
  padding-top: 4vw;
}

.home-intro .sub-header{
  color: white;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 3vw;
}

.home-intro hr{
  width: 35vw;
  border-bottom: 2px solid white;
}

.home-intro a{
  padding: 0.3vw;
  color: white;
  text-decoration: none;
  background-color: #90ba4c;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  font-family: "Montserrat", sans-serif;
  margin-left: 1vw;
}

.home-intro p{
  margin-top: 13vw;
  color: white;
  font-size: 1.5vw;
  font-family: "Quicksand", sans-serif;
}


/* LOGIN PAGE */

.login{
  text-align: center;
}

.login .header{
  font-size: 3vw;
  font-family: "Quicksand", sans-serif;
}


.login .sub-header{
  font-size: 2vw;
  font-family: "Roboto Mono", sans-serif;
}

.login ul li{
  display: inline;
}

.login .disclaimer{
  font-family: "Roboto Mono", sans-serif;
  font-size: 1.5vw;
  width: 38vw;
  margin-left: auto;
  margin-right: auto;
}

.login-form h1{
  display: inline-block;
  padding-left: 1vw;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5vw;
  margin-bottom: 2vw;
}

.google-link{
  font-size: 2vw;
  font-family: "Roboto";
  font-weight: 600;
  color: purple;
}

/* ERROR PAGE */

.error h1{
  font-family: "Montserrat", sans-serif;
  font-size: 3vw;
  text-align: center;
}

.error p{
  font-family: "Roboto Mono", sans-serif;
  font-size: 1.5vw;
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.error img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/*LOG OUT*/

.logout{
  text-align: center;
}

.logout .header{
  font-size: 3vw;
  text-align: center;
  margin-bottom: 2vw;
  font-family: "Roboto Mono", sans-serif;
}

.logout .sub-header{
  font-size: 2vw;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.logout .first{
  margin-bottom: 5vw;
  display: block;
}

.blog-list h1{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 1.5vw;
}

.blog-list p{
  font-family: "Montserrat", sans-serif;
  font-size: 1vw;
  width: 30vw;
  margin-left: auto;
  margin-right: auto;
}

.blog-list a{
  font-family: "Montserrat", sans-serif;
  font-size: 1vw;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.blog-list .delete-link{
  display: block;
  margin-bottom: 4vw;
  width: 7vw;
}


.logout .sub-paragraph{
  font-family: "Quicksand", sans-serif;
  font-size: 2vw;
}


.logout .logout-link{
  font-family: "Montserrat", sans-serif;
  font-size: 1.5vw;
  padding-bottom: 5vw;
}


/* WRITE SECTION */

.write{
  text-align: center;
}

.write .header{
  font-family: "Roboto Mono", sans-serif;
  font-size: 3vw;
}

.write .sub-header{
  font-family: "Montserrat", sans-serif;
  font-size: 1.5vw;
  margin-bottom: 5vw;
}

.write .title{
  font-family: "Quicksand", sans-serif;
  font-size: 2vw;
}

.write .submit-button{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2vw;
  padding: 0.3vw;
  font-size: 1vw;
  font-family: "Montserrat", sans-serif;
}

.write .input-title{
  padding: 0.3vw;
  font-family: "Montserrat", sans-serif;
}


/* POST SECTION */

.post-header, .post-author, .post-likes{
  margin-left: 5vw;
}

.post-header{
  font-size: 3vw;
  font-family: "Roboto Mono", sans-serif;
  width: 57vw;
  margin-left: 5vw;
}

.post-author{
  font-size: 1.5vw;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.post-likes{
  font-family: "Quicksand", sans-serif;
  font-size: 1.5vw;
}


/*.post-like-button{
  height: 2vw;
  width: 2vw;
  margin-left: 5vw;
  transition: height 0.25s, width 0.5s;
}

.post-like-button:hover{
  cursor: pointer;
  height: 3vw;
  width: 3vw;
}*/

.post-like-form button{
  background-image: url("images/like.png");
  background-size: cover;
  width: 2vw;
  height: 2vw;
  margin-left: 5vw;
  border: none;
  transition: width 0.25s, height 0.25s;
}

.post-like-form button:hover{
  cursor: pointer;
  width: 2.5vw;
  height: 2.5vw;
}


.post-content{
  margin-left: 10vw;
  margin-top: 5vw;
  font-family: "Montserrat", sans-serif;
  font-size: 2vw;
}

/* USER PROFILE SECTION */

.profile-header{
  font-family: "Roboto Mono", sans-serif;
  font-size: 3vw;
  margin-left: 5vw;
  margin-top: 3vw;
}

.profile-name{
  margin-left: 5vw;
  font-family: "Montserrat", sans-serif;
}

.profile-header-two{
  text-align: center;
  font-size: 2.5vw;
  font-family: "Roboto", sans-serif;
  margin-bottom: 5vw;
}

.blog-list-user{
  text-align: center;
}

.blog-list-user h1{
  font-family: "Roboto", sans-serif;
  font-size: 1.7vw;
}

.blog-list-user p{
  font-family: "Montserrat", sans-serif;
  font-size: 1vw;
  width: 30vw;
  margin-left: auto;
  margin-right: auto;
}

.blog-list-user a{
  font-family: "Roboto Mono", sans-serif;
  font-size: 1vw;
  display: block;
  width: 7vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4vw;
}

/* BLOG POST SECTION */



.blog-post-section .header{
  text-align: center;
  font-size: 3.5vw;
  font-family: "Montserrat", sans-serif;
  padding-top: 2.5vw;
  padding-bottom: 2vw;
}

.blog-header{
  font-family: "Roboto Mono", sans-serif;
  font-size: 2.5vw;
  text-align: center;
  width: 50.5vw;
  margin-left: auto;
  margin-right: auto;
}

.blog-content{
  font-family: "Quicksand", sans-serif;
  font-size: 1.5vw;
  width: 50vw;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.blog-link{
  font-family: "Montserrat", sans-serif;
  width: 7vw;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 5vw;
  font-size: 1vw;
}
/*value=<%=status%>><%=status%>*/
.page-selector .header{
  font-size: 2vw;
  text-align: center;
  margin-bottom: 1vw;
  padding-bottom: 1vw;
}

.page-selector form{
  text-align: center;
}

.page-selector input::-webkit-inner-spin-button, .page-selector input::-webkit-outer-spin-button{
  -webkit-appearance: none;
}

.page-selector input{
  width: 2.5vw;
  margin-bottom: 2vw;
}

.last-page-header{
  font-family: "Roboto Mono", sans-serif;
  margin-bottom: 3vw;
}


/*HOTTEST POSTS SECTION */


.hottest-post-section .header{
  font-family: "Montserrat", sans-serif;
  font-size: 4vw;
  text-align: center;
  margin-bottom: 2vw;
}

.top-5{
  text-align: center;
}

.hottest-post-container{
   margin: 0.5vw 2vw;
   color: black;
   background-color: white;
   display: inline-block;
   padding: 0.75vw;
   border-radius: 7px;
   box-shadow: 0px 2px 5px #ccc;
}


.top-5 h1{
  text-align: center;
  font-family: "Roboto Mono", sans-serif;
  font-size: 2.5vw;
  width: 25vw;
  margin-left: auto;
  margin-right: auto;
}

.top-5 p{
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-size: 1.5vw;
  width: 25vw;
  margin-left: auto;
  margin-right: auto;
}

.top-5 a{
  display: block;
  text-align: center;
  width: 7vw;
  margin-left: auto;
  margin-right: auto;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 3vw;
  font-size: 1vw;
}

/* ADMIN PAGE */
.admin-header{
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 7vw;
  text-align: center;
}

.admin-blog-title{
  font-family: "Montserrat", sans-serif;
  font-size: 3vw;
  text-align: center;
}

.admin-blog-cutContent{
  font-family: "Quicksand", sans-serif;
  font-size: 2vw;
  text-align: center;
}

.admin-link{
  display: block;
  width: 5vw;
  margin-left: auto;
  margin-right: auto;
  font-family: "Montserrat", sans-serif;
}

/* CONTACT PAGE */

.contact-header{
  text-align: center;
  font-size: 3vw;
  font-family: "Montserrat", sans-serif;
  padding-top: 5vw;
  margin-bottom: 3vw;
}

.contact-paragraph{
  font-family: "Quicksand", sans-serif;
  font-size: 2vw;
  width: 75vw;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5vw;
}

.contact-text{
  font-family: "Roboto Mono", sans-serif;
  color: #f5ab18;
}

.contact-email{
  text-align: center;
  font-size: 2vw;
  font-family: "Roboto Mono", sans-serif;
}

.contact-hr{
  width: 50vw;
  border-bottom: 2px solid black;
}

/* ABOUT SECTION */

.about-header{
  text-align: center;
  font-family: "Roboto Mono", sans-serif;
  font-size: 3vw;
  margin-top: 5vw;
  margin-bottom: 7vw;
}

.about-sub-header{
  text-align: center;
  font-size: 2.5vw;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.about-paragraph{
  text-align: center;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  font-size: 2vw;
  font-family: "Quicksand", sans-serif;
}

.faq-header{
  text-align: center;
  font-family: "Roboto Mono", sans-serif;
  font-size: 3vw;
  margin-top: 5vw;
}

.faq-table{
  text-align: center;
}

.faq-table h1{
  font-family: "Montserrat", sans-serif;
  font-size: 2vw;
}

.faq-table li{
  font-family: "Quicksand", sans-serif;
  font-size: 1.5vw;
  margin-bottom: 5vw;
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
}

.about-sub-header-last{
  margin-bottom: 4vw;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-size: 3vw;
}