html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }
  /* Hieronder mag je eigen CSS code */

  body {
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    margin: 0;
    padding: 0;
    display: grid;
  grid-template-columns: 20% 60% 20% ;
  grid-template-rows: 200px 40% 40%;
  }
  
#logo{
  grid-row: 2/3; 
    grid-column: 2/3;   
    text-align: center;
   
    
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
} 

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#email{
    margin-top: 5%;
    grid-row: 3/4; 
    grid-column: 2/3;   
    text-align: center;
    
}

#email :hover{
  background-color: red;
  color: white;

    
}

#instagram {
    margin-top: 5%;
    grid-row: 3/4; 
    grid-column: 2/3;   
    text-align: center;
    color:  rgb(103, 180, 206);
}


a:link {
    color: rgb(103, 180, 206);
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color:  rgb(103, 180, 206);
}

@media only screen and (max-width: 600px) {
    body {
        display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px 40% 40%;
    }

    #logo{
        grid-row: 2/3; 
          grid-column: 1/3;   
          text-align: center;
         
          
          -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
             -moz-animation: fadein 4s; /* Firefox < 16 */
              -ms-animation: fadein 4s; /* Internet Explorer */
               -o-animation: fadein 4s; /* Opera < 12.1 */
                  animation: fadein 4s;
      } 

      #email{
       
        grid-row: 3/4; 
        grid-column: 1/3;   
        text-align: center;
        
    }
    
    #email :hover{
      background-color: red;
      color: white;
    
        
    }
    
    #instagram {
       
        grid-row: 3/4; 
        grid-column: 1/3;   
        text-align: center;
        color:  rgb(103, 180, 206);
    }
}