/*
=============== 
General settings
===============
*/

:root {
  --title-color: #423f3f;
  --description-color: #5c5c5c;
  --orange: #eb5939;
  --border-color: #d1d5d8;
}

@font-face {
  font-family: 'avenir_next_lt_probold';
  src: url('avenir_next_lt_pro_bold-webfont.woff2') format('woff2'),
    url('avenir_next_lt_pro_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'avenir_nextdemi_bold';
  src: url('avenirnext-demibold-webfont.woff2') format('woff2'),
    url('avenirnext-demibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

.outer-wrapper {
  position: absolute;
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
}

.wrapper {
  display: flex;
  flex-direction: row;
  /*if you want to add more pages turn the width to 400,500 etc..*/
  width: 300vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  overflow: hidden;
}

/*Main settings*/
.slide {
  width: 100vw;
  height: 100vh;
}

.one {
  background: #ebeff3;
}

.two {
  background: #ebeff3;
}

.three {
  background: #ebeff3;
  /*Zorgt voor scrolling/*
  /*Overflow:auto;*/
}

/*see the active page with a white border */
/*.active {
  border-color: white;
}
*/

/*and add here more sections if you want to add more pages*/
/*.four {
  background: #00dfdf;
}
*/

/*
=============== 
End general settings
===============
*/

/*
=============== 
Left page
===============
*/
.container {
  margin-left: 17em;
  margin-top: 8em;
  max-width: 43em;
  width: 73%;
}

.text-left {
  font-family: var(--probold-font);
  font-size: 6rem;
  color: var(--title-color);
  margin-bottom: 0.3em;
}

.text-left2 {
  font-family: var(--bold-font);
  font-size: 1rem;
  padding-left: 3em;
}

.line {
  content: '';
  display: inline-block;
  width: 28px;
  height: 5px;
  background-color: #eb5939;
  margin-bottom: -1.5em;
  margin-left: 0.5em;
}

.cv {
  font-family: var(--probold-font);
  vertical-align: middle;
  padding: 1em;
  font-size: 1rem;
  cursor: pointer;
  border: solid 4px #5654543b;
  background-color: transparent;
  color: #424242;
}

.cv:hover {
  transition: 2s;
}

.icon-container {
  display: inline-block;
  margin-top: 5em;
  margin-right: 5em;
  padding-left: 3em;
}

i.material-symbols-outlined {
  font-size: 3em;
  color: #606060
}

.icon-title {
  font-family: var(--probold-font);
  color: #5c5c5c
}

.icon-text a {
  font-family: var(--bold-font);
  color: hsla(135, 4%, 22%, 0.712);
  background-image: linear-gradient(hsla(150, 4%, 10%, 0.712) 0 0);
  padding-bottom: 0.2em;
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s;
}

.icon-text a:hover {
  color: hsla(150, 4%, 10%, 0.712);
  background-position: 100% 100%;
  background-size: 100% 2px;
}


p {
  color: white;
}

.leftText {
  position: absolute;
  font-size: 6em;
  color: white;
  margin-left: 2em;
  margin-top: 1em;
  width: 6em;
}

.leftText2 {
  color: rgb(153, 152, 152);
  font-size: 0.15em;
  padding-left: 3.3em;
  margin-top: 2em;
}

.borderline2 {
  position: absolute;
  border-top: 5px solid rgb(255, 255, 255);
  width: 0.3em;
  top: 1.47em;
  margin-left: 7px;
}

/*bottom navigation*/
.bottomcontainer2 {
  position: fixed;
  bottom: 0;
  left: 50vw;
  transform: translateX(-50%);
  padding-bottom: 1.5em;
}

.bottomtextselected {
  color: orange;
  background-position: 100% 100%;
  background-size: 100% 2px;
}

/*
=============== 
End left page
===============
*/

/*
=============== 
Middle page
===============
*/
.maincircle {
  margin: 2em auto;
  width: 40em;
  height: 40em;
  border-radius: 100%;
  outline: solid 0.2em var(--border-color);
  background-image: url("images/vb.png");
  background-size: 28em 25em;
  object-fit: contain;
  background-repeat: no-repeat;
  background-position: 60% 40%;
}

.container2 {
  position: absolute;
  margin-left: 14em;
  margin-top: 11em;
}

.text-middle {
  font-family: var(--probold-font);
  color: var(--title-color);
  font-size: 6em;
}

.text-middle2 {
  font-family: var(--bold-font);
  color: #626669;
  font-size: 1.5rem;
  margin-left: 2em;
}

.text-middle2+p {
  font-family: var(--bold-font);
  color: var(--description-color);
  font-size: 1rem;
  margin-left: 3em;
}

/*
.borderline {
  position: absolute;
  border-top: 5px solid rgb(5, 85, 204);
  width: 0.3em;
  top: 1.24em;
  margin-left: 7px;
}
*/



/*Left circle settings*/
.circle1 {
  float: left;
  margin: 17.7em -6em;
  width: 11em;
  height: 11em;
  border-radius: 100%;
  border: solid 1em #ebeff3;
  box-shadow: 0 0 0 0.5em #7a7a7c20;
  outline-offset: 5em;
  outline: solid 0.2em var(--border-color);
}

.circle1:hover {
  box-shadow: 0 0 0 0.5em #b5b8ba;
}

/*Right circle settings*/
.circle2 {
  float: right;
  position: relative;
  margin: 17.7em -11em;
  width: 11em;
  height: 11em;
  border-radius: 100%;
  border: solid 1em #ebeff3;
  box-shadow: 0 0 0 0.5em #7a7a7c20;
  outline-offset: 5em;
  outline: solid 0.2em var(--border-color);
}

.circle2:hover {
  box-shadow: 0 0 0 0.5em #b5b8ba;
}

/*Moon settings*/
.moon {
  border-radius: 50%;
  width: 9em;
  height: 9em;
  background: url(images/moon2.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  cursor: pointer;
  animation: moon-rotation 90s linear infinite;
  box-shadow: inset 0px 0 40px black,
    inset 0px 0 60px rgba(0, 0, 0, .9),
    inset 100px 0 60px rgba(248, 248, 213, 0.2);
}

@keyframes moon-rotation {
  from {
    background-position: -500px center;
  }

  to {
    background-position: 496px center;
  }
}

@media screen and (max-width: 500px) {
  body {
    background: radial-gradient(circle at center, rgb(255, 255, 255) 115px, black 130px);
  }

  .moon {
    width: 250px;
    height: 250px;
  }

  .moon:before {
    width: 45px;
    height: 245px;
    box-shadow: -60px 0 50px black;
  }
}

/*Darkmode (toggle button)*/
.togglebtn {
  position: relative;
  float: right;
  padding-right: 1em;
  /* margin-left: 95%;
  margin-right: 5%;*/
}

label {
  width: 4em;
  height: 2.2em;
  position: relative;
  display: block;
  border-radius: 200px;
  cursor: pointer;
  background: #242424;
  box-shadow: inset 0px 5px 15px rgba(121, 121, 121, 0.4), inset 0px -5px 15px rgba(116, 115, 115, 0.4);
}

label:after {
  content: "";
  width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  border-radius: 180px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #777, #3a3a3a);
}

input {
  width: 0;
  height: 0;
  visibility: hidden;
}

input:checked+label {
  background: #ebebeb;
}

input:checked+label:after {
  left: 3.7em;
  transform: translateX(-100%);
  background: linear-gradient(180deg, #d7d7d7, #ffffff);
  /*background: linear-gradient(180deg, #ffcc89, #d8860b);*/
}

label,
label:after {
  transition: 0.5s
}

label:active:after {
  width: 32px;
}

/*transition darkmode*/
.two,
.one,
.three {
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
}

/*Bottom navigation*/
.bottomcontainer {
  position: absolute;
  bottom: 0;
  padding-bottom: 0.5em;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.bottomtext {
  font-family: var(--probold-font);
  color: #41474C;
  /*underline settings*/
  background-image: linear-gradient(#eb5939 0 0);
  padding-bottom: 0.5em;
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s;
}

.bottomtext+.bottomtext {
  margin-left: 1.5em;
}

.bottomtext:hover {
  color: #eb5939;
  /*underline settings*/
  background-position: 100% 100%;
  background-size: 100% 2px;
}

.bottomtextselected {
  color: #eb5939;
  background-position: 100% 100%;
  background-size: 100% 2px;
}

/*
=============== 
End middle page
===============
*/

/*
=============== 
Right page
===============
*/
.container3 {
  position: absolute;
  margin-left: 14em;
  margin-top: 8em;
}

.text-right {
  font-family: var(--probold-font);
  font-size: 6rem;
  color: var(--title-color);
  margin-bottom: 0.3em;
}

.text-right2 {
  color: rgb(69, 68, 68);
  font-size: 1em;
}

/*Flexbox of projects*/
.finishedprojects {
  margin-top: -0.2em;
  float: right;
  display: flex;
  flex-wrap: wrap;
  /*scroll*/
  overflow-y: scroll;
  height: 100vh;
  /*end scroll*/
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /*gap: 16px;*/
  max-width: 50em;
  position: relative;

}

.finishedprojects .image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  height: 250px;
  object-fit: cover;
  border: solid var(--border-color);
  background-color: rgb(0, 0, 0);
}

.finishedprojects .image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}


.finishedprojects .image-wrapper:hover img {
  opacity: 1;
  cursor: pointer;
}

.finishedprojects .image-wrapper p:nth-of-type(1) {
  font-family: 'avenir_next_lt_probold';
  font-size: 2rem;
  color: rgb(200, 200, 200);
  transition: all 0.3s ease-out;
}

.finishedprojects .image-wrapper p:nth-of-type(2) {
  font-size: 1rem;
  color: rgb(142, 140, 140);
  transition: all 0.3s ease-out;

}

.finishedprojects .image-wrapper p:nth-of-type(1),
.finishedprojects .image-wrapper p:nth-of-type(2) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.finishedprojects .image-wrapper p:nth-of-type(1),
.finishedprojects .image-wrapper p:nth-of-type(2) {
  opacity: 1;
  visibility: visible;
  pointer-events: none;

}

.finishedprojects::after {
  content: "";
  width: 350px;
}

.projectcontainer {
  width: 100%;
  border: solid var(--border-color);
  max-width: 350px;
  height: 250px;

  /*maakt de boxen hetzelfde kleur 
  background-color: black;*/
  padding-top: 2.5em;
}

.projectnumber {
  font-size: 6em;
  font-family: var(--bold-font);
  /*font-family: 'Lucida Sans';*/
  font-weight: bold;
  color: #949495;
  text-align: center;
}



/*bottom navigation*/
.bottomcontainer3 {
  position: absolute;
  bottom: 0;
  padding-bottom: 1.5em;
  padding-left: 28em;
}

/*
=============== 
End right page
===============
*


/*mogelijk te verwijderen*/
.middlePageText,
.middlePageText2,
.middlePageText2+p,
.leftAndRightText,
.circle1,
.projectnumber,
.projectname,
.finishedprojects img,
.projectcontainer,
.leftAndRightText2,
.circle2,
.maincircle,
.borderline,
.borderline2 {
  transition: all 0.5s ease-in-out;
}