@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media screen and (max-width: 500px){
.navbar {
  width: 100%;
}
.about-me {
 width: 100%;
}
.container {
  flex-direction: column;
}
}
body{
  width: 100%;
  background: #22223B;
  font-family: 'Ubuntu', sans-serif;
}

.navbar{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4A4E69;
}

.link-group{
  list-style: none;
  display: flex;
}

.link a {
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
  padding: 3px 40px;
  margin: 0 20px;
  line-height: 80px;
  transition: .5s;
  font-size: 25px;
  display: block;
}

.link a:hover {
  color: #9A8C98;
}

.bgimage {
  margin-top: 80px;
  height:100vh;
  background: url('img/home.jpeg');
  background-size:cover;
  background-repeat: no-repeat;
  position:relative;
}
.hero_title {
  font-size: 4.5rem;
}
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #F2E9E4;
}


h1 {
  text-align: center;
  margin-top: 150px;
  color: aliceblue;
  font-size: 40px;
}

.imageA {
  height: 400px;
  width: auto;
}

.about-me {
  padding-top: 1px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 0;
}

.about-img {
  flex-grow: 2;
  margin-top: 100px;
}


.basic-info {
  flex-grow: 1;
  color: aliceblue;
}

p {
  font-size: 23px;
  font-weight: lighter;
  line-height: 1.6;
}

.my-pro {
  padding-top: 1px;
}

.pro-container {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-content: flex-start;
  margin-top: 30px;
  column-gap: 30px;
}

.item {
  display: inline-block;
  height: 90vh;
  flex-grow: 1;
}

.item img {
  width: 500px;
  height: auto;
}

h2 {
  margin-top: 150px;
  text-align: center;
  color: #fff;
}
form { 
  max-width:420px;
  margin-top: 250px;
  margin:50px auto; 
}

.feedback-input {
  color:white;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

[type="submit"]:hover { 
  background:#CC4949; 
}

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height: 50px;
  background-color: #656986d0;
}
.footer-text-left {
  font-size:20px;
  padding-left:40px;
  float:left;
  word-spacing:20px;
}
h3{
  font-size: 18px;
  margin-top: 9px;
  margin-right: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.795);
}
a.menu:hover {
  background-color:rgba(93, 114, 153, 0.76);
  font-size:15px;
}