@font-face {
  font-family: Inter;
  src: url(fonts\Inter-Regular.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(fonts\Roboto-Regular.ttf);
}

#home-bg-img {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 97vw;
  background-image: url("images/Header-llustration-desktop.png");
  z-index: -1;
}

#appbar,
#hamburger-icon,
#logo-placeholder,
#name,
#form-bg1,
#email-link {
  display: none;
}

#nav-list {
  display: flex;
  gap: 8px;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style-type: none;
}

#nav-list li {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.05vw;
  line-height: 1.39vw;
  text-align: center;
  color: #344563;
  padding: 0.7vw 0.86vw;
}

#toolbar {
  width: 100vw;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hamburger-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 72px;
  margin-right: 0;
}

.greetings {
  line-height: 3.61vw;
}

#name-txt,
#job-txt {
  overflow-wrap: break-word;
  width: 700px;
  display: block;
  text-align: center;
  font-size: 2.77vw;
}

#support-txt {
  font-size: 1.39vw;
  line-height: 1.945vw;
}

#home {
  width: 66vw;
}

#message-cont {
  width: 62vw;
}

.section-header {
  font-size: 2.78vw;
}

#works {
  height: auto;
  top: 73.5vw;
  width: 100vw;
}

#works-head-cont {
  height: auto;
}

#works-header {
  width: 500px;
}

#indicator {
  display: none;
}

#action-btn-cont {
  top: 41.8vw;
}

#cards-cont {
  grid-gap: 1.66vw;
  padding: 0 8px;
  margin-top: 0;
  width: 80.5vw;
  height: 988px;
  grid-template-rows: repeat(2, 33vw);
  grid-template-columns: repeat(3, 25.7vw);
}

.project-info {
  margin-top: 17.5vw;
  height: 15.415vw;
  gap: 1.11vw;
}

.project-name {
  width: 20.485vw;
  font-size: 1.66vw;
  line-height: 2.22vw;
  height: 3.95vw;
  margin-top: 1.11vw;
}

.pr-tags-ul {
  width: 22.7vw;
}

.pr-tag {
  line-height: 1.11vw;
  font-size: 0.83vw;
  padding: 0.55vw 0.83vw;
  margin: auto 0.275vw;
}

.green-btn {
  border-radius: 4px;
}

#pr-detail-btn {
  width: 8.47vw;
  height: 3.33vw;
  font-size: 1.18vw;
  line-height: 0.97vw;
}

.card {
  width: 25.7vw;
  height: 33vw;
}

#card2 {
  grid-row: 1/2;
  grid-column: 2/3;
}

#card3 {
  grid-row: 1/2;
  grid-column: 3/4;
}

#card4 {
  grid-row: 2/3;
  grid-column: 1/2;
}

#card5 {
  grid-row: 2/3;
  grid-column: 2/3;
}

#card6 {
  grid-row: 2/3;
  grid-column: 3/4;
}

#about {
  gap: 4vw;
  height: auto;
  top: 161.87vw;
  width: 100vw;
}

#about-cont {
  height: auto;
  gap: 1.66vw;
}

#about-bg-2 {
  width: 20vw;
  height: 8.8vw;
  left: 0;
  top: 11.87vw;
  background-repeat: no-repeat;
  background-image: url("images/illustration-about-me-2-desktop.png");
}

#about-bg-1 {
  width: 18.95vw;
  height: 17vw;
  right: -3.05vw;
  top: -1.39vw;
  background-repeat: no-repeat;
  background-image: url("images/illustration-about-me-1-desktop.png");
}

#about-text {
  font-size: 1.39vw;
  line-height: 2.22vw;
  width: 54vw;
  height: auto;
}

#resume-btn {
  width: 10.7vw;
  height: 3.33vw;
  font-size: 1.18vw;
}

#tech-cont {
  height: auto;
  width: 81.39vw;
  flex-direction: row;
  justify-content: center;
  gap: 1.66vw;
}

.tech-card {
  align-items: center;
  width: 25.7vw;
  height: 22vw;
}

#tech-icon-cont {
  width: 25.7vw;
  height: 8.89vw;
  margin-top: 1.11vw;
}

.tech-icon-bg {
  width: 5.55vw;
  height: 5.55vw;
  box-shadow: 0 1.11vw 1.66vw rgba(37, 47, 137, 0.08);
}

.tech-icon {
  width: 3.33vw;
  height: 3.33vw;
}

.techs-title-tag {
  gap: 1.66vw;
  width: 25.7vw;
}

.tech-title {
  font-size: 1.66vw;
  line-height: 2.22vw;
  width: 25.7vw;
  height: 2.22vw;
}

.tech-tags-cont,
.tech-tags {
  width: 25.7vw;
  gap: 0.55vw;
}

.tech-tag-elem {
  font-size: 0.83vw;
  line-height: 1.11vw;
  border-radius: 0.55vw;
  padding: 1.11vw;
}

#contact {
  top: 214vw;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 81.3vw;
  height: 34vw;
  padding: 5.55vw 0;
  gap: 1.66vw;
}

#form-message {
  display: flex;
  align-items: center;
  width: 32.15vw;
  height: 17.78vw;
  font-size: 2vw;
  line-height: 3.61vw;
  text-align: unset;
}

#contact-form {
  align-items: unset;
  width: 47.5vw;
  gap: 1.66vw;
  height: 29.65vw;
}

#nameinputs-cont {
  display: flex;
  justify-content: space-between;
  gap: 1.66vw;
}

#email {
  width: 100%;
  padding-left: 1.11vw;
  height: 3.33vw;
  font-size: 1.11vw;
  line-height: 1.66vw;
}

#firstname,
#lastname {
  padding-left: 1.11vw;
  width: 22.92vw;
  height: 3.33vw;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #d0d9d4;
  border-radius: 4px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.11vw;
  line-height: 1.66vw;
  color: #42526e;
}

#message {
  width: 100%;
  height: 7.91vw;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #60c095;
  border-radius: 4px;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.11vw;
  line-height: 1.66vw;
  color: #42526e;
  padding-left: 0.86vw;
  padding-top: 0.86vw;
}

#email::placeholder,
#firstname::placeholder,
#lastname::placeholder {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.11vw;
  line-height: 1.66vw;
  color: #6b778c;
  font-style: italic;
}

#message::placeholder {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.11vw;
  line-height: 1.66vw;
  color: #42526e;
}

#submit-btn {
  width: 9vw;
  height: 3.33vw;
  font-size: 1.19vw;
  line-height: 1.66vw;
}

#form-bg2 {
  display: block;
  position: absolute;
  width: 9.03vw;
  height: 7.35vw;
  left: 10vw;
  top: 31vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("images/illustration-2-contact-form-desktop.png");
}

#form-bg3 {
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  width: 16.39vw;
  height: 21.11vw;
  left: -8.9vw;
  top: 21.87vw;
  background-size: contain;
  background-image: url("images/illustration-3-contact-form-desktop.png");
}

#form-bg4 {
  display: block;
  position: absolute;
  width: 21.95vw;
  height: 31.31vw;
  right: -16.8vw;
  top: 9.8vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("images/illustration-4-contact-form-desktop.png");
}

#footer {
  width: 100vw;
  display: flex;
  justify-content: center;
  top: 255.23vw;
  padding: 1.8vw;
  border: 1px solid #dfe1e6;
}

.scale-anim:hover {
  transform: scale(1.2);
  transition: ease-out 0.3s;
}