@import url("./fonts/font.css");

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

body {
  font-family: "vazir", sans-serif;
}

/* .container {
  
} */

.container h1 {
  margin: 20px;
}

.project-container {
  padding: 20px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: 1350px;
  margin: 0 auto;
}

.project-item {
  min-width: 300px;
  max-width: 650px;
  margin: 0 auto;
  padding: 20px 25px;
  box-shadow: 2px 2px 40px rgb(136, 136, 136);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
}

.project-item:hover {
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
}

.project-container .project-item:nth-of-type(1) {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.project-container .project-item:nth-of-type(2) {
  background: linear-gradient(135deg, #f3e8ff 0%, #ddd6fe 100%);
}

.project-item img {
  width: 70%;
  height: 250px;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.project-item h1 {
  font-size: 18px;
  margin: 15px 10px 5px 0;
}

.info-project {
  font-size: 15px;
  color: gray;
  text-shadow: 2px 2px 15px gray;
}

.tag-container {
  display: flex;
  align-items: center;
  margin: 15px 0;
  gap: 1rem;
  user-select: none;
}

.tag-item {
  background-color: #f8f1ee;
  color: #54504e;
  padding: 5px 10px;
  border-radius: 13px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  -o-border-radius: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  -moz-transition: background-color 0.2s ease, color 0.2s ease;
  -ms-transition: background-color 0.2s ease, color 0.2s ease;
  -o-transition: background-color 0.2s ease, color 0.2s ease;
}

.tag-item:hover {
  background-color: gold;
  color: rgb(34, 2, 83);
}

.see-project {
  text-align: left;
}

.see-project a {
  color: #54504e;
  text-decoration: none;
  font-family: "vazir", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.see-project a:hover {
  color: blue;
}