:root {
    --background-color: #131313;
    --alive-color: #4f4f4f;
    --grid-cell-size: 8; /* Adjusted cell size to accommodate dot size and padding (3px dot + 2*2.5px padding) */
    --dot-size: 3px; /* Size of each dot */
    --dot-padding: 2.5px; /* Padding around each dot */
    --flash-color-1: #d9a066; /* Muted warm tones resembling amberchrome */
    --flash-color-2: #b85c38;
    --flash-color-3: #a17a74;
    --flash-color-4: #9b3b28;
    --flash-duration: 200; /* Duration of color flash in milliseconds */
    --fill-density-threshold: -0.002; /* Density threshold for noise value */
    --update-interval: 50; /* Interval in milliseconds for updating the grid */
    --noise-frequency-x: 0.8; /* Frequency of noise in x direction */
    --noise-frequency-y: 0.02; /* Frequency of noise in y direction */
    --noise-z: 0; /* Z value for 3D noise */
    --circle-scale-factor: 0.35; /* Scale factor for the radius of the circle based on viewport size */
}
body, html {
    margin: 0;
    overflow: hidden;
    height: 100%;
    background: var(--background-color);
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.filter-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.144); /* Example filter: semi-transparent white overlay */
    mix-blend-mode: overlay; /* Blend mode for visual effect */
}

#contentWrapper {
    position: relative;
    z-index: 1; /* Ensure content is above the canvas */
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto; /* Allow interaction with content */
}

* {
    color: #fff;
    font-family: "IBM Plex Mono";
}

h1 {
    color: #fff;
    font-size: 30pt;
    font-weight: 900;
    line-height: 1;
}

a {
    position: relative;
  }
  
  a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(63, 126, 81);
    z-index: -1;
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: left;
  }
  
  a:hover::before {
    transform: scaleX(1);
  }
  

.info-wrap {
    max-width: 700px;
    width: 100%;
    padding: 50px;
}

.works {
    margin-top: 40px;
    margin-bottom: 40px;;
}