body {
  margin: 0;
  background-color: 	#ffffff;
/*  cursor: url('arrow-cursor.png') 0 0, auto; /* set hot spot (x y) */
cursor: none; /* Hide the default cursor */
/*background-size: 85.5px 85.5px;
 background-image:
    linear-gradient(to right, #A9A9A9 1px, transparent 1px),
    linear-gradient(to bottom, #A9A9A9 1px, transparent 1px);
  background-attachment: fixed;
  background-position: center;
  cursor: none; /* Hide the default cursor */
}

.custom-cursor {
position: fixed;
top: 0;
left: 0;
width: 20px; /* Adjust size as needed */
height: 20px;
/*border: 2px solid #7f7f7f; /* black outline */
background-color: #69df46; /* light gray with 40% opacity */
border-radius: 50%; /* Make it a circle */
pointer-events: none; /* Ensure it doesn't block clicks */
z-index: 10000; /* Keep it above all other elements */
transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
transform: translate(-50%, -50%);
opacity: 0; /* Start as hidden */
}
.hidden {
opacity: 0; /* Hide when out of bounds */
}

.line1 {
border-top: 2px solid #7f7f7f;
padding: 10px 0; /* optional: add space between borders and content */
}
.line {
border-top: 2px solid #7f7f7f;
padding: 10px 0; /* optional: add space between borders and content */
margin: 30px;
}
.content {
   margin: 30px;
}
a {
text-decoration: none;
color: #7f7f7f;
}
.link a:hover {
text-decoration: none;
color: #69df46;  
}
.link h3{
line-height: 0px;
text-transform: uppercase;
font-weight: 600;
/*font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 25px;*/
/*font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);*/
}

.header {
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;

text-transform: uppercase;
/* font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);*/
 font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);
  display: inline; /* makes background only cover the text */
background-color: #69df46;
  margin: 0;       /* remove default margin */
  padding: 0;      /* remove any padding */
}
h3 {
  color: #333;
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
/*font-size: clamp(0.9rem, 1vw, 1rem);*/
/*text-transform: uppercase;*/
}
.title2 {
  margin: 30px;
}
.project-info {
   color: #7f7f7f;
  display: flex;
  /*justify-content: space-between; /* pushes them to opposite sides */
  align-items: center; /* keeps text aligned nicely */
  gap: 7rem;
  /*gap: 24%;*/
  font-family: "indivisible", sans-serif;
font-weight: 500;
/*font-style: italic;*/
 font-size: clamp(0.9rem, 1vw, 1rem);
 padding-top: 7px;
}

p {
font-family: "owners-text", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
}

.text {
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size:clamp(18px, 5vw, 30px);
  width: 50%;
  padding-top: 10px;
  padding-bottom: 40px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .text {
    width: 100%;
  }
}
.project {
 padding-bottom: 1px;
font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.9rem, 1vw, 1rem);

color: #7f7f7f;
padding-bottom: 7px;      /* remove any padding */
}

.project-descriptor {
color: #333;
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
padding-top: 30px;
}

.content1 {
  display: flex;
  flex-direction: row;      /* default: side by side */
  align-items: flex-start;  /* keeps text aligned neatly */
  gap: 20px;
  
  border-top: 2px solid #7f7f7f;
  padding: 20px 0;
}

.content1 img {
  max-width: 750px;  /* keeps images reasonable on large screens */
  height: auto;
  display: block;
}
.gif {
  max-width: 750px;  /* keeps images reasonable on large screens */
  height: auto;
  display: block;
}

.shrink-hover {
  transition: transform 0.3s ease;
}

.shrink-hover:hover {
  transform: scale(0.9);
}

/* MOBILE: stack image above text */
@media (max-width: 600px) {
  .content1 {
    flex-direction: column;   /* stack vertically */
    /*align-items: center;      /* optional: center text under image */
   /* text-align: center;       /* optional: center text */
  }

  .content1 img {
    width: 500px;  /* smaller image for mobile */
    max-width: 100%;
  }
}


.code {
  margin: 30px;
  display: flex; /* places them side by side */
  gap: 30px;     /* space between gifs */
  flex-wrap: wrap; /* allows wrapping on small screens */
/*  justify-content: center; /* center on larger screens */
}

.gif_wrapper {
  display: flex;
  flex-direction: column; /* stack gif + text */
/*  align-items: center;    /* center text under gif */
  width: 450px;           /* control size */
}

.gif_wrapper img.gif {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px; /* optional */
}

.caption {
margin-top: 20px; 
font-size: 14px;
color: #333;

font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
  /*text-align: center;*/
}

.button-container {
  display: flex;
  gap: 10px; /* adds space between the buttons */
}

.button1 {
  padding: 10px 15px;
  background-color: #333;
  color: white;
  border-radius: 5px;
  margin: 0;
}
.button2 {
  padding: 10px 15px;
  background-color: gray;
  color: white;
  border-radius: 5px;
  margin: 0;
}

.button2 a {
  color: white;
  text-decoration: none;
   cursor: pointer;
}



.wrapper {
/*margin-top: 20px;*/
color:	#ececec;
background-color: #1A191A;
text-align: center;
max-width: 100%;
overflow: hidden;
}
      
      .marquee {
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        animation: marquee 7s linear infinite;
      }
      
      .marquee p {
        text-transform: uppercase;
        font-family: "articulat-cf", sans-serif;
        font-weight: 600;
        font-style: normal;
          font-size: 30px;
        display: inline-block;
      }

      @keyframes marquee {
        0% {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(-50%, 0, 0);
        }
      }

/*
Indivisible Thin
font-family: "indivisible", sans-serif;
font-weight: 200;
font-style: normal;

Indivisible Thin Italic
font-family: "indivisible", sans-serif;
font-weight: 200;
font-style: italic;

Indivisible Light
font-family: "indivisible", sans-serif;
font-weight: 300;
font-style: normal;

Indivisible Light Italic
font-family: "indivisible", sans-serif;
font-weight: 300;
font-style: italic;

Indivisible Regular
font-family: "indivisible", sans-serif;
font-weight: 400;
font-style: normal;

Indivisible Italic
font-family: "indivisible", sans-serif;
font-weight: 400;
font-style: italic;

Indivisible Medium
font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: normal;

Indivisible Medium Italic
font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: italic;

Indivisible SemiBold
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;

Indivisible SemiBold Italic
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: italic;

Indivisible Bold
font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;

Indivisible Bold Italic
font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: italic;

Indivisible Black
font-family: "indivisible", sans-serif;
font-weight: 900;
font-style: normal;

Indivisible Black Italic
font-family: "indivisible", sans-serif;
font-weight: 900;
font-style: italic;
*/


/*
Owners Text XLight
font-family: "owners-text", sans-serif;
font-weight: 200;
font-style: normal;

Owners Text XLight Italic
font-family: "owners-text", sans-serif;
font-weight: 200;
font-style: italic;

Owners Text Light
font-family: "owners-text", sans-serif;
font-weight: 300;
font-style: normal;

Owners Text Light Italic
font-family: "owners-text", sans-serif;
font-weight: 300;
font-style: italic;

Owners Text Regular
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;

Owners Text Italic
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: italic;

Owners Text Medium
font-family: "owners-text", sans-serif;
font-weight: 500;
font-style: normal;

Owners Text Medium Italic
font-family: "owners-text", sans-serif;
font-weight: 500;
font-style: italic;

Owners Text Bold
font-family: "owners-text", sans-serif;
font-weight: 700;
font-style: normal;

Owners Text Bold Italic
font-family: "owners-text", sans-serif;
font-weight: 700;
font-style: italic;

Owners Text Black
font-family: "owners-text", sans-serif;
font-weight: 800;
font-style: normal;

Owners Text Black Italic
font-family: "owners-text", sans-serif;
font-weight: 800;
font-style: italic;
/*


/* 
Darkmode DarkmodeOn Thin
font-family: "darkmode-on", sans-serif;
font-weight: 100;
font-style: normal;

Darkmode DarkmodeOn XLight
font-family: "darkmode-on", sans-serif;
font-weight: 200;
font-style: normal;

Darkmode DarkmodeOn Light
font-family: "darkmode-on", sans-serif;
font-weight: 300;
font-style: normal;

Darkmode DarkmodeOn Regular
font-family: "darkmode-on", sans-serif;
font-weight: 400;
font-style: normal;

Darkmode DarkmodeOn Medium
font-family: "darkmode-on", sans-serif;
font-weight: 500;
font-style: normal;

Darkmode DarkmodeOn Bold
font-family: "darkmode-on", sans-serif;
font-weight: 700;
font-style: normal;

Darkmode DarkmodeOn XBold
font-family: "darkmode-on", sans-serif;
font-weight: 800;
font-style: normal;

Darkmode DarkmodeOn Black
font-family: "darkmode-on", sans-serif;
font-weight: 900;
font-style: normal; 
*/