* {


    transition: all 0.8s ease-in-out !important;
}

:root {


  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  
/*ink colors*/
  --inkBlack:lab(0 0 0 / 0.8);
  --inkWhite:lab(100 0 0 / 0.7);

/*paper colors*/

  --PLight:#F5F3F1;
  --PYellow:#F7C57C;
  --PBrown:#A9794B;
  --PDarkgrey:#81786C;
  --PLightgrey:#AE9D89;
  --PGreen:#749C79;
  --PAntraciet:#3E3D3A;
  --PCoffee:#442F29;
  --PIvor:#F3F2ED;
  --PWhite:#F5F3F1;
  --POfficegrey:#DDDDDD;

;

}

@font-face {
  font-family: PPObject;
  src: url(fonts/PPObjectSans-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}



/*colors */


.inkBlack {

    color: var(--inkBlack);

}

.inkWhite {

    color: var(--inkWhite);

}

/*paper colors*/


.PBrown{

    background-color: var(--PBrown);
}

.PDarkgrey {

    background-color: var(--PDarkgrey);
}

.PYellow {

    background-color: var(--PYellow);
}
.PGreen {
    background-color: var(--PGreen);
}

.PAntraciet {

    background-color: var(--PAntraciet);
}

.PCoffee {

    background-color: var(--PCoffee);
}

.POfficegrey {
    background-color: var(--POfficegrey);
}

.PIvor {
    background-color: var(--PIvor);

}


/*Colors Projects*/

.PDekmantel {

    background-color: #FCB578;
}

.PRobert {

    background-color: #349175;
}

.PDailydragon{
    background-color: #ec594a;
}


.flex{

    display: flex;
}


/*nav bar*/


 .custom-navbar {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      background-color: transparent;
    }


    .nav-blur {


       background-color: #F3F2ED87;
        backdrop-filter: blur(2.5px);
        
        color: var(--inkBlack);
        border-radius: 20px;
        margin: 0.1rem;
        font-size: 0.8rem;
    }

.nav-link {
     
      margin: 0 0.5rem;
      padding: 0.5rem 1rem;
      color: currentColor;
      
    }

/*.nav-item:hover {

    transform: rotate(3deg);
    color: currentColor;
      
    }*/

.nav-link:hover{

    color: currentColor;
}


.card-down {

    transform: translateY(1.5rem);
}

.card-up {

    transform: translateY(-1.5rem);
}

.card-left {

    transform: translateX(-1.5rem);
}

.card-right {

    transform: translateX(1.5rem);
}



body {

    

    background-color: var(--light);
    font-size: 18px;
    line-height: 1.38;
    font-style: normal;
    font-family: "PPObject",sans-serif;


    color: var(--inkBlack);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
}

.pt-grid {

    padding-top:0.75rem;
}

.pb-grid {

    padding-bottom:0.75rem;
}

.p-grid {

    padding: 0.75rem;
}





.card-rotate-1 {

    transform: rotate(-1.5deg);
}

.card-rotate-2 {

    transform: rotate(2deg);
}

.card-rotate-3 {

    transform: rotate(2.5deg);
}

/*.rotate-1:hover{

    transform: rotate(0deg);
}*/

.card-rotate-4{
    
    transform: rotate(-4deg);

}

/*.rotate-4:hover{

    transform: rotate(0deg);
}
*/

.project-grid {
    display:grid;
    gap:.75rem;
    grid-template-columns: repeat(12, 1fr);

}

.project-grid-item {
    grid-column: span 12;
}

/*.project-grid-item:hover{
    transform: rotate(0deg);
}*/


.project-grid-item-2 {
    grid-column: span 12;
}

.project-grid-item-3 {
    grid-column: span 12;
}

.project-grid-item-3 {
    grid-column: span 12;
}

.grid-item-bottom {

    align-self: end;
}


/*mobile*/
@media only screen and (min-width: 0px) {
    
    .project-grid-item  { grid-column: span 12; }
    .project-grid-item-2 { grid-column:span 12; }
    .project-grid-item-3 { grid-column:span 12; }
    .project-grid-item-4 { grid-column:span 12; }
    .project-grid-item-5 { grid-column:span 6; }

    .koptekst { font-size:1rem; }
    
}

/*ipad*/
@media only screen and (min-width: 768px) {
    .project-grid-item { grid-column: span 6;}
    .project-grid-item-2 { grid-column:span 6; }
    .project-grid-item-3 { grid-column:span 12; }
    .project-grid-item-4 { grid-column:span 8; }
    .project-grid-item-5 { grid-column:span 6; }
    .koptekst { font-size:1.5rem; }


    
    
}

/*desktop*/
@media only screen and (min-width: 1024px) {
    .project-grid-item { grid-column: span 4;}
    .project-grid-item-2 { grid-column:span 6; }
    .project-grid-item-3 { grid-column:span 12; }
    .project-grid-item-4 { grid-column:span 8; }
    .project-grid-item-5 { grid-column:span 6; }
    .koptekst { font-size:1.75rem; }
    
    
}



.w-100{
    width: 100%;
}


.grid-col-span-4 {

    grid-column: span 4;
}

.grid-col-span-6 {

    grid-column: span 6;
}


.texture-bg {
  
  background-image: url('texture/soft-wallpaper2.png');
  background-repeat: repeat;
  background-size: auto; /* or 100px 100px to control scale */
  opacity: 1; /* keep solid */
}


.display-2{

    line-height: 1.18;
}



body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {


    margin: 0;
    padding: 0;

    font-family: PPObject;
    letter-spacing: 0.01em;
    line-height: 1.35;
    font-weight: 300;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    padding: 0;
    text-indent: 0em;
    border-bottom: none;
    text-align: left;


/*    font-size: 1.23rem;*/
}

p{

    max-width: 45ch;
}


.bold{

    font-weight: 600;
}


.small {

        font-size: 12px;

    }

.medium 

    {

        font-size: 20px;

    }

    

    .bodytekst {

        max-width: 50ch;
    }

    .bodytekst-medium{

        font-size: 2rem;
    }

    .scrolltekst{

        overflow: scroll;
        max-height: 50vh;
    }


main {
    
}




.img-fill{

    height: 100%;
    width: auto;
    overflow: hidden;
}

 


/*effects*/

.diffrence {
mix-blend-mode: difference;
}



header  {

        
        color: currentColor;
        position: fixed;
        transition: transform .4s var(--easingOut);
        z-index: 5000;



}






.border-bottom { 

        color:var(--inkBlack)!important;  
        border-color: var(--inkBlack)!important;

}

.border-top {
    color:var(--inkBlack)!important;  
        border-color: var(--inkBlack)!important;


}




a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
/*    filter: blur(0.5px);*/

}

a:hover { 

/*    color: royalblue;*/
    color: currentColor;
    cursor: pointer;
    filter: blur(1.5px);



}

tbody, td, tfoot, th, thead, tr {
    color: currentColor;
}


th {

    color: currentColor;
    font-style: current-font;
    font-weight: normal;
}


.videofill {

    height: -webkit-fill-available;
    background-color: black;

}


.blur {


    filter: blur(4px);
}


.blur:hover {

    filter: blur(0px);
}



.fullscreen{

    height: 100vh;
}



}

.spacer-12{

padding-bottom: var(--spacing-12);
border-color: var(--inkBlack) !important;

}



.spacer-16{

padding-bottom: var(--spacing-16);
border-color: var(--inkBlack)!important;

}

.spacer-20{

padding-bottom: var(--spacing-20);
border-color: var(--inkBlack)!important;

}

.spacer-30{

padding-bottom: var(--spacing-30);
border-color: var(--inkBlack)!important;

}

.spacer-40{

padding-bottom: var(--spacing-40);
color: var(--inkBlack);
border-color: var(--inkBlack)!important;

}

.spacer-80{

padding-bottom: var(--spacing-80);
border-color: var(--inkBlack)!important;

}