body {
    background-color: black;
}

.page-content {
    background-color: aliceblue;
    padding: 1% 20%;
    margin: 1% 0%;
    font-size: 1.5rem;
}





/* Header and hero image styles */

.header-container {
    text-align: center;
    font-size: 2vw;
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
}

#home-header {
    background-image: radial-gradient(circle, rgba(0,0,0,0.7), transparent), url("/assets/adi-goldstein-EUsVwEOsblE-unsplash-cropped1.jpg");
}

#resume-header {
    background-image: radial-gradient(circle, rgba(0,0,0,0.7), transparent), url("/assets/umberto-jXd2FSvcRr8-unsplash-cropped1.jpg");
}

#project-lib-header {
    background-image: radial-gradient(circle, rgba(0,0,0,0.7), transparent), url("/assets/vishnu-mohanan-vtg8tAdoWVQ-unsplash-cropped1.jpg");
}

#education-header {
    background-image: radial-gradient(circle, rgba(0,0,0,0.7), transparent), url("/assets/vitaly-gariev-CW2ieLii3DU-unsplash-cropped1.jpg");
}

.header-container img {
    width: 100%;
    display: block;
    
}

.header-container h1, .header-container h2 {
    position: relative;
    top: 35%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

.header-container h2 {
    top: 40%;
}

/* Filter bar styles*/

#filter-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;

}

.filter-btn {
    border-radius: 14px;
    padding: 0.8%;
    background-color: rgb(207, 166, 235);
    border-color:rgb(132, 6, 216);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1vw;
}

.filter-btn:hover {
    cursor: pointer;
    background-color: rgb(132, 6, 216);
}

#all-btn {
    background-color: rgb(3, 255, 100);
    border-color:rgb(2, 146, 45);
}

#all-btn:hover {
background-color: rgb(2, 146, 45);;
}

/* Project card styles*/

.project-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw;
    margin: 5%;
}

.project-card {
    border: 1px solid black;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    transition: opacity 0.5s ease-in-out;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    font-size: 2.5vw;
}

#sol-card {
    background: url("../assets/laserworld-laserbeam-LlQy3Id5XXM-unsplash.jpeg");
}

/* Nav-bar styles */

.nav-bar {
    font-size: 1.5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5% 20%;
    background-color: blueviolet;
    margin: 0%;
    list-style-type: none;
    
}

.nav-link {
    display: block;
    transition: transform 0.4s ease;
    text-decoration: none;
    color: white;
}

.nav-link:hover {
    transform: scale(1.3);
}

/* Footer styles */

.contact-link {
    display: block;
    transition: transform 0.4s ease;
}

.contact-link:hover {
    transform: scale(1.3);
}

.contact-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    padding: 0.9% 20%;
    margin: 0%;
    background-color: rgb(211, 147, 253);
}

.contact-icon {
    width: 50px;
    height 50px;
}



#copyright {
    text-align: center;
    background-color: azure;
    padding: 1% 20%;
    margin: 0%;
}

/* Skills styles*/

.skill {
  display: grid;
  grid-template-columns: 250px 1fr; 
  align-items: center;
  gap: 10px; 
}

.skill-label {
  width: 250px; 
  font-size: 16px;
}

.skill-bar {
  height: 20px;
  background: black;
  border-radius: 999px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  width: 0;        
  background: violet;
  border-radius: 999px;
  transition: width 1s ease;
}

li {
    margin-bottom: 15px;
}

.catagory-label {
    width: 250px;
  font-size: 23px;
  font-weight: bold;
}

.skill-level {
    display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}


/* tablet */
@media (max-width: 900px) {
  .project-card-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-container {
    font-size: 3vw;
  }

  .nav-bar {
    font-size: 2vw;
  }

  .page-content {
    padding: 1% 7%;
  }

  #filter-container {
    font-size: 2vw;
    justify-content: center;
  }
}

/* phone */
@media (max-width: 600px) {
  .project-card-container {
    grid-template-columns: 1fr;
  }

  
}