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

body {
  width: 100%;
  background-color: rgb(214, 214, 214);
  font-family: sans-serif;
}

header {
  width:100%;
  height:80px;
  background-color: rgb(214, 214, 214);
  position:fixed;
  display:flex;
  justify-content:space-between;
  align-items: center;
  border-bottom:2px solid black;
}

#header-img {
  width:5%;
  object-fit:cover;
  margin:2px 0 0 3px;
}

#header-title {
  width:100%;
  font-family: monospace;
}

nav {
  width: 100%;
}

nav > ul {
  display:flex;
  justify-content: space-evenly;
}

nav > ul > li {
  text-decoration: none;
  list-style: none;
  font-size:large;
  font-weight: bolder;
  font-family: sans-serif;
}

nav > ul > li:hover {
  transform:scale(1.5,1.5);
  transition: 600ms;
}

a {
  text-decoration: none;
  color:black;
}

a:hover {
  color:black;
  background-color:rgb(154, 24, 210);
}

main {
  padding-top:90px;
}

#introduction, #projects, #contact, #prices, footer {
  text-align: center;
  width:100%;
}

#qualities {
  margin-top:65px;
}

.text {
  margin:20px;
  font-size:x-large;
}

#fast-icon , .money{
  width:60px;
}

#personal-icon {
  width:40px;
  margin-bottom:12px;
  margin-right:8px;
}

#trans-icon {
  width:45px;
  margin-bottom:12px;
}

.quality {
  display:flex;
  align-items: center;
  margin:10px 25% 0px 25%;
  gap:10px;
}

.qtext {
  max-width:50%;
  margin:auto;
  margin-bottom:50px;
}

#projects {
  padding-top:100px;
  margin-bottom:20px;
}

.project {
  width:700px;
  background-color: white;
  margin:20px auto 100px auto;
  padding-bottom:10px;
  border:3px solid rgb(154, 24, 210);
  border-radius: 20px; 
}

.img {
  width:100%;
  border-top-right-radius:18px;
  border-top-left-radius:18px;
  border-bottom:1px solid rgb(214, 214, 214);
}

.img:hover, #submit:hover {
  transform:scale(1.2,1.2);
  transition: 600ms;
}

.ptext {
  font-size: large;
  margin:15px;
  text-align:center;
}

.link {
  font-weight:bolder;
  color:rgb(154, 24, 210);
}

#prices {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap:50px;
  padding:150px 0px;
}

.price {
  display:flex;
  justify-content:center;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.message {
  margin:15px;
}

#email {
  width:300px;
  height:25px;
  border-radius:10px;
  border-color:rgb(154, 24, 210);
  background-color:rgb(214, 214, 214);
}

#submit {
  width:200px;
  height:50px;
  border-radius:5px;
  border-color:black;
  background-color:rgb(154, 24, 210);
  font-family: monospace;
  font-size: larger;
  font-weight:bolder;
  margin-bottom:10px;
  cursor: pointer;
}

#contact {
  border-bottom:1px solid black;
}

footer {
  margin:5px 0 5px 0;
}


@media only screen and (min-width:1650px) {
  #header-img{
    max-width:3%;
  }
}

@media only screen and (max-width:600px) {
  *{
  overflow-x:hidden;
  }

  #header-img {
    min-width:50px;
  }

  #header-title {
    width:300px;
  }

  nav > ul {
    display:flex;
    flex-direction: column;
    align-items:center;
  }

  nav > ul > li {
    margin:2px;
  }

  #personal-icon, #trans-icon {
    margin-left:5px;
  }

  .quality {
    inline-size: 300px;
    margin:auto;
    padding-left:10%;
  }

  .text {
    font-size:20px;
  }

  #projects {
    margin-top:100px;
  }
  
  #introduction {
    margin:0;
  }

  .project, #nav-bar {
    max-width:300px; 
  }

  footer > p > br:first-of-type {
    display:none;
  }
}