@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 {
       background-color: rgb(26, 26, 26);
       color: white;
       font-family: "Satoshi Regular";
       font-size: 25px;
   }

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

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

   .logo_container {
       display: flex;
       position: relative;
       left: 4vw;
       z-index: 1000;
   }

   .logo {
       font-family: "ClashDisplay Semibold";
       font-size: 30px;
       text-decoration: none;
       color: white;
       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: white;
       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;
       }
   }

   /* FOOTER */

   .footer {
       background-color: white;
       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: rgb(26, 26, 26);
       margin-bottom: 2vh;
   }

   .mail,
   .tel {
       font-family: "Satoshi Regular";
       font-size: 2vw;
       text-align: center;
       color: rgb(26, 26, 26);
       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: rgb(26, 26, 26);
   }

   @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;
       }
   }


   .page_container {
       justify-content: center;
       align-items: center;
       padding: 80px;
       padding-top: 0;
       padding-bottom: 0;
       margin-top: 100px;
   }


   /* EMBODIED EXPERIENCE DESIGN */

   .page {
       font-family: "Clashdisplay Bold";
       font-size: 5vw;
   }

   .container1,
   .container2 {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 4vh;
   }

   #flyinghats {
       background-image: URL("img/madelon.jpeg");
       background-size: cover;
       object-position: center;
       width: 500px;
       height: 600px;
       border-radius: 3%;
   }

   .text_container {
       /* margin-left: 80px; */
       width: 50vw;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .text {
       margin-bottom: 6vh;
       margin-top: 0;
       font-size: 25px;
   }

   .video1 {
       object-fit: cover;
       object-position: 50% 20%;
       width: 500px;
       height: 600px;
       border-radius: 3%;
   }


   /* BAND MET JE PLANT */

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

   .video1 {
       object-fit: cover;
       object-position: 50% 20%;
       width: 500px;
       height: 600px;
       border-radius: 3%;
   }



   /* PURE HAP */

   .videoPH {
       object-fit: cover;
       object-position: center;
       width: 500px;
       height: auto;
       border-radius: 3%;
   }

   .foto_containerPH {
       /* margin: 60px; */
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 80px;
   }

   #poster {
       background-image: URL("img/poster.jpg");
       background-size: cover;
       background-position: center;
       width: 240px;
       height: 350px;
       border-radius: 3%;
       margin: .8%;
   }

   #flyer1 {
       background-image: URL("img/flyer1.jpg");
       background-size: cover;
       object-position: center;
       width: 240px;
       height: 350px;
       border-radius: 3%;
       margin: .8%;
   }

   #flyer2 {
       background-image: URL("img/flyer2.jpg");
       background-size: cover;
       object-position: center;
       width: 240px;
       height: 350px;
       border-radius: 3%;
       margin: .8%;
   }


   #boekje1 {
       background-image: URL("img/boekje1.png");
       background-size: cover;
       background-position: 50% 25%;
       width: 350px;
       height: 350px;
       border-radius: 3%;
       margin: .8%;
   }

   #mezelf {
       background-image: URL("img/purehapBTS.JPG");
       background-size: 140%;
       background-position: 25% 25%;
       width: 550px;
       height: 350px;
       border-radius: 3%;
   }




   /* LET IT BLOOM */

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

   /* TBS */

   .tbs {
       font-family: "Clashdisplay Bold";
       font-size: 70px;
   }

   .containertbs {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 40px;
   }

   .videoTBS {
       object-fit: cover;
       object-position: center;
       width: 550px;
       height: auto;
       border-radius: 3%;
   }

   #soep_bts {
       background-image: URL("img/bts2.jpg");
       background-size: 110%;
       background-position: center 10%;
       width: 20vw;
       height: 50vh;
       border-radius: 3%;
       margin-top: 30px;
   }

   #soep_bts2 {
       background-image: URL("img/bts3.jpg");
       background-size: 120%;
       background-position: 30% 30%;
       width: 20vw;
       height: 50vh;
       border-radius: 3%;
       margin-top: 30px;
   }

   .text_container2 {
       /* margin-left: 80px; */
       width: 650px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }



   /* DESIGN */

   .designtext_container {
       width: 100%;
       display: flex;
       flex-direction: column;
       /* align-items: center;
      justify-content: center; */
   }

   .foto_container {
       /* margin: 60px; */
       display: flex;
       flex-wrap: wrap;
   }

   #slushyID {
       background-image: URL("img/slushynoobz.png");
       background-size: cover;
       background-position: center;
       width: 500px;
       height: 300px;
       border-radius: 10px;
       margin: .8%;
   }

   #viID {
       background-image: URL("img/vi.PNG");
       background-size: cover;
       background-position: center;
       width: 500px;
       height: 300px;
       border-radius: 10px;
       margin: .8%;
   }

   #LID {
       background-image: URL("img/L.JPG");
       background-size: cover;
       background-position: bottom;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #jelawID {
       background-image: URL("img/jelaw.PNG");
       background-size: cover;
       background-position: bottom;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #timotheeID {
       background-image: URL("img/timothee.jpg");
       background-size: cover;
       background-position: bottom;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #clairoID {
       background-image: URL("img/clairo.jpg");
       background-size: cover;
       background-position: bottom;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #billieID {
       background-image: URL("img/billie.jpg");
       background-size: 110%;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }


   #hamzahID {
       background-image: URL("img/hamzah.PNG");
       background-size: 110%;
       background-position: center left 20%;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #frankID {
       background-image: URL("img/frank.PNG");
       background-size: cover;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #protraitsID {
       background-image: URL("img/portraits.png");
       background-size: cover;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #appleID {
       background-image: URL("img/appel.jpg");
       background-size: cover;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #sigaretID {
       background-image: URL("img/sigaret.jpg");
       background-size: cover;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   #robotmensID {
       background-image: URL("img/2Dposter.jpg");
       background-size: cover;
       background-position: center;
       width: 300px;
       height: 400px;
       border-radius: 10px;
       margin: .8%;
   }

   .syaID {
       background-size: cover;
       background-position: center;
       width: 500px;
       height: 350px;
       border-radius: 10px;
       margin: .8%;
   }

   #blenderhuisID {
       background-image: URL("img/huis.png");
       background-size: cover;
       background-position: center;
       width: 450px;
       height: 350px;
       border-radius: 10px;
       margin: .8%;
   }

   #webpage1ID {
       background-image: URL("img/activecity1.png");
       background-size: cover;
       background-position: center;
       width: 550px;
       height: 300px;
       border-radius: 10px;
       margin: .8%;
   }

   #webpage2ID {
       background-image: URL("img/activecity2.png");
       background-size: cover;
       background-position: center;
       width: 550px;
       height: 300px;
       border-radius: 10px;
       margin: .8%;
   }


   @media only screen and (max-width: 1050px) {
       .page {
           font-size: 6vw;
       }

       .text_container,
       .containertbs,
       .text_container2 {
           width: 80vw;
       }

       .text,
       .textPH {
           font-size: 20px;
       }

       #flyinghats,
       .video1,
       #plantID,
       #ssID {
           width: 400px;
           height: 500px;
       }

       #soep_bts,
       #soep_bts2 {
           width: 70vw;
           height: 80vh;
       }

       .videoPH,
       #mezelf,
       .videoTBS {
           width: 400px;
           height: 300px;
       }

       #slushyID,
       #viID {
           width: 400px;
           height: 200px;
       }

       #LID,
       #jelawID,
       #timotheeID,
       #clairoID,
       #billieID,
       #hamzahID,
       #frankID,
       #protraitsID,
       #appleID,
       #sigaretID,
       #robotmensID {
           width: 150px;
           height: 200px;
       }

       .syaID {
           width: 60vw;
           height: auto;
       }

       #blenderhuisID {
           width: 400px;
           height: 250px;
       }

       #webpage1ID,
       #webpage2ID {
           width: 400px;
           height: 200px;
       }


   }

   @media only screen and (max-width: 650px) {
       .page {
           font-size: 35px;
       }

       .container1,
       .container2,
       .containertbs {
           display: block;
           width: 80vw;
       }

       .text,
       .textPH {
           font-size: 20px;
       }

       #flyinghats,
       .video1,
       #plant1ID {
           width: 300px;
           height: 400px;
       }

       #poster,
       #flyer1,
       #flyer2,
       #boekje1 {
           width: 30vw;
           height: 30vh;
           display: flex;
           flex-wrap: wrap;
       }
   }