body {
   height: 100%;
  margin: 0;
  /*background-color:#fff;*/
  background-color: 	#ececec;
 /* background-size: 45px 45px;
  background-image: radial-gradient(circle, #A9A9A9 1px, rgba(0, 0, 0, 0) 1px);
  background-position: center;
  background-attachment: fixed;*/
  cursor: none; /* Hide the default cursor */
}
@media (max-width: 600px) {
  .info-content .portfolio-bio .title .bio{
      flex-direction: column;
      align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .profile {
    display: none;
  }
}

.main-linebar {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;

  outline: 9px solid #1A191A;
  width: 100vw;
  padding: 0;
}
/*.main-linebar{
  justify-items: center;
  outline-style: solid;
  outline-width: 9px;
  outline-color:#33cccc;
  width: 95%;
  margin: auto;
  padding: 0;
position: fixed;
z-index: 1;

/* border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}*/
.gabe {
margin-left: 30px;
font-family: "articulat-cf", sans-serif;
font-weight: 700;
font-style: normal;
/*text-transform: uppercase;*/
  font-size: clamp(15px, 8vw, 15px);
  color: #1A191A;
 /* color: #002fa7;*/
}

/*.heading1{
  margin-top: -3px;
  display: inline-block;
text-align: left;
}*/
.heading1:hover:not(.active) {
color: #6b6b6b;
}
/*.topnav {
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  justify-content: 
  align-items: center;
 /* padding: 2px 30px;*
  background-color: #ececec;
  position: fixed;
  top: 10px;
  left: 0;
  width: 100vw;
  z-index: 1;
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(13px, 8vw, 13px);
}*/
.topnav {
  z-index: 1;
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(13px, 8vw, 13px);
margin:auto;
outline-width: 20px;
padding-top: 20px;
padding-bottom: 20px;
  position: fixed;
  top: 10px;
  left: 0;              
  width: 100%;       
  background-color: #ececec;
  border-bottom: 2px solid #1A191A;
}

.heading1 a {
  margin: 0;
  text-decoration: none;
  color: inherit;
}

.nav-items ul {
 
  display: flex;
  gap: 30px; /* spacing between links */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-items li a {
  margin-right: 30px;
  display: block;
  line-height: 30px;
  color: #1A191A;
 /* color: #1A191A;*/
  text-decoration: none;
}

.nav-items a:hover:not(.active) {
  text-decoration: overline;
  text-decoration-thickness: 2px;
  color: #1e4bf5;
}

.nav-items .active {
  text-decoration: overline;
  text-decoration-thickness: 2px;
}

/* Hamburger icon */
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
  padding-right: 10px;
}

@media screen and (max-width: 600px) {
  .nav-items {
    display: none;
    width: 100%;
    background-color: #ececec;
    position: absolute;
    top: 73px; /* Adjust based on your .topnav height */
    right: 0; /* Align to the right */
    z-index: 999;
    border-bottom: 1px solid #ccc;
   /* border: 1px solid #ccc;*/
    /*border-radius: 4px;*/
    padding: 0;
    padding-bottom: 20px;
  }

  .nav-items ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 0;
    margin: 0;
  }

  .nav-items li {
    margin: 0;
    margin-right: -20px;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
  }

  .nav-items.show {
    display: block;
  }
}

/*
.heading1{
  margin-top:-3px;
  display: inline-block;
text-align: left;
}
h1:hover:not(.active) {
color: #6b6b6b;
}

.topnav {
  z-index: 1;
  overflow: hidden;
  font-family: "articulat-cf", sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
  font-size: clamp(15px, 8vw, 15px);
  margin-top: 10px;
  position: 
  top: 0; 
  left: 2.5%; 
  width: 95%; 
}
   

.navbar {
  outline-style: solid;
  outline-color:	#1A191A;
  outline-width: 1px;
  }
  .nav-items {
    margin-top: -65px;
  }
  
  
  .topnav, .nav-items a:hover:not(.active) {
    background-color: transparent;
    
    text-decoration: overline;
  }
  
  a {
    text-decoration:none;
    color: 	#1A191A;
  }
  

  ul {
    list-style-type: none;
    margin: -10;
    padding: 0;
    overflow: hidden;
    float: right;
  }
  
  
  li a {
    
    text-align: right;
    display: block;
    line-height: 30px;
  
  }
  .active {
    
    text-decoration: overline;
   
  }
*/


  /*.socials {
    margin-right: 30%;
  }*/

 

/*border-radius: 50%;*/
 /* padding: 10px;*/
  /*.fa {
    font-size: 30px;
    width: 30px;
    text-decoration: none;
  }
  .fa:hover {
    opacity: 0.7;
  }
  .fa-instagram {
    background: transparent;
    color: 	#1A191A;
  }
  .fa-linkedin {
    background: transparent;
    color:	#1A191A;
  }
  .footer {
    position: relative;
    margin: auto;
    margin-top: 55px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    text-align: center;
   
}*/

   
    
.linebar1 {
  outline-style: solid;
  outline-width: 0.1px;
  outline-color: #A9A9A9;
  width: 95vw;
  margin: 100px auto 0 auto; /* Top margin + horizontal centering */
  padding: 0;
}
    
    .linebar {
      outline-style: solid;
      outline-color:#A9A9A9;
      outline-width: 0.1px;
      width: 100vw;
     margin: auto;
    /* padding: 0;*/
    }

   
   

  .main-title {
    margin-top: 10%;
    margin-left: 2.5%;
     width: 95%;
   color: #1A191A;
   font-family: "articulat-cf", sans-serif;
   font-weight: 900;
   font-style: normal;
 font-size: 60px;
 /*text-transform: uppercase;*/
   }
/*.space {
  width: 100%;
  height: auto;
  padding-right: 300px ;
}*/
/*.portfolio-bio {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}*/
.portfolio-bio {
   width: 90%;
  column-gap: 35px;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 195px;
  /*margin-top: 194px;*/
  padding-bottom: 50px;
  padding-left: 23px;
  padding-right:23px;
  
}

img {
  max-width: 300px;
  filter: grayscale(100%);
}
.profile {
  
  width: 100%;
  height: auto;
 object-fit: contain;
  
}

.bio {
 
  min-width: 200px;
  font-family: "dico-code-one", mono;
  font-weight: 400;
  font-style: normal;
 /* font-size: 13px;
  line-height: 20px;*/
   font-size: clamp(13px, 0.9vw, 20px);
  line-height: clamp(20px, 1.4vw, 30px);

}

/*.bio p {
  line-height: 20px;
  margin-top: 1em;
}*/

.I {
  font-family: "articulat-cf", sans-serif;
        font-weight: 800;
        font-style: normal;
         font-size: clamp(20px, 2.5vw, 50px);
        line-height: clamp(20px, 3vw, 50px);
        /*font-size: clamp(20px, 5vw, 45px);
        line-height: clamp(35px, 5vw, 50px);*/

  /* font-size: clamp(12px, 3vw, 25px);
  line-height: clamp(18px, 3vw, 30px);
  font-size: clamp(20px, 5vw, 30px);
  line-height: clamp(20px, 10vw, 35px);
  font-family: "articulat-cf", sans-serif;
  font-weight: 700;
  font-style: normal;*/
  text-transform: uppercase;
  /*line-height: clamp(20px, 10vw, 35px);
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 5vw, 30px);*/
  color: #1A191A;
  /*color: #6b6b6b;*/
}

/*.smile {
 
  width: clamp(300px, 30vw, 900px);
 margin: 0 auto;
 top: -25%;
  display: block;
  position: absolute;
  z-index: 10;
  pointer-events: auto;
  transition: none !important;
  transform: none !important;
  outline: none !important;
}

@media (min-width: 1440px) {
  .smile {
    position: relative;
    left: 70%;
    transform: translateX(-50%);
  }
}*.

.second-p {
  padding-top: 20px;
width: 50%;
/*margin-left:50% ;
}*/

.third-p {
  padding-top: 20px;
 width: 60%;
}

@media (min-width: 600px) {
  .portfolio-bio {
      flex-direction: row;
      align-items: flex-start;
  }
 
  .profile {
    flex: 1;
  }
  .bio {
      flex: 2;
  }
}


  .link {
    color: #1e4bf5;
    text-decoration: none;
  }
 /* .info-content {
  
    padding-top: 1px;
    width: 95%;
  margin: auto;
    flex-wrap: wrap;
  }
  .title {
    color: #1A191A;
    font-family: "Theinhardt-Pan-Italic";
 
        font-size: 19px;
        
  }
  .title2 {
    color: #353935;
        font-family: "Theinhardt-Pan-regular";
        font-size: 15px;
  }*/
  .italic {
    color: #1e4bf5;
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(12px, 1.5vw, 18px);
  }
 /*  .info {
    float: left;
    color: 	#1e4bf5;
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: italic;
        font-size: 13px;
  }
  .experience-info {
    float: left;
    margin-left: -10px;
    color:	#1e4bf5;
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: italic;
        font-size: 13px;
  }
  .awards-info {
    float: left;
    margin-left: 27px;
    color: 	#1e4bf5;
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: italic;
        font-size: 13px;
  }*/
  .con-info a {
    color: 	#1f1f21;
    font-family: "articulat-cf", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(12px, 3vw, 25px);
    line-height: clamp(25px, 3vw, 35px);
    /*font-size: clamp(20px, 5vw, 30px);*/
        
   /* font-family: "articulat-cf", sans-serif;
      font-weight: 500;
      /*font-style: italic;*/
      /* font-size: clamp(13px, 2vw, 13px);* */
   text-decoration: none;
    text-transform: uppercase;
    
  }

  .con-info a:hover {
    text-decoration: overline;
    text-decoration-thickness: 3px;
    color: #1A191A;
}
  .con-info {
   
    display:inline-block;
   margin: auto;
  }

 

  .container4 {
    float: left;
    padding-top: 30px;
    margin: 55px auto 0 auto;
    
 }


 
  
  * {
    box-sizing: border-box;
  }
  .fade-in-text {
    animation: fadeIn 2s;
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
 /* #myBtn {
    
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    outline-style: solid;
    outline-color: 	#1A191A;
    outline-width: 3px;
    background-color: transparent; 
    color: 	#1A191A; 
    cursor: pointer; 
    padding: 5px; 
    border-radius: 5px; 
    font-size: 13px; 
  }
  
  #myBtn:hover {
    background-color: 	#1A191A; 
    color: #ececec;
  }*/
  h4 {
    color: 	#1A191A;
    font-family: "dico-code-one", mono;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
/*letter-spacing: 2px;*/
word-spacing: 2px;
  } 
   /* .linebar {
  outline-style: solid;
  outline-width: 1px;
  outline-color: #ececec;
  margin-top: -70px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}*/

  .linebar1 {
outline-style: solid;
  outline-width: 1px;
  outline-color: transparent;
  padding: 40px;
  width: 90vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  }
.footer {
  /*border-top: 2px solid #A9A9A9;*/
  border-top:2px solid #1f1f21;
  border-bottom: 2px solid #1f1f21;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: transparent;
  text-align: center;
  width: 100%; /* ensures full width without horizontal scroll */
  box-sizing: border-box; /* includes padding inside width */
}

.socials {
 /* margin-top: 50px;*/
  display: flex;
  justify-content: center;
  gap: 100px; /* evenly space links */
  flex-wrap: wrap; /* allows wrap on smaller screens */
}

.email, .instagram, .linkedin {
  color: #1f1f21;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(15px, 2vw, 18px);
  /*line-height: clamp(35px, 5vw, 50px);*/
}
 
  
  .socials :hover {
     text-decoration: overline;
  text-decoration-thickness: 3px;
  color: #1e4bf5;
}




.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1; /* pushes footer to the bottom */
}

  /*img {
    max-width: 100%;
    height: auto;
  }*/

 

 /* .me {
    animation: fly 20s linear infinite;
    top: -60%;
    left: -15%;
    position: fixed;
    z-index: 999;
    pointer-events: none;
    width: 30%;
    
    object-fit: contain;
    }
    
    @keyframes fly {
      0% {
        transform: translate(0,110vh) rotateZ(-90deg); 
    }
    50% {
    transform: translate(120vw,-4%) rotateZ(20deg);
    }
    60% {
      transform: translate(90vh,2%) rotateZ(50deg); 
    }
    100% {
      transform: translate(-60%,140vh) rotateZ(100deg); 
    }
    } */

    .emailm {
      text-decoration: none;
      color:	#ececec;
       font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
    }
    /*.wrapper {
      color:	#ececec;
        background-color: #1A191A;
      text-align: center;
      max-width: 100%;
      overflow: hidden;
    }*/
    .wrapper {
  width: 100%;
  background-color: #A9A9A9;
  color: #ececec;
  text-align: center;
  overflow: hidden;
  z-index: 999; /* Still useful if overlapping visuals */
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 11s linear infinite;
}

.marquee p {
  text-transform: uppercase;
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(15px, 2vw, 25px);
  display: inline-block;
}
    @keyframes marquee {
      0% {
        transform: translate3d(0, 0, 0);
      }
      100% {
        transform: translate3d(-50%, 0, 0);
      }
    }

    .custom-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 40px; /* Adjust size as needed */
      height: 40px;
      border: 2px solid #1A191A; /* black outline */
      background-color: rgba(236, 236, 236, 0.4); /* light gray with 40% opacity */
       /*background-color: #1e4bf5;*/
      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 */
    }


    @font-face {
      font-family: "Theinhardt-Pan-Bold";
      src: url(Theinhardt-Pan-Bold/Theinhardt-Pan-Bold.otf);
    }
    
    @font-face {
      font-family: "Theinhardt-Pan-Regular";
      src: url(Theinhardt-Pan-Regular/Theinhardt-Pan-Regular.otf);
    }
    @font-face {
      font-family: "Theinhardt-Pan-Bold-Italic";
      src: url(Theinhardt-Pan-Bold-Italic/Theinhardt-Pan-Bold-Italic.otf);
    }
    @font-face {
      font-family: "Theinhardt-Pan-Heavy";
      src: url(Theinhardt-Pan-Heavy/Theinhardt-Pan-Heavy.otf);
    }
    @font-face {
      font-family: "Theinhardt-Pan-Italic";
      src: url(Theinhardt-Pan-Italic/Theinhardt-Pan-Italic.otf);
    }

    @font-face {
      font-family: "Test-Pitch-Medium";
      src: url(Test-Pitch/TestPitch-Medium.otf);
    }

    @font-face {
      font-family: "Test-Pitch-Medium-Italic";
      src: url(Test-Pitch/TestPitch-MediumItalic.otf);
    }

    .Articulat-CF-Extra-Bold {
      font-family: "articulat-cf", sans-serif;
      font-weight: 900;
      font-style: normal;
    }
    .Articulat-CF-Medium {
      font-family: "articulat-cf", sans-serif;
      font-weight: 600;
      font-style: normal;
    }
    .Articulat-CF-Regular {
      font-family: "articulat-cf", sans-serif;
      font-weight: 500;
      font-style: normal;
    }
    .Articulat-CF-Regular {
    font-family: "articulat-cf", sans-serif;
font-weight: 300;
font-style: normal;
    }

    .Dico-Code-One-Regular {
      font-family: "dico-code-one", mono;
      font-weight: 400;
      font-style: normal;
    }
  
    .small {
      text-transform: uppercase;
  font-family: "dico-code-one", mono;
  font-weight:bold;
  font-style: normal;
  font-size: 13px;
}

.outlined {
  position: relative;
  display: inline-block;
  font-family: "articulat-cf", sans-serif;
  font-weight: 800;
}

/* Drawn underline effect */
.outlined::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px; /* Adjust for distance from text */
  height: 3px;
  width: 100%;
  background: #1f1f21;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
   animation: underline-draw 1s ease-out forwards;
  /*animation: underline-draw 2s ease-in-out infinite;*/
}

/* Designer animates immediately */
.intro::after {
  animation-delay: 0s;
}


@keyframes underline-draw {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}