/* --- Global Container --- */
html {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
  scroll-behavior: smooth;
  background: #27282e;
}

/* --- Main stuff heere--- */
nav {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

ul {
  display: flex;
  list-style-type: none;
  padding: 0;             
  margin: 0;
}

li {
  padding: 0 30px;        /* Equal spacing on both sides of each link */
  color: white;
  font-family: "JetBrains Mono", monospace;
  animation-name: entry;
  animation-duration: 0.7s;
  transition: ease-in-out;
}

/* --- Centering the Banner --- */
.banner-cont {
  display: flex;
  justify-content: center; 
  width: 100%;
  padding-top: 50px;       
}

.banner {
  width: 740px;
  height: 250px;
  border-radius: 20px;
  object-fit: cover;
  display: block; 
  animation-name: entry;
  animation-duration: 1.2s;
  transition: ease-in-out;
}

.title{
  font-style: italic;
  color: #fab387;
  font-family: "JetBrains Mono", Courier, Monospace;
  animation-name: entry;
  animation-duration: 1.7s;
  transition: ease-in-out;
  font-size: 22px;
}

.p1{
  color: white;
  font-family: "JetBrains Mono";
  animation-name: entry;
  animation-duration: 2.2s;
  transition: ease-in-out;
}

.bigg{
  font-size: 30px;
}


.projects{
  font-size: 32px;
  font-family: 'Courier New', Courier, monospace;
  color: #7fa7e8;
  border-left:#7fa7e8 solid 10px;
  padding-left: 20px;
  animation-name: entry;
  animation-duration: 2.5s;
  transition: ease-in-out;
}

/* --- animations ---*/

@keyframes entry{
  0%{
    opacity: 0%;
    transform: translate(0px, 30px);
  }
  100%{
    opacity: 100%;
    transform: translate(0px, 0px);
  }
}