:root {
    /* COLORS */
    --color-bg-primary: #151515;
    --color-bg-primary-transparent: #151515b2;
    --color-bg-secondary: #1D1D1D;
    --color-bg-gray: #222121;
    --color-scroll-thumb: #2e2d2d;
    --color-white: #ffffff;
    --color-transparent: #ffffff00;
    --color-black: #000000;
    --color-highlighted: #ffd700;

  
    /* TYPOGRAPHY */
    --font-family-main: 'roc-grotesk', sans-serif;
    --font-size-small: 1rem;    /* 12px */
    --font-size-very-small: 0.5rem;    /* 12px */
    --font-size-base: 1.25rem;     /* 20px */
    --font-size-large: 1.5rem;     /* 20px */
    --font-size-tag: 1rem;         /* 16px */
    --font-size-h4: 0.90rem;      /* 30px */
    --font-size-h3: 1.25rem;      /* 30px */
    --font-size-h2: 2.75rem;      /* 50px */
    --font-size-h1: 3.2rem;        /* interpreted from 4.2vw — adjust as needed */
    --font-size-subtitle: 1.875rem;/* 30px */
    --letter-spacing-tight: -0.156rem; /* -2.5px */
    --letter-spacing-slight: 0.015em; /* -2.5px */
    --letter-spacing-subtitle: -0.0625rem; /* -1px */
    --letter-spacing-tag: 0.125rem; /* -1px */
    --word-spacing-intro: 0.15em;
    --line-height-base: 1.75;
    --line-height-headers: 1.25;
    --font-weight-main: 100;
  
    /* SPACING */
    --spacing-xs: 0.4rem;   /* ~6px */
    --spacing-sm: 0.8rem;   /* ~13px */
    --spacing-md: 1.25rem;  /* 20px */
    --spacing-lg: 2.5rem;   /* 40px */
    --spacing-xlg: 3.75rem;   /* 40px */
    --spacing-xl: 5rem;     /* 80px */
    --spacing-xxl: 7.5rem;  /* 120px */
  
    /* MARGINS & PADDINGS */
    --margin-top-lg: 6.25rem;     /* 100px */
    --margin-bottom-lg: 6.25rem;  /* 100px */
    --padding-button-y: 0.75rem;   /* 8px */
    --padding-button-x: 3rem;  /* 20px */
    --padding-section-top: 5rem;  /* adjust based on design */
    --padding-section-side: 5rem;
    --margin-side-standard: 10vw;

    --section-padding-top: 15vh;
    --mobile-margin: 5vw;

    
    /* BORDER & RADIUS */
    --border-thin: 1px solid var(--color-white);
    --border-thin-off: 1px solid var(--color-transparent);
    --border-radius-pill: 0.625rem; /* 10px */
    --border-radius-none: 0px;
  
    /* SHADOWS */
    --box-shadow-soft: 0 0.125rem 0.5625rem 0.3125rem rgba(0, 0, 0, 0.1); /* 0px 2px 9px 5px */
    --box-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0.1);
  
    /* SCROLLBAR */
    --scrollbar-width: 0.375rem; /* 6px */
  
    /* TRANSITIONS */
    --transition-main: 0.35s cubic-bezier(0.8, 0, 0, 1);    
    --transition-main-slow: 0.7s cubic-bezier(0.8, 0, 0, 1);  
    --transition-main-very-slow: 0.7s cubic-bezier(0.5, 0.1, 0.1, 0.5);  
    --transition-speed: 0.35s;
    --transition-function: cubic-bezier(0.8, 0, 0, 1);    

    /* LINES */
    --line-tickness: 1px;
    --line-offset-text: 0.25em;
    --line-offset-text-small: 0.15em;
  }
  

div {
/* border: 1px solid red; */
}

html {
  scroll-behavior: smooth;
}


/* ---- FORCE HIDE SYSTEM CURSOR (loads immediately) ---- */
html, body, body * {
  cursor: none !important;
}

/* Keep your original “disabled on <= 600px” behavior */
@media (max-width: 600px) {
  html, body, body * {
    cursor: auto !important;
  }
}


  body {
    background-color: var(--color-bg-primary);
    scroll-behavior: smooth;
    /* Typography */
    font-family: var(--font-family-main);
    font-weight: 300;
    color: var(--color-white);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-slight);
    padding: 0px!important;
    margin: 0px!important;

  }

  canvas {
    position: fixed;
    top: 0;
    z-index: -9999999;
  }
  
/* Typgoraphy */

p {
  font-weight: var(--font-weight-main);
  margin-top: -0.5em;
}

  a {
    color: var(--color-white);
    font-weight: var(--font-weight-main);
    text-decoration: none;
  }

.headerPage {
  text-align: center;
}

.titleHeader {
  text-align: center;
  width: 100%;
  height: 33vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

  h1  {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-main);
  }


  h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-main);
    line-height: var(--line-height-headers);
  }


h3 { 
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-main);
  margin-top: -0.5em;

}

/* CV headers */
h4  { 
  text-transform: uppercase;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-main);
  letter-spacing: var(--letter-spacing-tag);
  margin-top: -0.5em;
  /* margin-bottom: var(--spacing-lg); */
}

.underlinedTextNoAnimation {
  text-decoration: underline;
  text-decoration-thickness: var(--line-tickness);
  text-underline-offset: var(--line-offset-text);
}

.linkTextSmall {
  position: relative;
  display: inline-block;
  text-underline-offset: var(--line-offset-text-small);
  text-decoration: none; /* disable native underline */
  transition: transform var(--transition-main);
  padding: 0px 0px 0px 0px;
  margin: -0px -0px -0px -0px; /* So it doesn't change layout */       
}

.linkTextSmall::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: var(--line-offset-text-small);
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--transition-main), opacity var(--transition-main);
  opacity: 1;
}

.linkTextSmall:hover {
  transform: translateY(-0.15em);
}

.linkTextSmall:hover::after {
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
}




.linkTextSmallReversed {
  position: relative;
  display: inline-block;
  text-underline-offset: var(--line-offset-text-small);
  transition: transform var(--transition-main);
  padding: 0;
  margin: 0;
}

.linkTextSmallReversed::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: var(--line-offset-text-small);
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--transition-main), opacity var(--transition-main);
  opacity: 0; /* hidden by default */
}

.linkTextSmallReversed:hover {
  transform: translateY(-0.25em);
}

.linkTextSmallReversed:hover::after {
  transform: translateX(-50%) scaleX(1); /* grow into view */
  opacity: 1; /* fade in */
}



.linkTextReveal {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0;
  margin: 0;
  transition: transform var(--transition-main);
  text-underline-offset: var(--line-offset-text-small);
}

.linkTextReveal::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: var(--line-offset-text-small);
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--transition-main), opacity var(--transition-main);
  opacity: 0;
}

.linkTextReveal:hover,
.linkTextReveal:active,
.linkTextReveal.active {
  transform: translateY(-0.15em);
}

.linkTextReveal:hover::after,
.linkTextReveal:active::after,
.linkTextReveal.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}





.yellow {
  background-color: var(--color-highlighted);
}

.highlighted {
  border: 1px solid var(--color-highlighted);
}


.flexHorizonal {
  display: flex;
  flex-direction: row;
}

.flexHorizonalSpread {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flexHorizonalReverse {
  display: flex;
  flex-direction: row-reverse;
}

  .contentWrapper {
    margin-left: var(--margin-side-standard);
    margin-right: var(--margin-side-standard);
  }


  .flexVertical {
    display: flex;
    flex-direction: column;
  }

  .selfCentered {
    align-self: center;
    justify-self: center;
  }

.fixed {
  position: fixed;
}



.homepageheader-wrapper {
  height: 35vh;
  min-height: 350px;
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  display: flex;
  align-items: flex-end;

}

.hp-intro {
  font-size: 32px;
  padding-top: 20vh;
  width: 60vw;
}

@media (min-width: 1400px) {
.tabletOn {
  display: none!important;
}
}
@media (max-width: 1400px) { 
  .hp-intro {
  width: 80vw;
  /* margin-bottom: 20vh; */
}

.homepageheader-wrapper {
  height: 40vh;
}

.tabletOn {
  display: block!important;
}

.tabletOff {
  display: none!important;
}

}


@media (max-width: 900px) { 
.hp-intro {
  font-size: 28px;
  padding-top: 20vh;
  width: 80vw;
  /* margin-bottom: 20vh; */
  
}


.homepageheader-wrapper {
  height: 45vh;
}

}

@media (max-width: 1200px) { 
.homepageheader-wrapper {
  height: 50vh;
  display: flex;
  margin-bottom: 10vh;
}
  
}

@media (max-width: 700px) { 
  .hp-intro {
  font-size: 24px;
  /* padding-top: 20vh; */
  /* width: 100vw; */
  
}

.mobileOff {
  display: none!important;
}



.mainFooter {
  justify-content:center;
}

.homepageheader-wrapper {
  height: 75vh;
  display: flex;
  margin-bottom: 10vh;
}
}

@media (max-width: 350px) { 
  .hp-intro {
  font-size: 20px;
  /* padding-top: 20vh; */
  width: 90vw;

}

.homepageheader-wrapper {
  height: 70vh;

  display: flex;
  margin-bottom: 10vh;
      margin-left: var(--mobile-margin);
  margin-right: var(--mobile-margin);

}


}


.mobileOn {
  display: none!important;
}





img[data-src],
video[data-src] {
  opacity: 0;
  transition: opacity var(--transition-main);
}

.is-loaded {
  opacity: 1;
}