@import url('https://fonts.googleapis.com/css?family=Kite+One&display=swap');

:root {
  --white-colour: #fff;
  --light-colour: #7AA8C9;
  --med-colour: #5884A2;
  --dark-colour: #325268; 
}

html,body{
    padding: 0;
    margin: 0;
	position:relative;
    min-height: 100vh;
	font-family: 'Verdana', sans-serif;
}
/* -------- SCROLL BARS  --------  */

::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #325268; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #5884A2; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #325268;
}
/* -------- End SCROLL BARS  --------  */


#page-container {
  position: relative;
  min-height: calc(100vh - 8rem);
  overflow:hidden;
 
}

header {
	position:relative;
	overflow: hidden;
	background-color:var(--light-colour);
	padding: 5px 10px;
	text-align:center;
	margin-bottom:20px;

}


.email-contact-img {
width:130px;
height:auto
}

.pl-main {
max-width: 900px;
font-size:1em;
margin:0px auto;
padding:10px;
}

.pl-subject {
   font-size:30px;
  width:100%;
  background-color:#7AA8C9;
  padding:5px 20px;
  border-radius:50px;  
  font-family: 'Kite One', sans-serif;	
    text-align:center;
}

.pl-subject-title {
   font-size:20px;
  width:100%;
  background-color:var(--dark-colour);
  padding:5px 20px;
  border-radius:50px;  
  font-family: 'Kite One', sans-serif;
  color:var(--white-colour);
  padding-bottom:5px;
}

.subject {
  font-size:30px;
  width:100%;
  background-color:#7AA8C9;
  padding:5px 20px;
  border-radius:50px;  
  font-family: 'Kite One', sans-serif;	

}
/*---------------small links--------------------*/
.pl-small-link a {
  background-color:var(--med-colour);
  padding:2px 6px;
  border-radius:6px;  
  font-family: 'Kite One', sans-serif;
  text-decoration:none;
 color:var(--white-colour);
 }

.pl-small-link a:hover{
 background-color:var(--dark-colour);
 color:var(--white-colour);
}

/*---------------end small links-----------------*/

.pl-main .subject .subject-a {
text-decoration:none;
float:right;
padding-right:25px;
color:var(--white-colour);
}

.pl-main .subject a:hover {
color:var(--dark-colour);
text-decoration:underline;
}

.pl-p-first-letter::first-letter  {
		padding:2px 5px;
		background-color:var(--dark-colour);
		font-size: 150%;
		color:var(--white-colour);
		border-radius:4px;
		}



.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem;            /* Footer height */
  background-color:var(--med-colour);
  padding:20px 0px;
  text-align:center;
 }

.footer a{
text-decoration:none;
color:#000;
}