html, body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: 	#A9A9A9;
/*  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: 25px; /* Adjust size as needed */
height: 25px;
/*border: 2px solid #7f7f7f; /* black outline */
background-color: #69df46; /* light gray with 40% opacity */
/*border-radius: 50%;  Make it a circle */
border-radius: 0%; /* Make it a square */
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 */
}
.custom-cursor.cursor-rotate {
  transform: translate(-50%, -50%) rotate(20deg);
}
.hidden {
opacity: 0; /* Hide when out of bounds */
}

/* Rotate custom cursor when hovering over links */
a:hover ~ .custom-cursor,
.custom-cursor.link-hover {
  transform: translate(-50%, -50%) rotate(20deg);
}

.line1 { 
border-top: 1.5px solid #1A191A;
padding: 0; /* optional: add space between borders and content */
}


.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  box-sizing: border-box;
}

.nav-item {
  /* Optional: add padding or style for nav items */
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size:clamp(13px, 2vw, 30px);
color: #1A191A;
}
.nav-item a:hover {
font-size:clamp(13px, 3vw, 26.5px);
  color: #69df46; /* Change color on hover */
  font-family: "findreplace", sans-serif;
font-weight: 900;
font-style: normal;
text-transform: capitalize;
  text-decoration: none;
}


.nav-item a {
  transition: letter-spacing 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.08em;
}

.nav-item a:hover {
letter-spacing: 0.08em;
}

.nav-item.active a {
  color: #ececec; /* Change color when clicked */
  text-decoration: none;
}
.nav-item.active a:hover {
  color: #69df46; /* Change color on hover even when active */
  text-decoration: none;
}

.nav-item a {
  text-decoration: none;
  color: #1A191A;
}

.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 a{
line-height: 0px;
text-transform: uppercase;
font-family: "findreplace", sans-serif;
font-weight: 900;
font-style: normal;
font-size:clamp(13px, 3vw, 30px);
padding-bottom: 20px;
color: #1A191A;
}

.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: #1A191A;
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: 100%;
  padding-top: 10px;
  padding-bottom: 40px;
}
.text2 {
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size:clamp(18px, 5vw, 30px);
  width: 55%;
  padding-top: 10px;
  padding-bottom: 40px;
    flex: 1 1 0;
}


/* 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 */
}


.container {
padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  max-width: 100%;
  box-sizing: border-box;
}


.info-container {
  padding-left: 50px;
  margin-right: -100px;
  flex: 0 0 650px;
  max-width: 600px;
  margin-left: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.info1{
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size:clamp(13px, 5vw, 18px);  
}

.info1 a:hover {
  color: #69df46; /* Change color on hover */
  text-decoration: none;
}

.title {
  text-transform: capitalize;
font-family: "findreplace", sans-serif;
font-weight: 900;
font-style: normal;
font-size:clamp(13px, 3vw, 30px);
background-color: #69df46;
width: fit-content;
  margin: 0;       /* remove default margin */
  padding: 0;      /* remove any padding */
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .text2 {
    width: 100%;
  }
  .info-container {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 800px) {
  .info-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

.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: 1.5px solid #1A191A;
  padding: 10px 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(1.02);
}

/* 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: 35px;     /* 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: 455px;           /* 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; 
*/

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

FindReplace Light
font-family: "findreplace", sans-serif;
font-weight: 300;
font-style: normal;

FindReplace Regular
font-family: "findreplace", sans-serif;
font-weight: 400;
font-style: normal;

FindReplace Medium
font-family: "findreplace", sans-serif;
font-weight: 500;
font-style: normal;

FindReplace Bold
font-family: "findreplace", sans-serif;
font-weight: 700;
font-style: normal;

FindReplace Black
font-family: "findreplace", sans-serif;
font-weight: 900;
font-style: normal;

*/