body {
    margin: 0;
  }
  
  html {
    /* perspective: 12px; */
    overflow-x: hidden;
  }
  
  .main {
    position: absolute;
  }

  canvas {
    position: absolute;
    z-index: 2020;
  }
  
  .header_area {
    height: var(--header_height);
  }

  .collapsing_header {
    height: clamp(var(--header_height), calc(150px - (1px * var(--page_main3_scroll_top))), 150px);
    transition: 0.35s; 
  }

  .header_fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    box-shadow: 0 0 .5em rgba(0, 0, 0, 0.5);
  }

  .collapsed_header {
    height: var(--header_height) !important;
    transition: 0.25s; 
  }



/*   
  .floater {
    will-change: transform;
    transform: translate3d(0px, clamp(-150px, calc(-50px + 1px * var(--scroll1_percent)), 150px), 0px);
    transition: transform 1.5s cubic-bezier(0, 0, 0, 1) 0s;
  } */




  .page__ {
    height: calc(100vh - 56px);
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
    /* perspective: 12px; */
    /* scroll-behavior: smooth; */
    background-color: black;
  
    position: absolute;
    /* top: 40px; */
    /* left: 0; */
  }
  
  .page_main {
    height: calc(100vh - var(--header_height));
    overflow-x: hidden;
    overflow-y: auto;
    /* perspective: 12px; */
    scroll-behavior: smooth;
    background-color: black;
  
    position: absolute;
    /* top: 40px; */
    left: 0;
  }
  
  .parallax_wrapper {
    /* height: (100vh - 56px); */
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
    perspective: 12px;
    /* scroll-behavior: smooth; */
    transform-style: preserve-3d;  
  }



  section {
    height: 600px;
  }

  section {
    position: relative;
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* color: hsl(calc(3.60 * var(--scroll_percent)), 100%, 50%); */

    padding-right: 6%;
    padding-left: 6%;
  }
  .section_title_parallax {
    will-change: transform;
    /* transform: translate3d(0px, 28px, 0px); */
    transition: transform 1.5s cubic-bezier(0, 0, 0, 1);
    transform: translateZ(1px) scale(1.0);
    text-shadow: 15px 25px 20px #00000060;
    /* transition: all 1s ease-out; */
  }
  .section_content {
    /* transform: translateZ(1px) scale(1.0); */
    /* text-shadow: 5px 8px 7px #00000060; */
    margin: 0 20px 0 20px;
    padding: 0 40px 0 40px;
  }
  
  
  .section_parallax_none {
    transform-style: preserve-3d;
    /* background-color: #111; */
    z-index: 999;
    /* min-height: calc(101vh - 100vh * (1 + var(--parallax_height_numerator)) / (1 + var(--parallax_height_denominator)) ); */
    /* height: calc(101vh * (var(--parallax_height_numerator) - 1) / (var(--parallax_height_denominator) - 1) ); */
    /* height: calc(101vh * (var(--parallax_height_numerator) + 0) / (var(--parallax_height_denominator) + 0) ); */
    min-height: 25vh;
  }
  .section_parallax {
    transform-style: preserve-3d;
    /* height: calc(101vh * (0 + var(--parallax_height_numerator)) / (0 + var(--parallax_height_denominator)) ); */
    /* height: var(--section_parallax_height); */
    /* height: 100vh; */
    height: calc(var(--section_parallax_height) * 100vh);
  } 
  
  .section_parallax_background {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* transform: translateZ(4px) scale(calc(2.02 - var(--parallax_height_base_12) / 12)); */
    /* transform: translateZ(calc(-12px * var(--parallax_height_numerator) / var(--parallax_height_denominator))) scale(calc(1.02 + (1 + var(--parallax_height_numerator)) / (1 + var(--parallax_height_denominator)))); */
    /* transform: translateZ(calc(-12px * var(--parallax_height_numerator) / var(--parallax_height_denominator))) scale(2); */
    transform: translateZ(-4px) scale(calc(1.00 + 0.33 / var(--section_parallax_height)));
    /* background-size: 100%; */
    z-index: -1;
  }
  
  .bg1.section_parallax_background {
    background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45)),
      /* url("https://picsum.photos/1080/720"); */
      url(../images/University-of-Illinois-Zoom-background-1-3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .bg2.section_parallax_background {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
      /* url("https://picsum.photos/1080/740"); */
      url(../images/Stockholm.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .bg3.section_parallax_background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("https://picsum.photos/1080/720");
      /* url(Olive_Oil_Unsplash.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .bg4.section_parallax_background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("https://picsum.photos/1080/740");
      /* url(1280px-Ancient_Olive_Oil_Workshops_at_Kanlıdivane-1.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .page4_bg {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("https://picsum.photos/1290/940");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }



 
/* when test_trigger1 is hovered make test_div blue */
body:has(#test_trigger1:hover) #test_div {
  background: blue;
}



  /* Increase section_title_parallax if screen is wide enough for side-by-side title and content */
  @media only screen and (min-width: 600px) {
    .section_title_parallax {
      transform: translateZ(2px) scale(1.0);
      will-change: transform;
      transition: transform 1.5s cubic-bezier(0, 0, 0, 1);
    }
    /* .section_parallax::after {
      transform: translateZ(-4px) scale(calc(1.00 + 0.33 / var(--section_parallax_height)));
    } */
  }
  
  
  
  /* .page {
    display: inline-block;
  } */
  
  /* @media screen and (min-width: 768px) {
    section div {
      font-size: 8rem;
    }
    .section_parallax div {
      font-size: 4rem;
    }
  } */