/*Stijlblad voor Project Goldy Robotics website*/

body{
    background-image: url("Images/GoldyRobotics_Project_Plastic_Final6.png");
    background-position: center;
    background-size: cover;
    background-position-y: 3%;
    }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /*Verbergt de tekst zo dra het uit de tekst vak vloeit*/
    background-color: #333;

    /*Positie vast zetten op de top van het scherm*/
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Verandert het kleur van de link wanneer er word op gehovered */
  li a:hover {
    background-color: #111;
  }

  /*Verandert het kleur voor de active pagina*/
  .active {
    background-color: #ff9100;
  }

 /* Voegt een grijze rand/devisie to per knop */
 li {
    border-right: 1px solid #bbb;
  }

  div.polaroid {
    width: 750px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
  }

  /*Dit is voor de projecten zelf*/
  div.polaroid_projects {
    width: 1200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    text-indent: 20px; /*Plaats tussen text en linkse rand*/
    h4 {
      line-height: 0.8;
    }
  }

  /*Dit is voor de lijst van projecten en niet de apparte projecten*/
  div.projects {
    margin-top: 3%;
    background: #ffffff;
    width: 70%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

 div.titel {
    font-family: "Lucida Console";
    background-color: #ff9100;
    border: 1px solid #ff9100;
    h2, h3 {
      text-align: center;
      color: #ffffff;
    }
 }
  
  div.gallery {
    background-color: #ffffff;
    border: 4px solid #333;
  }
  
  div.gallery:hover {
    background-color: #ffffff;
    border: 4px solid #ff9100;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: left;
    font-family: "Lucida Console";
    font-weight: bold;
    font-size: 150%;
  }
  
  * { 
    box-sizing: border-box;
    text-decoration: none; /*Dit bewerkt de links onder foto's (verwijdert de lijn)*/
    color: rgb(0, 0, 0);
  }
  
  .responsive {
    padding: 6px 6px;
    float: left;
    width: 50%;
  }