/* <style.css>; */ 


/*_style.css is used as a based css file for all of the pages_*/
/*_footer(navigation), h1 and h2 positions, fonts & colours, hovering and links' colours_*/
/*_use % for font sizes and positions_*/
/*_use px for border, padding and margin_*/
/*_headers >> body >> footer_*/


* { /* borders for all boxes*/
  box-sizing: border-box;
}   
    
/* for headers only */
/* {header_container} is used to for h1 and h2 only */
/* h1 = main title, h2 = subtitle */
.header_container {
  display: block;
  text-align: center;
  white-space: nowrap;
  min-width: max-content;
  max-width: 100vw; 
  margin: 10px auto;
} /* header-container */

h1 { /* for title on each page */
  font-family: 'Truculenta', sans-serif;
  font-weight: 300;
  font-size: 400%;
  color: #415E59;    
  text-align: center;
  display: inline-block;
  margin: 0px; 
  padding: 0px;
}/*_h1_*/

h2 { /* for title of each post or div */
  font-family: 'Truculenta', sans-serif;
  font-weight: 280;
  font-size: 240%;
  color: #667e7a;
  /* color: #6B7E85; */
  /* color: #2D3E5C; */ 
  text-align: center;
  display: inline-block;
  margin: 0px;
  padding: 0px;
}/*_h2_*/

h3 { /* footer overlay */
  display:block;
  font-family: 'Truculenta', sans-serif;
  font-weight: 260;
  font-size: 200%;
  color: #415E59;
  text-decoration: underline;
  text-align: center;
  padding: 10px;
  margin: 10px;
} /*_h3_*/

h4 { /* side bar titles */
  display:block;
  font-family: 'Truculenta', sans-serif;
  font-weight: 260;
  font-size: 180%;
  color: #415E59;
  text-decoration: underline;
  text-align: left;
  padding: 10px;
  margin: 10px;
} /*_h4_*/

h5 { /* page description; under h1 */
  font-family: 'Neucha', cursive;
  font-size: 100%;
  color: #4d5a5e;
  text-align: center;
  margin: -5px;
} /*_h5_*/

h6 { /* for resume section titles */
  font-family: 'Truculenta', sans-serif;
  font-weight: 280;
  font-size: 240%;
  color: black;
  text-align: center;
  text-shadow: 4px 1px 3px #F1D0DE, 4px 1px 10px #180539;
  display: inline-block;
  margin: 0px;
  padding: 0px;
}/*_h6_*/


/*_for body only_*/
body {/*_main content_*/
  background-color: #092834;
  font-family: 'Neucha', cursive;
  font-size: 100%;
  color: #E8ECF1;
  }/*end___mainContent___end*/

/*_no selection function for all the pages_*/
.noSelect {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */     
} /* noSelect */

.centerText { /*start___centerText___start*/
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
} /*end___centerText___end*/

.centerSub { /*start___centerSub___start*/
  position: fixed; 
  text-align: center;
  top: 57%;
  left: 50%;
  transform: translate(-57%, -50%); 
} /*end___centerSub___end*/

/* for posts -- using flexbox*/
.post{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60%;
  margin: 2% auto;
  padding: 1%; 
}

.posts-wrapper {
  display: flex;
  flex-direction: column; /* Stacks posts vertically */
  align-items: center;    /* Centers the posts horizontally */
}

/*_for footer only_*/  
/* footer overlay - see {h3} also*/
footer {/*start___footer___start*/
  display: block;
  font-size: 100%;
  color: #E3D0F1;
  text-align: center;
  position: fixed;
  width: 100%;
  padding: 20px 20px 10px 20px ;/*top,right,bottom,left(nwse)*/
  bottom: 0;
  transition: all 0.3s ease-in-out;
  } /*_footer_*/ 

  footer:hover{
    transform: translateY(1px);
    color: #180539;
  } /*_footer:hoover_*/

  footer:active{
    font-weight: 500;
    text-shadow: #180539;
    transform: translateY(4px)
  } /*_footer:active_*/

.overlay { /*start___overlay___start*/
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #092834;
  opacity: 0.9;
  overflow-x: hidden;
  transition: 0.4s;
}/*end___overlay___end*/

.overlay-content { /*start___overlay-content___start*/
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}/*end___overlay-content___end*/

.overlay a { /*start___overlay-link___start*/
  padding: 8px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}/*end___overlay-link___end*/

.overlay a:hover, .overlay a:focus { /*start___overlay-hover___start*/
  color: #9BA17B;
}/*end___overlay-hover___end*/

.overlay .closebtn { /*start___overlay-close___start*/
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}/*end___overlay-close___end*/


@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}/*end___footer___end*/


/* for overall css */
/* colours for links */
a:link { /*start___link___start*/
  color: #2F4F4F;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  } /*end__link___end*/
  
  a:visited{ /*start___visited___start*/
  color: #C5DCA8;
  text-decoration: none;
  }/*end___visited___end*/
  
  a:hover{/*start___hover___start*/
  color: #9BA17B;
  text-decoration: none;
  transform: translateY(1px)
  }/*end___hover___end*/
  
  a:active{/*start___active___start*/
  color:#415E59;
  text-decoration: none;
  transform: translateY(4px)
  }/*end___active___end*/
  /*end___linkColours___end*/
  /*end___body___end*/