/* Style the body */
body {
  font-family: Roboto, sans-serif;
  margin: 0;
}

div {
    /* width: 100%; */
    width: 1460px;
    text-align: justify;
    margin: 0 auto;
    color:#000000;
}

/* Header/logo Title */
.header {
  padding: 100px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

.title-section {
    font-size: 15px;
}

.body-section {
    font-size: 11px;
}

.author-section {
    font-size: 12px;
}
/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #333333;
  color: #ffffff;
}

/* CV */
dl.cv { 
margin: 1em; 
padding: 0;
}

dl.cv dt { 
position: relative;
top: 1.25em;
width: 12em;
margin: 0;
font-weight: bold;
font-style: italic;
}

dl.cv dd {
margin: 0 0 0 14em;
padding: 0;
}

ul.cv {
list-style-type: disc; 
margin: 0em;
}

dl.cvtop {
margin: 1em; 
padding: 0;
}

dl.cvtop dt {
position: relative;
top: 1.25em;
width: 12em;
margin: 0;
font-weight: bold;
}

dl.cvtop dd {
margin: 0 0 0 14em;
padding: 0;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #dc143c;
  color: red;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: center;
  color: #ffffff;
  text-align: center;
  padding: 15% 8%;
  text-decoration: none;
  font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #444444;
  color: #ffffff;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #333333;
  color: #ffffff;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}


/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  background-color: #d3d3d3;
  color: #000000;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
  background-color: #ffffff;
  color: #000000;
  padding: 20px;
}

.column1 {
  float: left;
  width: 25%;
}


.column2 {
  float: right;
  width: 75%;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}