/* Sidebar properties */
.wrapper .sidebar{
    max-width: 100%;
    background: linear-gradient(to right, #FFFFFF 0%, #FAFAFA 2%, #FAFAFA 98%, #FFFFFF 100%); /* fade effect sidebar background colour */
    font-size: 1em;
    overflow-y: auto; /* Enable vertical scrolling */  
}

.wrapper .sidebar p {
    max-width: 80%; /* Set the maximum width of the <p> element (i.e. short description) to 80% of the parent <div> */
    margin: 0 auto; /* Center the <p> element within the <div> */
}

div.sidebar nav ul{
  font-family:'Helvetica', 'Arial', 'Sans-Serif';
  padding: 0pt;
  list-style: none;
  font-weight: bold;
  margin-top: 1em;
}
 
div.sidebar nav ul li {
    display: block;
    margin-bottom: 1.5em;
 }

/* Links */
a {
    text-decoration: none;
    color: #0000FF;
}

/* Headings */
h1 {
    font-size: 22pt;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}

h2 {
    font-size: 18pt;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}

h3 {
    font-size: 16pt;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}

/* Paragraph */
p {
    font-size: 16pt;
    line-height: 1.1em;
    color: #333;
}   

/* lists */
ul {
    font-size: 16pt;
    line-height: 1.1em;
    color: #333;
}

/* Profile picture properties */ 
.profile {
    margin-bottom: 20pt;
    max-width: 250px;
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

/* Social accounts */   
 .social li {
    display: inline;
    margin-right: 10pt;
    padding-top: 20pt;
 }
    
.social lu {
    display: block;
}

/* Page layout for devices with large screen */
@media only screen and (min-width: 1000px) { 
    
    /* Affects the entire page */
    body {
        margin: 50pt auto;
        width: 80%;
        max-width: 1200px;
        font-size: 14pt;
    }

    /* Sidebar only */
    .wrapper .sidebar{
        margin: -50pt auto; 
        width: 300pt; 
        height: calc(100vh - 70px);
        padding: 50pt 0pt 20pt; /* Space around sidebar */
        position: fixed;     
    }
    
    /* Affects content */
    .wrapper .container {
        margin-left: 400pt; /* left margin with sidebar */
    }
    
}

/* Page layout for small screen devices */ 
@media only screen and (max-width: 1000px) { 
    
    body {
      margin: 20pt auto;
      width: 90%;
      font-size: 14pt;
    }
  
     /* Sidebar only */
    .wrapper .sidebar{
        margin: -20pt auto 20pt;  
        height: 100%;
        padding: 20pt 0pt 0pt; /* Space around sidebar */
        position: static;    
    }

    .social {
        border-bottom: 2pt solid #d5d5d5;
        margin-bottom: 20pt;
    }

}