#banner {
  width: 100%;
  height: 80px;
  background-image: linear-gradient(#6B94B4, #316594);
 }

#banner-content {

  display: grid;
  width: 100%;
  grid-template-columns: 10% 30% 60%;
}

#banner_a  {
  float: left;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding-right: 25px; 
  padding-top: 32px;
  color: white;
  }

  ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding-bottom: 30px;
  }

#logo {
  font-family: "Yanone Kaffeesatz", arial, helvetica, sans-serif; 
  font-size: 36px;
  color:white;
  margin-left: 60%;
  text-shadow: 1px 1px #000000;
  padding-top: 27px;
}
/************************ colom breedte main page!! ***************************/

main {
  display:grid;
  grid-template-columns: 25% 36% 39%;
  font-family: "Calibri";
  font-size: 18px;
}

 
#column_1 {
  background-color: #EFEFEF;
}


/*************************************** Column 2 **************************/



  #nav  {
  display: flex;
  }

#column_2 {
  border-style: solid;
  border-width: 1px;
  border-top-width: 0px;
  border-color: lightgrey;
  padding-left: 4%;
  padding-right: 4%;
}
  

#project_list  {
  margin-left: -40px;
  list-style-type: none;
  list-style-position: outside;
}

article {
  margin-left: 20px;
  margin-right: 20px;
}

#logo_4 {
  width: 5%;
  border-radius: 50%;
}

#bottom {
  background-color: blue;
}


/************************************** Column 3 ****************************/

#column_3 {
  background-color: #EFEFEF;  
}

a {color:#275176;}
    
a:hover {color:red;}

a:visited {color: #275176;}

#social_links   {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 3%;
  margin-top: 20px;
  width: 25px;
}

#connect  {
  color: #fff;
  background-color:#306290;
  font-family: "Yanone Kaffeesatz", arial, helvetica, sans-serif; 
  font-weight: 400; 
  font-size: 19px;
  line-height: 19px;
  padding: 8px;
  text-shadow: 1px 1px 0px rgba(0,0,0,.5);
  text-transform:uppercase;
  
  border-radius: 4px;
  margin-top: 18px;
  margin-left: 3%;
}

#index  {
  color: #fff;
  background-color:#000000;
  font-family: "Yanone Kaffeesatz", arial, helvetica, sans-serif;
  font-size: 13px;
  padding-left: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 4px;
  width: 270px;
  margin-left: 3%;
}

#linkedin_icon  {
  max-width: 40px;
  height: auto;
  object-fit: contain;  
}

#insta_icon   {
  max-width: 40px;
  height: auto;
  object-fit: contain;
}

#gmail_icon   {
 max-width: 40px;
 height: auto;
 object-fit: contain;
 }

#books_li {
  margin-left: 40px;
  font-weight: bold;
}

#main_page  {
  padding-left: 3%;
}

#links_col_3_1  {
  padding-left: 3%;
}

#links_col_3_2  {
  padding-left: 3%;
}



#thankyou_li  {
  margin-left: 40px;
}

#email_li {
  margin-left: 10px;
}

#Chris_sign   {
  max-width: 100%;
  height: auto;
  position: relative;
  bottom: 40px;  
}

#logo_3 {
  max-width: 100%;
  height: auto;
  position:relative;
  right: 10px;
  bottom: 0;
}

/************************    media queries   ************************
/********************************************************************/


@media screen and (max-width: 1570px) {

  #logo   {font-size: 28px}  

  }


@media screen and (max-width: 1250px) {

  #logo   {font-size: 20px}  
  #banner_a    {font-size: 12px}
 
  }

@media screen and (max-width: 700px) {

    
  #connect  {margin-left: 3%;}
    
  #social_links {
      flex-direction: column;  /* Stack the icons vertically */
      margin-left: 20px;   
    }

  #index  {
    width: 80px;
  }


    main {
      display:grid;
      grid-template-columns: 70% 30%;
      font-family: "Calibri";
      font-size: 18px;
    }  
    
  #column_1 {display: none;}

  #column_2 {font-size: 10px;}
  
  #column_3 {font-size: 10px;}  

  }