*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
@font-face {
  font-family: 'GeoWide';
  src: url(http://www.gonzalolp.com/css/geowide-regular.woff) format("woff");
}
html{scroll-behavior: smooth;}
body{padding-top: 25vh;}
.case{margin-top:0;}
.pointer{cursor: none;}
h1, h2, h3, h4, h5, h6{font-family: "Geist", serif !important; font-weight: 700;}
a, p , ul, span{font-family: 'Aleo', sans-serif; font-weight: 400; font-size: 1rem;}
.logo{font-family: "Aleo", serif !important; font-weight: 500; font-size: 1.33rem;}
.intro{
    position:fixed;
    top:0;left:0; background-color: #000000; width: 100%; height: 100%; z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}
canvas{z-index: -800 !important; position: absolute !important;}
.cover{height:60vh; background-blend-mode: darken;}
.c-about1{background-image: url("../img/gonzalo2.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 70% 50%;}
.hide{background-color: #000; overflow: hidden;}
.intro-text{color:#111111; font-family: 'Bricolage Grotesque', sans-serif;}
.navbar-brand{font-family: 'Bricolage Grotesque', sans-serif;}
.navbar{background-color: #f7f7f7c5;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);}
.hero{font-weight: 700; letter-spacing: 0.2rem; line-height: calc(10vw * 2vh); text-transform: uppercase; text-align: center; font-size: 8vw;}
.title-case{font-size: 1.6rem;}
.arrow{display: block; position: absolute; border: solid 1px #ffffff; padding: 20px 26px; font-size: 30px; top:100%; left:70%; mix-blend-mode: difference; text-decoration: none;color:#ffffff;}
.arrow:hover, .arrow:focus{color:#9594e7;border:#9594e7 1px solid ;}
.bg-primary{background-color:#4f4ec7!important ;}
.text-primary{color:#2d2dc7!important ;}
.bg-black{background-color: rgb(27, 27, 27)}
.list-group-item-dark{background-color:transparent; color: #ffffff;}
.carousel-control-prev-icon, .carousel-control-next-icon {color:#4f4ec7;}
.resume-btn{background-color: #4f4ec7; border: none; }
.resume-btn:hover{background-color: #ffffff; color:#4f4ec7;}
.previewletter{width: 48px; height: 48px; border: #ffffff37 solid 0.5px;}
.displaytype{background: rgba(7, 6, 12, 0.9); overflow: hidden; padding: 0px;
  border-radius: 20px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.28);}
.displaytype .nav-item button{font-family: 'Bricolage Grotesque', sans-serif !important; font-weight:200; color:white; border-radius:0px; border: 0px;}
.displaytype .nav-tabs .active{background-color: #00ff77; color: #000;}
.box{width: 36px; height: 36px; background-color:#4f4ec7;}
.panel{z-index: 1500; width: 100vw; height: 100vh; 
    background: rgb(174,206,242);
background: linear-gradient(41deg, rgba(255, 255, 255, 0.7) 0%, rgb(255, 255, 255) 50%);position:fixed; right:-100vw; top:0; -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px); padding: 48px; overflow-x: hidden; transition: ease 0.7s;
     }
.panel p{max-width: 100%;}
.letters{height: 45vh; overflow-y: scroll;}

/* Wrapper to prevent layout shifting */
.zoom-wrapper {
  overflow: hidden;
  display: inline-block;
  
}

/* Image transition (no hover effect directly on the image) */
.zoom-wrapper img {
  transition: transform 0.3s ease-in-out;
}

/* Zoom effect when hovering over the entire <a> tag */
a:hover .zoom-wrapper img {
  transform: scale(1.1);
}


/*Fade in*/
.fade {opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;}

.fade.show {
  opacity: 1;
  transform: translateY(0);
}


/*Typing*/
.herotext {
  font-family: 'Geist', sans-serif;
  display: flex;
  flex-direction: column;
  color: rgb(29, 27, 30);
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  height:70vh;
  column-gap: 0;
  z-index: -900;
}
.typing {
  min-height: 80px !important;
  margin-left: 10px;
  position: relative;
}
.typing::after {
  content: "";
  position: absolute;
  right: -5px;
  width: 1px;
  height: 100%;
  border-right: 2px solid white;
  animation: blink 0.5s ease infinite;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.feature-section{
  transition: all 0.5s ease;
  
}


.feature-section:hover{cursor: pointer; border: 8px solid black;
  animation: mymove 0.5s ease;
  background-color: #1c1a1f; 
  }
  @keyframes mymove {
    from {border: 1px solid black;}
    to {border: 8px solid black;}
  }

.glitch {
  text-shadow: 0.035em 0 0 rgba(255, 0, 0, 0.75),
    -0.025em -0.035em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.045em 0 rgba(0, 0, 255, 0.75);

  animation: glitch 500ms infinite;
}
.btn{border-radius: 1px !important;}



.gridvisible {
  border: 1px solid rgb(205, 206, 209);
  border-width: 0px 0.5px 0px 0.5px;
  width: 100%;
  height:100vh;
}



@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}
.aboutfoot{width: 100vw; height: 70vh; background-image: url('../img/gonzalo3.jpg'); background-position: center; background-size:cover;}

.cursor{
  display: block;
  position: fixed;
  width: 32px;
  height: 32px;
  background: #efeff4;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 2000;
}

.cursor.active{
  animation: active_cursor 300ms ease forwards running;
  z-index: 1100;
  cursor:none;
}

@keyframes active_cursor{
  0%{
      transform: scale(1);
  }

  100%{
      transform: scale(3);
  }
}

.cursor.unactive{
  animation: unactive_cursor 300ms ease forwards running
}

@keyframes unactive_cursor{
  0%{
      transform: scale(3);
  }

  100%{
      transform: scale(1);
  }
}

.app-footer__marquee {
  color: #581cff;
  backdrop-filter: blur(4px);
  font-size: calc(0.8925rem + 6.43571vw);
  font-weight: 400;
  font-family: 'GeoWide', sans-serif !important;
  padding: 0.25em 0;
  white-space: nowrap;
  --marquee-animation-duration: 30s;

}

.u-marquee {
  --marquee-gap: 1ch;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  
}

.u-marquee,
.u-marquee__content {
  display: flex;
  gap: var(--marquee-gap);
}

.u-marquee__content {
  animation: marquee var(--marquee-animation-duration) linear infinite;
  flex-shrink: 0;
  justify-content: space-around;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.u-marquee__content > * {
  white-space: nowrap;
}

@keyframes marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translate(calc(-100% - var(--marquee-gap)));
  }
}

@font-face {
  font-family: "Galatea";
  src: url("galatea-regular.woff") format("woff");
}

@font-face {
  font-family: "Belladonna Txk.";
  src: url("BelladonnaTxk.-Regular.woff") format("woff");
}

.filters {

  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  /* HIDE SCROLLBAR: cross-browser */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  display: flex;
  flex-wrap: nowrap;
  padding-top: 24px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0; /* make sure margin doesn't push content off screen */
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
  
}
.filters::-webkit-scrollbar {
  display: none; /* Chrome, Safari, iOS */
}

.filter-pill {
  padding: 8px 16px;
  width: auto;
  border: none;
  cursor: pointer;
  background-color: #eff0f629;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: #000;
  border: 1px solid lightgray;
  border-radius: 20px;
  transition: background 0.5s ease;
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start; /* optional for snapping */
}

.filter-pill.active {
  background-color: #08080b;
  color: white;
}
.card {
  background-color: #eff0f629;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: #000;
}
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.card-work {
  
  opacity: 1;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.mobile-nav {
  z-index: 1500;
  background-color: #f7f7f7e4;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: #000;
  border: 1px solid rgb(233, 233, 233);
}

/* X-Small devices (portrait phones, less than 576px)
   No media query for `xs` since this is the default in Bootstrap */

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    .arrow{display: block; position: absolute; border: solid 1px #ffffff; padding: 30px 42px; font-size: 50px; top:80%; left:65%; mix-blend-mode: difference;}
    .title-case {font-size: 3vw; }
    .title-case2 {font-size: 2vw;}
    .case-summary{color: #4f4f50;}
    .panel {width: 100vw;}
    .c-about1{background-position: 75% 50%;}
    .c-home{background-position: 55% 50%;}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  body{padding-top: 35vh;}
    .arrow{display: block; position: absolute; border: solid 1px #ffffff; padding: 30px 42px; font-size: 50px; top:50%; left:100%; mix-blend-mode: difference;}
    .panel {width: 75vw;}
    .c-about1{background-position: 75% 50%;}
    .c-home{background-position: 55% 50%;}
    .letters{height: auto; overflow-y: scroll;scrollbar-color: rgb(0, 255, 157) ; scrollbar-width: thin;}
    .wrapvisor{height:auto; }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
  body{padding-top: 35vh;}
    .arrow{display: block; position: absolute; border: solid 1px #ffffff; padding: 30px 42px; font-size: 50px; top:50%; left:100%; mix-blend-mode: difference;}
    .panel {width: 85vw;}
    .c-home{background-position: center;}
    .letters{height: auto; overflow-y: scroll;scrollbar-color: rgb(0, 255, 157) ; scrollbar-width: thin;}
    .wrapvisor{height:auto; }
  }
    
    
/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  body{padding-top: 35vh;}
  .panel {width: 80vw;}
  .c-about1{background-position: center;}
  .c-home{background-position: center;}
  .letters{height: auto; overflow-y: scroll;scrollbar-color: rgb(0, 255, 157) ; scrollbar-width: thin;}
    .wrapvisor{height:auto; }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
  body{padding-top: 35vh;}
  .panel {width: 75vw;}
  .c-about1{background-position: center; }
  .c-home{background-position: center;}
  .letters{height: auto; overflow-y: scroll;scrollbar-color: rgb(0, 255, 157) ; scrollbar-width: thin;}
    .wrapvisor{height:auto; }
    
    }