*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:'Audiowide',sans-serif;
  
}
body,html{
  width: 100dvw;
  height: 100dvh;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
a{
  color: black;
  text-decoration: none;
}
:root{
  --main-color:yellow;
  --profile-size:230px;
    --gray-50:  #f8f8f8;
    --gray-100: #f0f0f0;
    --gray-200: #dedede;
    --gray-300: #c4c4c4;
    --gray-400: #a0a0a0;
    --gray-500: #7a7a7a;
    --gray-600: #5c5c5c;
    --gray-700: #404040;
    --gray-800: #292929;
    --gray-900: #171717;
    --html: #e34f26;
    --css: #264de4;
    --js: #f7df1e;
    --postgres: #336791;
    --spring: #6db33f;
    --java: #ed8b00;
    --margin:15px;
    --padding: 8px;
}

.container{
  width: 100%;
  height: 100%;

}
nav{
  height: 40px;
  padding:var(--padding);
  display: flex;
  align-items: center;
}
.nav-left{
  margin-left: auto;
  height: 100%;
  width: auto;
  align-items: center;
  display: grid;
  margin-right: var(--margin);
}
.hero-profile{
width: 100%;
padding: var(--padding);
margin: var(--margin);
display: flex;
align-items: center;
justify-content: right;
}
.hero-text{
  width: 100%;
  padding: var(--padding);
  margin: var(--margin);
}
.profile{
  width: 300px;
  height: 300px;
  box-shadow: -5px 5px 2px 0px black;
  padding: var(--padding);
  background-image: url(/developerimg.jpeg);
  background-size: cover;
  background-position: center;
  backdrop-filter: var(--gray-100);
  filter: grayscale(100%);
  transition: 1s ease;
  cursor: pointer;
}
.profile:hover{
    filter: grayscale(0%);
}



.profile .profile-resize-btn{
  border: none;
  width: 35px;
  height: 35px;
  background-color: black;
  color: white;
  border-radius: 50%;
  translate: -27px -20px;
  cursor: pointer;
  transition: 0.3s ease;
}
.profile button:hover{
  scale: 1.2;
}

.hero{
  height:80%;
  display: flex;
  align-items:  center;
  width: 100%;
  margin-top: 50px;
  justify-content: space-around;
  transition: 1s ease;
  

}
.description span{
  font-size: 13px;
}
.contact-btn{
  color: white;
  background-color:black;
  margin-top: var(--margin);
  padding: var(--padding);
  border: none;
  cursor: pointer;
  transition: 0.5s ease;

}
.contact-btn:hover{
  color: black;
  background-color: white;
}
.stack{
  display: flex;
  align-items: center;
  margin-top: var(--margin);

}
.stack span{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transition: 0.5s ease;
}
.stack span{
  filter: grayscale(0%);
  cursor: pointer;
}

.stack span:hover{
  filter: grayscale(0%);
  color: white;
  scale:1.1;
}
.html{
  background-color: var(--html);
}
.css{
  background-color: var(--css);
}
.js{
  background-color: var(--js);
}
.java{
  background-color: var(--java);
}
.spring{
  background-color: var(--spring);
}
.postgres{
  background-color: var(--postgres);
}
.location{
  margin-top: var(--margin);
}
.location span{
  margin-left: var(--margin);

}
.auto-scroll-projects{
  width: 100%;
  margin-top: var(--margin);
  display: flex;
  justify-content: center;
}
.scrollto-projects-btn{
  width:40px;
  height: 40px;
  background-color: black;
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  border: none;
  translate: 0px -20px;
}
#projects{
  width: 100%;
  height: 100%;
  padding: var(--padding);
  margin-top: 200px;
    animation: project-into-view 2s linear both;
  animation-timeline: view();
}

@keyframes project-into-view {
  from{
  translate: 0px 100px;
  opacity: 0;
  }to{
    translate: 0px 0px;
  opacity: 1;    
  }
}
.projects-title{
  width:100%;
  text-align: center;
  margin: var(--margin);
}
#projects div{
  display: flex;
  padding: var(--padding);
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 100px;
}
#projects video,#projects span{
  width: 100%;
  height: auto
}
#projects video{
  border: 1px solid black;
  object-fit: cover;
  object-position: center;
  transition: 0.5s ease;
  cursor: pointer;
}
#projects video:hover{
  scale: 1.02;
  
}
#projects span{
  padding: var(--padding);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#projects span p{
  margin: var(--margin);
  font-size: 13px;
   margin: var(--margin);
}
.alround-links{
  display: flex;
  padding: var(--padding);
  align-items: center;
}
.alround span h1{
  font-weight: 100;
}
.alround-engine{
  flex-direction: row-reverse;
}

footer{
  height: 200px;
  background-color: black;
  display: flex;
  width: 100%;
  overflow: hidden;
  align-items: center;
}
.infinite-scroll h1{
  font-size: 200px;

}
.infinite-scroll{
  height: 100%;
  width: max-content;
  animation: infinite-scroll 20s linear infinite 0s;
  display: flex;
  color: white;
}
@keyframes infinite-scroll {
  from{
    translate: 70% 0;
  }to{
    translate:-110% 0;
  }
}
#systems{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-flow: dense;
  gap: 10px;
  margin-top: 500px;
  padding: var(--padding);

}
#systems div{
  color: white;
  background-color: black;
  padding: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#end{
  height: 50px;
  margin-top: 100px;
  background-color: #171717;
  display: flex;
  color: white;
  padding: var(--padding);
  align-items: center;
  justify-content: space-around;
}


@media (max-width:500px) {
  #systems{
    grid-template-columns: repeat(1,1fr);
    margin-top: 900px;
  }
  .hero{
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .hero-profile{
    width: 100%;
    justify-content: center;
  }
  .hero-text{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .stack{
    justify-content: center;
  }
  .alround{
    flex-direction: column;
  }
  .alround-engine{
    flex-direction: column;
  }
  footer{
    margin-top: 100px;
  }
}