footer {
  text-align: center;
  margin-top: 2em;
  padding: 3px;
  background-color: rgb(161, 214, 255);
  color: rgb(0, 0, 0);
}


/* font name */
h1 {
  font-family: "Arial", "Helvetica", "Verdana", sans-serif;
/*  font-family: 'Times New Roman', Times, serif; /*"Bookman Old Style", serif;*/
  font-size: 50px;
  font-weight: bold;
  margin: 0mm;
}

h2 {
  font-weight: bold;
  color: #0c2577;
  /*	font-variant:small-caps;*/
}


h3 {
  font-size: 100%;
  font-weight: bold;
  margin: 0mm;
}


p {
  line-height: 1.4;
}

body {
  font-family: "Arial", "Helvetica", "Verdana", sans-serif;
	background-color:#ffffff;
	color:#000000;
	letter-spacing: 1px;
  font-size: 20px;
/*  padding-bottom:10em; */ /*This does not work for some reason*/
/*  line-height:140%;*/
/*	margin:0mm;*/
}

table {
  color: #000000;
  vertical-align: top;
}

.research-table {
  border-collapse: separate;
  border-spacing: 0 25px;
}

/* for table class */
.top-aligned {
  width: 100%;
  border-collapse: collapse;
}

.top-aligned td {
  vertical-align: top; /* Align all table cells' content to the top */
}


a:link {
  color: #223366;
}


.shaded {
  background-color: #DFE3EE;
  color: #4A7184;
  padding: 1mm;
}


li {
  margin: 10px 0;
  line-height: 1.4;
}

/* for the top header with name */
div#header {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 1.5em;
}

div#header::after {
  content: "";
  display: block;
  width: 90%; /* shorter line, centered */
  height: 3px;
  background-color: rgb(161, 214, 255);
  margin: 3rem auto 0 auto; /* 1rem gap from NAME, auto centers it */
}


.divider {
  border: none;
  height: 2px;
  background-color: rgb(161, 214, 255);
  margin: 0.5rem 0;
}

/* for rest of header with navigation */
header {
  background-color: inherit;
  /*text-align: center;*/
  /* float: left; */
  border: none;
  outline: none;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ALL FOR THE NAVIATION BUTTONS */

nav {
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;               /* needed for following */
  flex-wrap: wrap; /* allow menu items to wrap on small screens */
  justify-content: center; /* centers the nav links horizontally */
}

nav li {
  display: inline;
  margin-right: 0px;
}


/* Style the navigation links */
nav a {  
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 27px;
  border-bottom: 2px solid transparent;
  /* Add a transparent border by default */
}

/* Style the hovering */
nav a:hover {
  background-color: #ddd;
}

/* Style the active link */
nav a.active {
  background-color: #004684;
  color: white;
  /*  border-bottom-color: #f00; /* Change the border color for the active link */
  /*  font-weight: bold; /* You can also change the font weight or add other styles */
}


/* for the division of the page into two columns without table */

.container {
  display: flex;
  align-items: flex-start;
  /* Align items to the top of the container */
  /* margin: 0px; */
  /* Add some margin around the container */
}


.image-column {
  flex: 0 0 18%;
  /* Set flex-basis to 27% (including margins) */
  margin-top: 10pt;
  margin-right: 3%;
  /* Add 2% right margin */
  margin-left: 6%;
  /* Add 5% left margin */
}

.text-column {
  flex: 0 0 50%;
  /* Set flex-basis to 50% */
}

.text-column-new {
  width: 55%;        /* content takes 60% of the container */
  margin: 10pt auto; /* auto distributes remaining space equally */
}



.image-column-new {
  flex: 0 0 25%;
  /* Set flex-basis to 27% (including margins) */
  margin-top: 10pt;
  margin-right: 3%;
  /* Add 2% right margin */
  margin-left: 15%;
  /* Add 5% left margin */
}


.text-column-home {
  flex: 0 0 42%;
  /* Set flex-basis to 50% -21 */
}


.icons-column {
  flex: 0 0 50%;
  text-align: center;
}


/* to fit the picture in the image-column */
.fit-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ------------- MOBILE --------------- */

/* Mobile overrides */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .text-column-home,
  .text-column-new,
  .icons-column {
    flex: 0 0 auto;
    width: 90%;
    margin: 10pt auto;
  }
  .image-column-new{
    flex: 0 0 auto;
    width: 60%;
    margin: 10pt auto;
  }
}