/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  
  body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  
  /* 6. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 7. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 8. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  /*
    10. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }


  /*kleurenpallet*/
  :root{
    --color-beige: #FBDBB2;
    --color-medBrown: #D7AF7C;
    --color-darkBrown: #985F44;
    --color-faintYellow:#F5D753;
    --color-SlightlyGreen: #A4B25D;
    --color-roseyRed: #B64E55;

    --font-prime: 'Wausau', sans-serif;
    --font-sec: 'thirsty-rough-two', sans-serif;
    --font-ter: 'rig-sans', sans-serif;
   
  }

  /*index*/
body{
    background-color: var(--color-beige);
    color: var(--color-darkBrown);
}

header{
    overflow: hidden;
    text-align: center;
    font-family: var(--font-prime);
    font-size: 3em;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;

    span{
        white-space: nowrap;
        width: 99%;
        animation: scrollThrough 20s linear infinite;
    }
    span::after{
      content: attr(data-text);
      padding-left: 2rem;
    }
}

  .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap:wrap ;
    width: 100%;
    height: 100%;

    .blok{
        border: 2px solid var(--color-darkBrown);
        text-decoration: none;
        
        &.klein{
            width: 10%;
            height: 250px;
        }

        &.med{
            width: 20%;
            height: 250px;
        }

        &.large{
            width: 40%;
            height: 250px;
        }

        &.one{
          background: var(--color-SlightlyGreen);
          background-size: cover;
        }

        &.two{
          background: url('assets/foto/20231126_140725.jpg');
          background-size: cover;
        }

        &.three{
          background: var(--color-faintYellow);
          background-size: cover;
        }

        &.four{
          background: url('assets/foto/foto4.jpg');
          background-size: cover;
        }

        &.five{
          background: var(--color-roseyRed);
          background-size: cover;
        }

        &.six{
          background: url('assets/foto/foto6.jpg');
          background-size: cover;
        }

        &.seven{
          background: url('assets/foto/foto7.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }

        &.eight{
          background: url('assets/foto/foto8.jpg');
          background-size: cover;
          background-position: center;
        }

        &.nine{
          background: var(--color-medBrown);
          background-size: cover;
        }

        &.ten{
            background: url('assets/foto/foto10.jpg');
          background-size: cover;
          background-repeat: no-repeat;
        }

        h3{
          font-family: var(--font-sec);
          font-size: 2em;
          font-weight: 400;
      
    
          color: var(--color-beige);
          position: relative;
          top: 80%;
          left: 5%;

          &:hover{
            opacity: 1;
            transform: scale(1.05);
            transition: all 0.5s ease-in-out;
          }
  
        }
      
      
    }

  }

  /*About me pagina*/

  header{
    width: 100%;
    height: 10%;
    padding: 0 0 5%;
    
    nav{

      width: 100%;
      
      ul{
        text-align: center;
        li{
          list-style: none;
          display: inline-block;
          margin: 0 5%;
          font-family: var(--font-ter);
          font-size: 0.5em;
          color: var(--color-darkBrown);

          a{
            text-decoration: none;
            color: var(--color-darkBrown);

            .navL{
              font-family: var(--font-sec);
              position: relative;
              left: 30px;
              font-size: 1.5em;
            }

            &:hover{
              color: var(--color-faintYellow);
              transition: all 0.5s ease-in-out;
              cursor: pointer;
            }
          }
         
        }
      }
    }
  }

.containerB{
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: center;
  flex-wrap:wrap ;

  width: 100%;
  height: 100%;
  margin-top: -5%;
  border-top: solid 5px var(--color-darkBrown);

    .seg{
      width: 50%;
     

      &.one{
        background-color: var(--color-medBrown);
        border-radius: 0 0 50% 0;
        height: 600px;
      }

      &.two{
        height: 500px;
        
        .contact{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 20px;

          position: relative;
          top: -20%;
         
          li{
          width:60px;
          height: 60px;
          list-style-type: none;

            a{
              
              text-decoration: none;
              color: var(--color-darkBrown);
              font-family: var(--font-sec);
              font-size: 1.5em;

              .socialImg{
                color: var(--color-roseyRed);
              }
             
              &:hover{
                color: var(--color-faintYellow);
                transition: all 0.5s ease-in-out;
                cursor: pointer;
              }
             
            }
          }
        }
        
       #opacity{
        background: url('assets/foto/it-is-me.jpg');
        background-size: cover;
        width: 60%;
        height: 60%;

        border-radius: 0 0 0 50%;
        position: relative;
        left: 40%;
       }

       #shapeOne{
        background: var(--color-SlightlyGreen);
        width: 20%;
        height: 25%;
        position: relative;
        top: -20%;
        left: 40%;
        border-radius: 30% 20% 30% 20%;
       }

       #shapeTwo{
        background: var(--color-roseyRed);
        width: 20%;
        height: 25%;
        position: relative;
        top: -40%;
        left: 50%;
        border-radius: 10% 30% 10% 30%;

        a{
          text-decoration: none;
          color: var(--color-beige);
          font-family: var(--font-prime);
          font-size: 1em;
          position: relative;
          top: 20%;
          left: 15%;
          font-weight: 400;
        }
       }
      }
      
    }


  h1{
    font-family: var(--font-prime);
    font-size: 3.5em;
    font-weight: 400;
    margin: 0 10%;
  }

  h2{
    font-family: var(--font-sec);
    font-size: 2em;
    margin: 0 10%;
    color: var(--color-roseyRed);
  }

  p{
    font-family: var(--font-ter);
    font-size: 1em;

    margin: 0 10%;
  }

  .highlightColor{
    color: var(--color-faintYellow);
    font-weight: 800;
  }

}


/*Projectpagina hub*/


.intro{
  background: url('assets/svg/ornament-boven.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 250px;
  border-top: var(--color-darkBrown) solid 5px;
  margin: -5% 0;

  img{
    width: 20%;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
  }

  h1{
    font-family: var(--font-prime);
    font-size: 4em;
    font-weight:400;
    text-align: center;
  }

  p{
    font-family: var(--font-ter);
    font-size: 1.2em;
    color: var(--color-darkBrown);
    text-align: center;
    margin: 0 35%;
  }

 

 }

.containerP{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap:nowrap ;
  width: 100%;
  height: 100%;
  margin-top: 5%;

  .proj{
    border: solid 4px var(--color-SlightlyGreen);
    width: 25%;
    height: 400px;
    opacity: 0.5;
    filter: grayscale(100%);

   h2{
    font-family: var(--font-sec);
    font-size: 2em;
    font-weight: 400;
    font-display: swap;
    color: var(--color-SlightlyGreen);
    position: relative;
    top: 80%;
    margin: 0 5%;
   }



    &.one{
      background: url('assets/video/genart2.gif');
      background-size: cover;
      background-position: center;
    }

    &.two{
      background: url('assets/video/carlo1.gif');
      background-size: cover;
      background-position: center;
    }

    &.three{
      background: url('assets/video/cbs1.gif');
      background-size: cover;
      background-position: center;
    }

    &.four{
      background: url('assets/video/technoArt1.gif');
      background-size: cover;
      background-position: center;
    }

    &:hover{
      cursor: pointer;
      opacity: 1;
      filter: grayscale(0%);
      transition: all 0.4s ease-in-out;
    }
  }
 
}


/*modal to projects*/
.modal{

  background-color: var(--color-beige);
  width: 50%;
  height: 40%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;

  &::backdrop{
    background-color: rgba(0, 0, 0, 0.7);
  }

  h2{
    font-family: var(--font-prime);
    font-size: 4em;
    font-weight: 400;
    color: var(--color-roseyRed);
    margin: 0 5%;
  }

  p{
    font-family: var(--font-ter);
    font-size: 1.5em;
    color: var(--color-darkBrown);
    margin: 5%;
    border-top: solid 2px var(--color-darkBrown);
    height: 50%;
  }

  .close{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 3em;
    color: var(--color-darkBrown);
    cursor: pointer;
  }

  .more{
    text-decoration: none;
    position: relative;
    top: 50%;
    left: 80%;
    font-family: var(--font-sec);
    font-size: 1.5em;
    color: var(--color-darkBrown);

    &:hover{
      cursor: pointer;
      color: var(--color-faintYellow);
      transition: all 0.5s ease-in-out;
    }
  }
}


/*Projectpage na 'lees meer'*/
header{
.backProjectHub{
  background: none;
  border: none;
  color: var(--color-darkBrown);
 
  font-family: var(--font-sec);
  font-size: 0.5em;
  
  cursor: pointer;

  &:hover{
    color: var(--color-faintYellow);
    transition: all 0.5s ease-in-out;
  }
}
}

.backUp{
  all: unset;
  background: url('assets/svg/backToTop.svg');
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
  position: relative;
  left: 50%;

  &:hover{
    cursor: pointer;
    color: var(--color-faintYellow);
    transition: all 0.5s ease-in-out;
  }
}
.containerProject{
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap:wrap;
  width: 100%;
  border-top: solid 2px var(--color-darkBrown);
  margin: -5% 0;

    .backdrop{
      background: url('assets/video/genart2.gif');
      background-size: contain;
      background-position: center;
      background-clip: text;
      color: transparent;
      width: 100%;
      height: 400px;

      h1{
        font-family: var(--font-prime);
        font-size: 20em;
        font-weight: 400;
        text-align: center;
        margin: -5% 0 5% 0;
      }
    }

    .box{
      width: 50%;
      

      h3{
        font-family: var(--font-sec);
        font-size: 1.8em;
        font-weight: 400;
        color: var(--color-darkBrown);
        margin: 5% 0 0 5%;
      }

      h4{
        font-family: var(--font-sec);
        font-size: 1.8em;
        font-weight: 400;
        color: var(--color-roseyRed);
        margin: 5% 5% 0 5% ;
      }

      p{
        font-family: var(--font-ter);
        font-size: 1.5em;
        color: var(--color-darkBrown);
        margin: 2% 5%;

        span{
          color: var(--color-roseyRed);
          font-weight: 800;
        }
      }

      li{
        font-family: var(--font-ter);
        font-size: 1.2em;
        color: var(--color-darkBrown);
        list-style-type: square;
      }

      a{
        text-decoration: none;
        color: var(--color-SlightlyGreen);
        font-family: var(--font-ter);
        font-size: 1em;
       

        &:hover{
          cursor: pointer;
          color: var(--color-faintYellow);
          transition: all 0.5s ease-in-out;
        }

      
      }


      &.one{
        background: url('assets/video/genart1.gif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-90deg);
        height: 600px;

        border-radius: 0 0 50% 0;
      }

      &.four{
        background: url('assets/foto/genart/genart3.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius: 50% 50% 0 50%;
        transform: scale(0.8);
     
      }

      &.seven{
        background: url('assets/foto/genart/genartSketch1.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius:0 50%;
       

        p{
          position: relative;
          top: 50%;
          left: 15%;
          color: var(--color-faintYellow);
         
          
        }
      }

      &.eight{
        background: url('assets/foto/genart/genartSketch2.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius:50% 50%;
      
      }

      &.nine{
        background: url('assets/foto/genart/genartSketch3.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius:50% 0;
      
      }

      &.ten{
        height: 200px;
        margin-top: 10%;
      }

      &.eleven{
        width: 100%;
        height: 700px;
        background: url('assets/foto/genart/genart1.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 5%;
        
      }

      &.thirt{

        video{
        border-radius: 20% 5% 20% 10%;
        height: 380px;
       
        }

        .playToggle{
          background-image: url(assets/svg/playBtn.svg);
          background-color: var(--color-SlightlyGreen);
          background-size: cover;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: none;
          
          margin: -10% 5%;

            &:hover{
              cursor: pointer;
              background-color: var(--color-faintYellow);
              transition: all 0.5s ease-in-out;
            }

        }
      }
      &.sixt{
        width: 100%;
        
        .genartEnd{
          width: 100%;
          height: 400px;
         
        }
        
      }

      /*Carlo pagina*/
      &.sevent{
        background: url('assets/video/carlo1.gif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 400px;
        border-radius: 0 50% 0 50%;
      }
  
      &.twenttwo{
        background: url('assets/foto/NHM/nhmSketch1.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius: 50% 0 50% 0;
      }

      &.twentthree{
        background: url('assets/foto/NHM/nhmSketch2.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 600px;
        border-radius: 0 50% 0 50%;
        rotate: -180deg;
      }

     &.twentfive{
      background: url('assets/foto/NHM/nhm2.jpg');
      background-size: cover;
      height: 400px;
      border-radius: 0 50% 0 50%;
      margin: 5% 0;
     }

     /*Van Groen tot Goud*/

     &.twentsix{
      background: url('assets/foto/CBS/cbsSketch1.jpg');
      background-size: cover;
      height: 500px;
      width: 50%;
      border-radius: 10% 0 20% 0;
     }

     &.twentseven{
      background: url('assets/foto/CBS/cbsSketch2.jpg');
      background-size: cover;
      height: 300px;
      width: 30%;
      border-radius: 20% 10% 20%;
      rotate: -90deg;
      margin-bottom: 5%;
      margin-top: 10%;
     }

     &.twenteight{
      background: url('assets/foto/CBS/cbsSketch3.jpg');
       background-size: cover;
      height: 300px;
      width: 30%;
       border-radius:  10% 20%;
       rotate: -90deg;
       position: relative;
        left: -20%;
      margin-bottom: 10%;


     }

      &.twentnine{
        background: url('assets/foto/CBS/cbsEnd.jpg');
        background-size: cover;
        height: 500px;
        width: 50%;
        border-radius: 20% 0 20% 0;
      }

    

      /*Technoart*/
      &.oneD{
        background: url('assets/video/technoArt2.gif');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 400px;
        border-radius: 0 50% 0 50%;
      }

      &.thirty{
        background: url('assets/foto/TechnoArt/tga1.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 800px;
        width: 50%;
        transform: rotate(-90deg);
        border-radius: 0 60% 0 60%;
      }

      &.thirtyone{
        background: url('assets/foto/TechnoArt/tgaSkecth1.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 400px;
        border-radius: 50% 40% 60%;
        margin: 5% 0;
      }

      &.thirtytwo{
        background: url('assets/foto/TechnoArt/tgaSketch2.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 400px;
        border-radius: 0 30% 40%;
        margin: 5% 0;
      }

      &.thirtythree{
         background: url('assets/foto/TechnoArt/tga2.jpg');
        background-size: cover;
        background-position: center;
        height: 400px;
        width: 45%;
        border-radius: 20% 10%;
       margin-bottom: 5%;
      }

      &.thirtyfour{
         background: url('assets/foto/TechnoArt/tga3.jpg');
        background-size: cover;
        background-position: center;
        height: 400px;
         width: 45%;
        border-radius: 10% 20%;
      }
      &.thirtyfive{
         background: url('assets/foto/TechnoArt/tgaSketch4.jpg');
        background-size: cover;
        background-position: center;
        height: 400px;
         width: 45%;
        border-radius: 10% 5%;
      }
   
   
    }  
  
}

.containerD{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 6% 0;
  text-align: center;

 

  
  a{
    width: 50%;
    height: 100%;
    text-decoration: none;

    h2{
      font-family: var(--font-sec);
      font-size: 1.5em;
      font-weight: 400;
      color: var(--color-roseyRed);
      &:hover{
        cursor: pointer;
        color: var(--color-faintYellow);
        transition: all 0.5s ease-in-out;
      }
    }
  
    p{
      font-family: var(--font-ter);
      font-size: 1em;
      color: var(--color-darkBrown);
      margin: 0 5%;
    }
  

  }
}

.containerDessert{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin: -5% 0;
  text-align: center;

  border-top: solid 2px var(--color-darkBrown);
}

.work-in-progress{
  width: 20%;
  height: 40%;
  margin: 8% 50%;
  transform: translate(-50%);
  

  h1{
    font-family: var(--font-prime);
    font-size: 2em;
    font-weight: 400;
    color: var(--color-roseyRed);
    text-align: center;
  }

}


  /*animations*/
  @keyframes scrollThrough{
    0%{
        transform: translateX(0);
    }
  
    100%{
        transform: translateX(-50%);
    }
  }


  @media screen and (max-width: 450px) {
    header{
      font-size: 2.8em;
      span{
        font-size: 0.6em;
      }
    }

    .container{
      flex-direction: row;
      
      .blok{
        &.klein{
          width: 20%;
          height: 100px;
        }

        &.med{
          width: 40%;
          height: 100px;
        }

        &.large{
          width: 80%;
          height: 100px;
        }

        h3{
          font-size: 1em;
          top: 70%;
          left: 5%;
        }
    }
    }

    header{
      text-align: center;
      nav{
        ul{
          padding: 0;
        
          li{
            margin: 0;
            font-size: 0.4em;
           
          }
        }
      }
    }

    .containerB{
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .seg{
        width: 100%;

        &.one{

          h1{
            font-size: 2em;
          }

          h2{
            font-size: 1em;
          }

          p{
            font-size: 0.8em;
            margin: 0 5%;
          };
        }

        &.two{
         
          #opacity{
            border-radius: 50% 0 0 50% ;
          }

          #shapeOne{
            height: 20%;
            top: -25%;
          }

          #shapeTwo{
            height: 20%;
           top: -35%;
          }

          .contact{
            padding: 0;
          }
        }
      }
    }

    .intro{
      height: 180px;
      h1{
        font-size: 2em;
      }

      p{
        font-size: 0.8em;
        margin: 0 20%;
      }
    }

    .containerP{
      flex-wrap: wrap;

      .proj{
        width: 50%;
        height: 200px;


        h2{
          font-size: 0.9em;
          top: 80%;
          left: 5%;
        }
      }
    }

    .modal{
      width: 70%;
    

      .modal-content{
     
        h2{
          font-size: 1.8em;
        }

        p{
          font-size: 0.9em;
          margin: 5%;
        }

        a{
          font-size: 1em;
          position: relative;
          left: 60%;
        }

        .close{
          font-size: 2.5em;
          top: 0%;
          right: 5%;
        }
      }
    }

    .containerProject{
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .backdrop{
        height: 100px;
        h1{
          font-size: 5em;
        }
      }
      .box{
        width: 100%;
        
        &.one, &.oneD, &.four, &.seven, &.eight, &.nine, &.eleven, &.twenttwo, &.twentthree, &.twentsix, 
       &.thirtyone, &.thirtytwo, &.thirtythree{
          height: 300px;
          
        }

        &.twentseven, &.twenteight, &.twentnine{
          height: 200px;
          width: 80%;
          margin: 20% 0;
        }

        &.thirty{
          width: 50%;
          height: 500px;
        }

        
      &.thirt{
        .playToggle{
          width: 50px;
          height: 50px;
          position: relative;
          top: -60px;
         
        }
      }
     

        &.twentfive{
          height: 200px;
          width: 80%;
        }


      h4{
        font-size: 1.5em;
        margin-top: 10%;
      }

      h3{
        font-size: 1.5em;
        margin-top: 5%;
      }

      p{
        font-size: 1em;
        margin-top: 2%;
      }

      li{
        font-size: 0.8em;
      }
      }
    }
    
    .backUp{
      left: 0%;
    }
  }