styles.css

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lobster Two', cursive;
}

h2{
  background-image: linear-gradient(90deg, rgba(200, 130, 0 , 1) 0%, rgba(0,212,255,0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body{
  background: #171321;
  color: #fff;
}

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

 #nav-bar{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
 }

#nav-bar ul{
    width: 100%;
    background: linear-gradient(90deg, rgb(17, 164, 201) 0%, rgba(0,212,255,1) 100%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: larger;
    list-style: none;
    height: 50px;
}

#nav-bar ul li{
  transition: all 300ms cubic-bezier(0.58,-0.59, 0.45, 3.31);
}

#nav-bar ul li:hover{
  transform: scale(1.2);
}

#nav-bar ul a{
  display: block;
}

main{
  top: 20px;
  position: relative;
  text-align: center;
  font-size: 24px;
  padding: 30px;
  height: 100vh;
  width: 100%;
}

.projects-container{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
}

.projects-container h2{
  position: fixed;
  left: 20px;
  top: 80px;
}

.projects-container li{
  padding: 10px;
  transition: all 300ms ease;
  list-style: none;
  border: 1px solid black;
  margin: 15px;
  background: linear-gradient(90deg, rgba(0,100,255,1)  0%, rgba(0,212,255,1) 100%);
  border: none;
  border-radius: 10px;
}

.projects-container li:hover{
  background: linear-gradient(90deg, rgba(0,100,255,0.9)  0%, rgba(0,212,255,0.9) 100%);
  /* border-radius: 20px; */
  /* padding-bottom: 20px; */
  transform: scale(1.02);
  translate: 0 -3px;
}

.projects-container{
  width: 80%;
  margin: auto;
  max-width: 900px;
}

nav li span{
  font-size: 1rem;
  font-family: 'Times New Roman', Times, serif;
}

@media (max-width: 1200px){
  .projects-container{
    width: 50%;
    margin: auto;
    max-width: 900px;
  }

  body{
    font-size: 14px;
  }
}