*, html {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
}

body {
  background-color: black;
}

main {
  background-color: white;
}

header, nav, header div, footer {
  background-color: black;
  color: white;
}

/* Einde algemeen */
/* Begin header */
/* Begin navigatie */
nav, nav * {
  height: 2em;
  display: flex;
  align-items: center;
}

nav div:nth-of-type(1) {
  position: absolute;
  visibility: hidden;
  width: 5em;
  z-index: 3;
  display: flex;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

nav div:nth-of-type(2) {
  position: fixed;
  z-index: 4;
}

nav div ul {
  height: 2em;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
}

nav ul li {
  display: flex;
  text-decoration: underline;
}

nav ul li:hover, nav div:nth-of-type(1):hover {
  cursor: pointer;
  color: red;
}

.navIntro {
  position: absolute;
  bottom: 5em;
  right: 1em;


}

.navIntro ul {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
   width: 30vw;
   margin-top: 27vh;
  padding: 0;
}

.navIntro ul li {
  margin-bottom: 1em;
  font-size: 1.2em;
}

.frontEnd nav, .portfolio nav, .programmeren nav {
  position: absolute;
}

.frontEnd nav div, .portfolio nav div, .programmeren nav div {
  visibility: visible;
  position: fixed;
  text-decoration: underline;
}

/* Einde navigatie */
/* Begin intro */
.intro {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.intro>* {
  float: left;
}

.intro>div {
  height: 80vh;
  width: 70vw;
}

.intro>article {
  width: 30vw;
}

.intro:after {
  content: "";
  display: table;
  clear: both;
}

.home .intro>div {
  background-image: url(../images/instagram-foto.jpg);
}

.programmeren .intro>div {
  background-image: url(../images/pestenFoto.jpg);
}

.frontEnd .intro>div {
  background-image: url(../images/lichtenFoto.jpg);
}

.portfolio .intro>div {
  background-image: url(../images/portfolio.png);
}

.intro>div {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.intro div h1 {
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  width: 20%;
  font-size: 5vw;
}

.intro article {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 2em;
}

.intro article p {
  text-align: right;
  font-size: 1.2em;
}

/* Einde intro */

/* Begin gradient */
.gradientHeader {
  position: relative;
  height: 50vh;
  width: 100vw;
  overflow: hidden;
}

header .gradientHeader div {
  left: 25%;
  top: 25%;
  transform: translate(-50%, -50%) rotate(9deg);
  width: 200vw;
  position: absolute;
}

header .gradientHeader div:nth-of-type(1) {
  z-index: 2;
  height: 20vh;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

header .gradientHeader div:nth-of-type(2) {
  z-index: 1;
  height: 100vh;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

/* Einde gradient */
/* Einde header */
/* Begin main */
main {
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
  flex-direction: column;
}

.favorietProjecten {
  min-width: 100%;
  margin: 0;
}

.projectenZelf * {
  text-decoration: none;
  color: black;
}

.projectenZelf {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.projectenZelf div {
  border: 1px solid black;
  height: 300px;
  width: 300px;
  margin-bottom: 1em;
  margin-top: 1em;
  position: relative;
  overflow: hidden;
  transition: .5s;
}

.projectenZelf div img {
  height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.projectenZelf div h3 {
  margin-left: 1em;
}

.projectenZelf div:hover {
  cursor: pointer;
  transform: translateY(-1em);
}

/* Begin meer projecten */
.meerProjecten {
  margin-top: 2em;
  margin-bottom: 2em;
  transition: 2s;
  height: 0;
}

.meerProjecten>div:nth-of-type(1)>p {
  transition: .5s;
}

.meerProjecten>div:nth-of-type(1) {
  position: relative;
  background-color: white;
  z-index: 1;
  height: 3em;
  display: flex;
  align-items: center;
}

.meerProjecten>div:nth-of-type(1)>hr {
  display: block;
  width: 100%;
  height: 1px;
}

.meerProjecten>div:nth-of-type(1)>h2, .meerProjecten>div:nth-of-type(1)>p {
  position: absolute;
  background-color: white;
}

.meerProjecten>div:nth-of-type(1)>h2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-left: 1vw;
  padding-right: 1vw;
  text-decoration: underline;
  text-align: center;
}

.meerProjecten>div:nth-of-type(1)>p {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 3em;
  width: 1em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
  border-radius: 100%;
}

.meerProjecten>div:nth-of-type(1):hover {
  color: red;
  cursor: pointer;
}

.meerProjecten>div:nth-of-type(2) {
  display: none;
}

/* Begin dropdown */
.dropdownActief {
  height: 500px;
  overflow-y: scroll
}

.dropdownActief>div:nth-of-type(2) {
  display: block;
  overflow-y: scroll;
  height: 450px;
}

.dropdownActief>div:nth-of-type(2)>div {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  text-decoration: underline;
  transition: 0;
}

.dropdownActief>div:nth-of-type(1)>p {
  transform: translateY(-50%) rotate(90deg);
}

.dropdownActief>div:nth-of-type(2)>div>h3:hover {
  color: red;
  cursor: pointer;
}

/* Einde dropdown */
/* Einde meer projecten */
/* Begin over mij */
main .overMij {
  margin-top: 2em;
}

main .overMij>* {
  margin-bottom: 1em;
}

main .overMij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  grid-auto-flow: dense;
}

main .overMij span {
  grid-column: span 2;
}

main .overMij img {
  max-width: 100%;
  border-radius: 100%;
  border: 0.5em solid black;
}

main .overMij h3 {
  margin-bottom: 1em;
  margin-top: 1em;
}

main .overMij a {
  color: black;
}

main .overMij a:hover {
  color: red;
}

/* Einde over mij */
/* Einde main */
/* Begin anders op detailpagina's */
.frontEnd main a, .programmeren main a, .portfolio main a {
  color: black;
}

.frontEnd main a:hover, .programmeren main a:hover, .portfolio main a:hover {
  color: red;
}

.frontEnd main>div {
  display: flex;
  flex-wrap: wrap;
  width: 20em;
  flex-direction: row;
}

.frontEnd main>div>a {
  width: 10em;
  height: 3em;
  display: flex;
  align-items: center;
}

.frontEnd main h2 {
  margin-top: 1em;
}

.portfolio main li {
  font-weight: bold;
}

/* Einde anders op detailpagina's */
/* Begin footer */
/* Begin gradient footer */
.gradientFooter {
  position: relative;
  height: 50vh;
  width: 100vw;
  overflow: hidden;
}

footer .gradientFooter div {
  left: 25%;
  bottom: 50%;
  transform: translate(-50%, 50%) rotate(189deg);
  width: 200vw;
  position: absolute;
}

footer .gradientFooter div:nth-of-type(1) {
  z-index: 2;
  height: 20vh;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

footer .gradientFooter div:nth-of-type(2) {
  z-index: 1;
  height: 100vh;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

/* Begin gradient footer */
/* Begin tekst in footer */
footer article {
  position: absolute;
  z-index: 3;
  bottom: 1em;
  left: 1em;
}

footer ul li a {
  color: white;
}

footer ul li a:hover {
  color: red;
}

/* Einde teskt in footer */
/* Einde footer */

/* Begin transition in and out */
body {
  position: relative;
  animation: transitionIn .6s;
  animation-fill-mode: both;
}

.opacityZero {
  animation: transitionOut .6s;
  animation-fill-mode: both;
  
}

@keyframes transitionIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes transitionOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Einde transition in and out */

/* Begin anders telefoon */
@media screen and (max-width: 800px) {
  .intro>* {
    width: 100% !important;
  }

  .intro>div {
    height: 50vh;
  }

  .navTop div:nth-of-type(2) {
    height: 4em;
    align-items: flex-end;
  }

  .intro>div>h1 {
    font-size: 10vw;
  }

  .navTop div:nth-of-type(2) {
    position: absolute !important;
  }

  .navTop div:nth-of-type(1) {
    position: fixed;
    visibility: visible;
  }

  .navIntro {
    position: absolute;
    visibility: hidden;
  }

  .favorieteProjecten section a {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Einde anders telefoon */