body{box-sizing: border-box; margin: 0; padding: 0; font-size: 1vw; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","????", STXihei, "????", sans-serif; text-decoration: none; background-image: linear-gradient(25deg, grey,green, red, yellow, blue, aqua, aquamarine);}
html{scroll-behavior: smooth;}

/* grid */
#content{display: grid; max-width: 100vw; max-height: 100%; margin: 0 auto; grid-template-columns: repeat(12, 1fr);grid-auto-rows: minmax(2vw auto); grid-gap: 0.5vw; position:relative; }
#content > *{background-image:linear-gradient(125deg, lightgrey, skyblue, ivory); scroll-snap-type:y mandatory;scroll-snap-align: start;}
#nav{grid-column: 1/13;grid-row:1/2}
header{grid-column:1/13; grid-row:2/3;}
section{grid-column:1/13; grid-row:3/4}
main{grid-column:1/13; grid-row: 4/5;}
aside{grid-column:1/13; grid-row:5/6;}
footer{grid-column:1/13; grid-row:6/7;}

/* navigation> */
.navbar{display: flex; flex-flow:row nowrap; justify-content:  space-between;margin: 1vw 2vw;list-style-type: none; font-size:2vw; font-weight:500;}
li:hover{transform: scale(1.2); color: red;}
/* header */
.intro-1{display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
.text-1 {position: relative; top: 0; margin: 0 auto; font-weight: bold; text-align: center; font-size: 3vw; color: black; z-index: 10; text-shadow: -0.2vw -0.2vw darkcyan;}
.text-1{font-weight: bold; text-align: center; font-size: calc(2 * 2vw); text-transform: uppercase; letter-spacing: calc(0.5 * 1vw);  overflow: hidden; background: linear-gradient(90deg, burlywood, #fff, darkred); background-repeat: no-repeat;  background-size: 80%; animation: animate 9s linear infinite; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0);}
@keyframes animate { 
0% {background-position: -400%;}
100% {background-position: 400%;}
} 

.name{display: grid; grid-template-columns: 50vw 50vw;}
/* header - text flikkering */
.name .sub {font-size: 8vw; line-height: 0.1; text-shadow: 0 0 0.5vw #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; font-family: "Sacramento", cursive; text-align: center; animation: blink 6s infinite; -webkit-animation: blink 6s infinite;}
span{text-align: center; font: italic bold 3vw/3vw Helvetica, sans-serif;}
@-webkit-keyframes blink {
  20%, 24%, 55% {color: #111; text-shadow: none;}
  0%, 19%, 21%, 23%, 25%, 54%,  56%,  100% {text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; }
  }
@-moz-keyframes blink {
    20%, 24%, 55% {color: #111; text-shadow: none;}
    0%, 19%, 21%, 23%, 25%, 54%,  56%,  100% {text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; }
    }
@keyframes blink {
  20%, 24%, 55% {color: #111; text-shadow: none;}
  0%, 19%, 21%, 23%, 25%, 54%,  56%,  100% {text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; color: #fff6a9; }
  }
  /* feniks foto animatie */
  .name img{grid-column: 1/13; grid-row: 2/3; margin: 0vw auto;filter: hue-rotate(240deg);border-radius: 25%;animation: change 6s infinite; -webkit-animation:change 6s infinite}
  @-webkit-keyframes change {
    20%, 24%, 55% {color: #111; filter: hue-rotate(0deg) drop-shadow(0.5vw 0.5vw 0.5vw red); }
    0%, 19%, 21%, 23%, 25% {color: grey; filter: hue-rotate(180deg) drop-shadow(1vw 1vw 1vw blue);}
    54%,  56%,  100% {color: skyblue; filter: hue-rotate(360deg) drop-shadow(1.6vw 1.6vw 1vw black);}
    }
  @-moz-keyframes change {
    20%, 24%, 55% {color: #111; filter: hue-rotate(0deg) drop-shadow(0.5vw 0.5vw 0.5vw red); }
    0%, 19%, 21%, 23%, 25% {color: grey; filter: hue-rotate(180deg) drop-shadow(1vw 1vw 1vw blue);}
    54%,  56%,  100% {color: skyblue; filter: hue-rotate(360deg) drop-shadow(1.6vw 1.6vw 1vw black);}
    }
  @keyframes change {
    20%, 24%, 55% {color: #111; filter: hue-rotate(0deg) drop-shadow(0.5vw 0.5vw 0.5vw red); }
    0%, 19%, 21%, 23%, 25% {color: grey; filter: hue-rotate(180deg) drop-shadow(1vw 1vw 1vw blue);}
    54%,  56%,  100% {color: skyblue; filter: hue-rotate(360deg) drop-shadow(1.6vw 1.6vw 1vw black);}
    }
      
  /* section - introduction */
  section p{margin-left: 5vw; font-size: 1.5vw; color: black; }
  #wij p{display: block; width: 90vw; margin: 2vw auto;}
  #wij h2{display: block; text-align: center; font-size: 3vw; line-height: 1; font-weight:600; color:darkgreen; text-shadow: 0.1vw 0.3vw dodgerblue;}
  
  /* menu */
   main h2{display:block; text-align:center; font-size: 3vw; line-height: 1; font-weight: 600; color: red; text-shadow:-0.2vw -0.3vw darkgreen;}
   main > p{margin-left:5vw; color:black;font-size:1.5vw;}
   #menu__1{display: grid; grid-template-columns: 1fr 1fr; }
   #menu__1 a{margin-left: 7vw; color: black; font-size:1.25vw; line-height:3;margin-bottom:2vw; font-weight:700;text-align: center;border-radius: 3vw;}
   #menu__1 a:nth-child(2n+1){color:aliceblue; background-image:linear-gradient(25deg, lightgrey, burlywood, lightgrey, green, lightgreen, orange,red);opacity:0.75;}
   #menu__1 a:nth-child(2n+2){color:aliceblue; background-image:linear-gradient(25deg, red, orange, lightgreen, green, lightgrey, burlywood, lightgrey);opacity: 0.75;}
   #menu__1 a:hover{cursor:pointer;}

   /* aside - contact */
  aside p{margin-left: 2vw; font-size: 1.5vw; color: black; }
  aside h2{display:block; text-align:center; font-size: 3vw; line-height: 1; font-weight: 600; color: aqua; text-shadow:0.2vw -0.3vw darkgreen;}
  span{font-size:1.5vw; color: darkblue; margin-left:1vw;}

  /* footer */
  footer{display: flex; flex-flow: row nowrap;}
   h3{margin-left: 5vw; }
  #dagtijd{display: block; margin:1vw auto; font-size:1vw; color: blue; }
  #jaar{display: inline; margin:1vw auto; font-size:1vw; color: blue; }

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