body {
    background: rgb(204,204,204); 
    width: 21cm;
    height: 29.7cm;
    margin: 0 auto;
  }

  section {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    position: relative;
    width: 21cm;
    height: 29.7cm; 
  }



  @page {
    size: 21cm 29.7cm;
    margin: 0mm;
  }
  .container {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.leftPanel {
width: 27%;
background-color: #484444;
padding: 0.3cm;
display: flex;
flex-direction: column;
align-items:center;
}
.rightPanel {
width: 73%;
padding: 0.7cm;
}
.item {
/* padding-bottom: 0.7cm; */
/* padding-top: 0.7cm; */
}
.item h2{
margin-top: 0;
}
.bottomLineSeparator {
border-bottom: 0.05cm solid white;
}
h2 {
font-family: 'Archivo Narrow', sans-serif;
font-size:large;
font-weight:bolder;
}
.leftPanel h2 {
color: white;
}
img {
width: 4cm;
height: 4cm;
margin-bottom: 0.7cm;
border-radius: 50%;
border: 0.15cm solid white;
object-fit: cover;
object-position: 50% 50%;
}
.details {
width: 100%;
display: flex;
flex-direction: column;
/* margin-top: -10px; */
line-height: 1.11;
}

.leftPanel .smallText, 
.leftPanel .smallText, 
.leftPanel .smallText span, 
.leftPanel .smallText p, 
.smallText a {
font-size: 11pt;
}
.smallText, 
.smallText span, 
.smallText p, 
.smallText a {
font-family: 'Source Sans Pro', sans-serif;
text-align: left;
font-size: 11pt;
}
.contactIcon {
width: 0.5cm;
text-align: center;
}
.leftPanel, 
.leftPanel a {
color: #bebebe;
text-decoration: none;
}

.skill {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.yearsOfExperience {
width: 1.6cm;
display: flex;
flex-direction: row;
justify-content: center;
}
.alignleft {
text-align: left !important;
width: 1cm;
}
.alignright {
text-align: right !important;
width: 0.6cm;
margin-right: 0.1cm
}
.bolded {
font-weight: bold;
}
.white {
color: white;
}

h1 { 
font-family: 'Julius Sans One', sans-serif;
}
h1 { 
font-weight: 300; 
font-size: 1.2cm;
transform:scale(1,1.15); 
margin-bottom: 0.2cm;
margin-top: 0.2cm;
text-transform: uppercase; 
}
h3 {
font-family: 'Open Sans', sans-serif;
}

.workExperience>ul>li ul {
padding-left: 0.5cm;
list-style-type: disc;
}
.workExperience>ul {
list-style-type: none;
padding-left: 0;
}
.workExperience>ul>li {
position: relative;
margin: 0;
padding-bottom: 0.5cm;
padding-left: 0.5cm;
}
.workExperience>ul>li:before {
background-color: #b8abab;
width: 0.05cm;
content: '';
position: absolute;
top: 0.1cm;
bottom: -0.2cm; /* change this after border removal */
left: 0.05cm;
}
.workExperience>ul>li::after {
content: '';
position: absolute;

background-repeat: no-repeat;
background-size: contain;
left: -0.09cm;
top: 0;
width: 0.35cm;
height: 0.35cm;
}
.jobPosition {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.jobPosition span, 
.projectName span {
font-family: 'Source Sans Pro', sans-serif;
}

/* navbar */
body {
    background-color: aliceblue;
    }
    
    nav {
    background-color: white;
    margin: 0.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    
    nav::after {
       content: "";
       display: block;
       clear: both; 
    }
    
    nav ul {
     list-style: none;
     margin: 0;
     padding: 0;   
    }
    
    nav li {
        float: left;
    }
    
    nav a {
        display: block;
        padding: 1rem;
        text-decoration: none;
    }

    li:hover {
        background: white;
    }
    
    
    a, 
    a:visited {
      text-decoration: none;
      color: blue;
    }
    
    a:hover {
      background: darkgray;
    }
    
    a:active {
      color: gray;
    }
   
    
  
    li.contains ul {
        display:none;
    }
    li.contains:hover ul {
       background: white;
       display:block;
       position: absolute;
    }
    li.contains li {
        float: none;
        font-size:medium
    }
    

      nav {
  background: crimson;
  margin: 0px 0px 0px 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  nav::after {
     content: "";
     display: block;
     clear: both; 
  }
  
  nav ul {
   list-style: none;
   margin: 0;
   padding: 0;   
  }
  
  nav li {
      float: left;
  }
  
  nav a {
      /* display: inline-block; */
      padding: 1.25rem 1.75rem;
      text-decoration: none;
  }
  

  li:hover {
      background: rgb(242, 171, 5);
  }
  
  .workExperience li:hover {
    background: none;
}
div ul > li:hover {
    background: none;
}
p a:hover {
    background: none;
}

  a, 
  a:visited {
    text-decoration: none;
    color: white;
  }
  
  a:hover {
    background: rgb(242, 171, 5);
    color:black
    
  }
  
  a:active {
    color: gray;
  }
 
  

  li.contains ul {
      display:none;
  }
  li.contains:hover ul {
     background:crimson;
     display:block;
     position: absolute;
  }
  li.contains li {
      float: none;
      font-size:medium
  }


footer {
    background-color: crimson;
    padding: 1rem;
    /* margin: 150px 0px 0px 0px; */
}
footer a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0px 0px 0px 80px;
    color:white;
    padding: 1rem;
    text-align: center;
   
}