@import url('https://fonts.googleapis.com/css?family=Caveat|Righteous&display=swap');

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

html,body{background:#000;overflow-x:hidden;}

header{background:#000;}

.navbar-nav .nav-item:hover .nav-link{color:rgb(45,237,11)!important;}
.navbar-nav .nav-link{font-family:'Red Hat Mono',monospace;font-size:large;color:#fff;}

a{color:#fff;text-decoration:none;}

.content{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  height:130px;
  overflow:hidden;
  font:600 35px/40px 'Lato',sans-serif;
  color:#ecf0f1;
}

.content__container{position:relative;height:40px;overflow:hidden;padding:0 40px;}
.content__container:before{content:'{';left:0;}
.content__container:after{content:'}';right:0;}
.content__container:before,.content__container:after{
  position:absolute;top:0;font-size:42px;line-height:33px;color:#16a085;
}

.content__container__text{float:left;}
.content__container__list{margin:0;padding-left:110px;list-style:none;text-align:left;animation:change 10s infinite;}
.content__container__list__item{line-height:40px;margin:0;}

@keyframes change{
  0%,12.66%,100%{transform:translate3d(0,0,0);}
  16.66%,29.32%{transform:translate3d(0,-25%,0);}
  33.32%,45.98%{transform:translate3d(0,-50%,0);}
  49.98%,62.64%{transform:translate3d(0,-75%,0);}
  66.64%,79.3%{transform:translate3d(0,-50%,0);}
  83.3%,95.96%{transform:translate3d(0,-25%,0);}
}

.text-container{
  position:absolute;
  width:100%;
  height:80vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Raleway',sans-serif;
}

.text-container h1{
  margin:0;
  font-size:80px;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  color:rgba(225,225,225,.01);
  background:url("https://media.istockphoto.com/id/185714123/photo/seascape.jpg?s=612x612&w=0&k=20&c=I66jm7oo72ephqL8OHDmDbGk4kg9UMO4XpGny7oSwas=") repeat;
  -webkit-background-clip:text;
  animation:animate 15s ease-in-out infinite;
}

@keyframes animate{
  0%,100%{background-position:left top;}
  25%{background-position:right bottom;}
  50%{background-position:left bottom;}
  75%{background-position:right top;}
}

.desc{
  display:flex;
  justify-content:center;
  align-items:center;
  font:2.7rem 'Caveat',cursive;
  letter-spacing:5px;
  margin:0;
  background:linear-gradient(to right,#c4c4c4,#6a6a6a);
  -webkit-background-clip:text;
  color:transparent;
}

.allicons{
  position:fixed;
  bottom:20px;
  left:20px;
}

.social-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.social-links a{
  width:40px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.social-links a .glf{font-size:30px;}
.fa-github:hover{color:rgb(4,148,4);}
.fa-linkedin:hover{color:#0077b5;}
.fa-file:hover{color:red;}

@media(max-width:768px){
  .allicons{left:0;right:0;bottom:20px;display:flex;justify-content:center;}
  .social-links{flex-direction:row;gap:20px;}
}

@media(max-width:600px){
  .content{top:35%;}
  .content__container{margin-top:1px;}
}

/* === NAV: restore behavior without desktop layout bugs === */
:root { --nav-h: 64px; } /* tweak if your navbar is taller/shorter */

/* Mobile & tablet: fixed nav + body offset + overlay collapse */
@media (max-width: 991.98px) {
  body {
    padding-top: var(--nav-h); /* prevent content hiding behind fixed nav */
  }

  .navbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1001;
  }

  /* Collapse should overlay content, not push it */
  .navbar-collapse {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #000;
    z-index: 1002;
  }
}

/* Desktop: no body padding, no weird top gap */
@media (min-width: 992px) {
  body { padding-top: 0; }              /* remove the extra space on large screens */
  .navbar { position: sticky; top: 0; z-index: 1001; } /* stays at top without overlaying */
  .navbar-collapse { position: static !important; background: transparent; z-index: auto; }
}

/* Ensure animated content sits under nav when it overlays */
.content,
.text-container {
  position: absolute;
  z-index: 1; /* navbar is higher (1001/1002) */
}

/* Keep horizontal overflow off (you already had this; safe to retain) */
html, body { overflow-x: hidden; }

.allicons {
  z-index: 2000; /* ensures the icons are above all other layers */
}