@font-face {
       font-family: "ClashDisplay Extralight";
       src: url("./fonts/ClashDisplay-Extralight.otf");
   }

   @font-face {
       font-family: "ClashDisplay Light";
       src: url("./fonts/ClashDisplay-Light.otf");
   }

   @font-face {
       font-family: "ClashDisplay Medium";
       src: url("./fonts/ClashDisplay-Medium.otf");
   }

   @font-face {
       font-family: "ClashDisplay Regular";
       src: url("./fonts/ClashDisplay-Regular.otf");
   }

   @font-face {
       font-family: "ClashDisplay Semibold";
       src: url("./fonts/ClashDisplay-Semibold.otf");
   }

   @font-face {
       font-family: "ClashDisplay Bold";
       src: url("./fonts/ClashDisplay-Bold.otf");
   }

   @font-face {
       font-family: "Kalam Light";
       src: url("./fonts/Kalam-Light.otf");
   }

   @font-face {
       font-family: "Kalam Regular";
       src: url("./fonts/Kalam-Regular.otf");
   }

   @font-face {
       font-family: "Kalam Bold";
       src: url("./fonts/Kalam-Bold.otf");
   }

   @font-face {
       font-family: "Satoshi Light";
       src: url("./fonts/Satoshi-Light.otf");
   }

   @font-face {
       font-family: "Satoshi Medium";
       src: url("./fonts/Satoshi-Medium.otf");
   }

   @font-face {
       font-family: "Satoshi Regular";
       src: url("./fonts/Satoshi-Regular.otf");
   }

   @font-face {
       font-family: "Satoshi Bold";
       src: url("./fonts/Satoshi-Bold.otf");
   }

   @font-face {
       font-family: "Satoshi Black";
       src: url("./fonts/Satoshi-Black.otf");
   }

   body {
       margin: 0;
   }

   .nav {
       z-index: 1003;
       height: 100px;
       display: flex;
       justify-content: space-between;
       position: fixed;
       top: 0;
       width: 100%;
       background-color: rgba(255, 255, 255, 0.587);
   }

   .button_container {
       display: flex;
       position: relative;
       right: 4vw;
   }

   .logo_container {
       display: flex;
       position: relative;
       left: 4vw;
   }

   .logo {
       font-family: "ClashDisplay Semibold";
       font-size: 30px;
       text-decoration: none;
       color: black;
       text-transform: uppercase;
       align-items: center;
       display: flex;
       mix-blend-mode: multiply;
   }

   .overmij,
   .contact {
       font-family: "ClashDisplay Medium";
       font-size: 30px;
       text-decoration: none;
       color: black;
       flex-flow: row;
       align-items: center;
       padding-left: 2vw;
       display: flex;
   }


   @media only screen and (max-width: 650px) {

       .overmij,
       .contact,
       .logo {
           font-size: 20px;
       }

       .nav {
           height: 70px;
       }
   }


   .page_container {
       /* justify-content: center;
       align-items: center; */
       color: rgb(26, 26, 26);
       margin-top: 100px;
   }

   .title_container {
       align-items: center;
       margin-top: 18vh;
       margin-bottom: 18vh;
       margin-left: 4%;
       margin-right: 4%;
   }

   .bijschrift {
       font-family: "Kalam Bold";
       font-size: 4vw;
       color: rgb(255, 173, 73);
       text-transform: uppercase;
       text-align: center;
       letter-spacing: 2px;
   }


   .title {
       font-family: "ClashDisplay Bold";
       font-size: 7vw;
       color: rgb(26, 26, 26);

       text-align: center;
       text-transform: uppercase;
       letter-spacing: 2px;
   }


   /* FOOTER */

   .footer {
       background-color: rgb(26, 26, 26);
       margin-top: 100px;
       padding: 7%;
       height: 40vh;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .footer_container {
       justify-content: center;
       align-items: center;
       margin-bottom: 4vh;
   }

   .cc {
       font-family: "Clashdisplay Bold";
       font-size: 6vw;
       text-transform: uppercase;
       display: block;
       text-align: center;
       color: white;
       margin-bottom: 2vh;
   }

   .mail,
   .tel {
       font-family: "Satoshi Regular";
       font-size: 2vw;
       text-align: center;
       color: white;
       margin-bottom: 30px;
   }

   .link_container {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
   }

   .linkedin_container,
   .instagram_container {
       text-align: center;
   }

   .linkedin,
   .instagram {
       font-family: "Satoshi Medium";
       font-size: 2vw;
       text-decoration: none;
       text-align: center;
       color: white;
   }

   @media only screen and (max-width: 1050px) {

       .cc {
           font-size: 8vw;
           margin-bottom: 2vh;
       }

       .mail,
       .tel {
           font-size: 3vw;
       }

       .linkedin,
       .instagram {
           font-size: 3vw;
       }
   }

   @media only screen and (max-width: 650px) {

       .cc {
           font-size: 9vw;
           margin-bottom: 2vh;
       }

       .mail,
       .tel {
           font-size: 3vw;
       }

       .linkedin,
       .instagram {
           font-size: 3vw;
       }
   }



   /* PROJECTEN */

   .relevanteprojecten {
       font-family: "ClashDisplay Bold";
       font-size: 4.5vw;
       color: rgb(26, 26, 26);
       padding: 10px;
       margin-bottom: 10px;
       text-align: center;
       text-transform: uppercase;
       letter-spacing: 2px;
   }

   .projecten {
       margin-left: 4vw;
       margin-right: 4vw;

       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .project1_container,
   .project2_container,
   .project3_container,
   .project4_container,
   .project5_container,
   .project6_container {
       text-decoration: none;
       width: 600px;
   }

   .project1img_container,
   .project2img_container,
   .project3img_container,
   .project4img_container,
   .project5img_container,
   .project6img_container {
       width: 600px;
       height: 600px;
       position: relative;
       overflow: hidden;
       border-radius: 3%;
   }

   #yorubaID {
       background-image: URL("img/madelon2.jpeg");
       background-size: cover;
       background-position: center;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #issID {
       background-image: URL("img/iss.JPG");
       background-size: cover;
       background-position: center;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #purehapID {
       background-image: URL("img/purehapLogo.jpg");
       background-size: 140%;
       background-position: center 40%;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #letitbloomID {
       background-image: URL("img/s&s.jpg");
       background-size: cover;
       background-position: top;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #soepID {
       background-image: URL("img/soepcover.png");
       background-size: cover;
       background-position: right;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #designID {
       background-image: URL("img/billie.jpg");
       background-size: cover;
       background-position: center 35%;
       width: 600px;
       height: 600px;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #yorubaID:hover,
   #issID:hover,
   #purehapID:hover,
   #letitbloomID:hover,
   #soepID:hover,
   #designID:hover {
       transform: scale(1.05);
   }

   .project1,
   .project2,
   .project3,
   .project4,
   .project5,
   .project6 {
       font-family: "ClashDisplay Bold";
       font-size: 3vw;
       margin-bottom: 6vh;
       color: rgb(26, 26, 26);
       padding: 10px;
       text-transform: uppercase;
       letter-spacing: 2px;
   }


   /* OVER MIJ */

   .voorstel_container {
       background-color: rgb(26, 26, 26);
       padding: 6vw;
   }

   .inhoud_container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .inhoudtext_container {
       width: 45vw;
   }

   .wiebenik {
       font-family: "ClashDisplay Bold";
       font-size: 6vw;
       color: white;
       text-transform: uppercase;
       margin-bottom: 4vh;
       letter-spacing: 2px;
       margin-top: 0;
   }

   .voorstel1,
   .voorstel2,
   .voorstel3,
   .voorstel4 {
       font-family: "Satoshi Regular";
       font-size: 20px;
       color: white;
       margin-bottom: 15px;
   }

   .foto_container {
       width: 40vw;
       height: 80vh;
       position: relative;
       overflow: hidden;
       border-radius: 3%;
   }

   #fotoID {
       background-image: URL("img/p.jpeg");
       background-size: cover;
       background-position: top;
       width: 40vw;
       height: 80vh;
       border-radius: 3%;

       transition: transform 0.3s ease-in-out;
   }

   #fotoID:hover {
       transform: scale(1.05);
   }

   .skills_container {
       padding: 80px;
   }

   .skills {
       font-family: "Clashdisplay Bold";
       font-size: 5vw;
       text-transform: uppercase;
   }

   hr.solid1 {
       border-top: 1px solid #bbb;
       width: 80vw;
   }

   hr.solid {
       border-top: 0.7px solid #bbb;
       width: 80vw;
   }

   .html,
   .css,
   .javascript,
   .arduino,
   .accs,
   .unity,
   .blender,
   .figma,
   .procreate {
       font-family: "Clashdisplay Bold";
       font-size: 4vw;
   }

   @media only screen and (max-width: 1050px) {

       .inhoud_container {
           display: block;
       }

       .inhoudtext_container {
           width: 80vw;
           margin-bottom: 3vh;
       }

       .foto_container {
           width: 80vw;
           height: 80vh;
       }

       #fotoID {
           width: 80vw;
           height: 80vh;
       }


       .project1_container,
       .project2_container,
       .project3_container,
       .project4_container,
       .project5_container,
       .project6_container {
           width: 500px;
       }

       .project1img_container,
       .project2img_container,
       .project3img_container,
       .project4img_container,
       .project5img_container,
       .project6img_container {
           width: 500px;
           height: 500px;
       }

       #yorubaID,
       #issID,
       #purehapID,
       #letitbloomID,
       #soepID,
       #designID {
           width: 500px;
           height: 500px;
       }

   }

   @media only screen and (max-width: 650px) {
       .title_container {
           margin-top: 14vh;
           margin-bottom: 14vh;
           margin-left: 4%;
           margin-right: 4%;
       }

       .bijschrift {
           font-family: "Kalam Bold";
           font-size: 6vw;
           color: rgb(255, 173, 73);
           text-transform: uppercase;
           text-align: center;
           letter-spacing: 2px;
       }


       .title {
           font-family: "ClashDisplay Bold";
           font-size: 9vw;
           color: rgb(26, 26, 26);

           text-align: center;
           text-transform: uppercase;
           letter-spacing: 2px;
       }

       .wiebenik {
           font-size: 60px;
       }

       .voorstel1,
       .voorstel2,
       .voorstel3,
       .voorstel4 {
           font-size: 15px;
       }

       .page_container {
           margin-top: 70px;
       }


       .project1,
       .project2,
       .project3,
       .project4,
       .project5,
       .project6 {
           font-size: 4vw;
       }

       .project1_container,
       .project2_container,
       .project3_container,
       .project4_container,
       .project5_container,
       .project6_container {
           width: 500px;

       }

       .project1img_container,
       .project2img_container,
       .project3img_container,
       .project4img_container,
       .project5img_container,
       .project6img_container {
           width: 500px;
           height: 350px;
       }

       #yorubaID,
       #issID,
       #purehapID,
       #letitbloomID,
       #soepID,
       #designID {
           width: 500px;
           height: 350px;
       }

   }