body {
  font-family: 'Harmattan', sans-serif;
  list-style-type: none;
}


.ul-menu {
  background-color: #333;
  color: white;
  list-style: none;
  overflow: hidden;
  text-align: center;
}

.li-menu {
  float: right;
}

.P2 {
  text-align: CENTER;
  font-size: 40px;
  display: inline;
}

.a-menu {
  text-decoration: none;
  color: white;
  font-size: 20px;
  display: block;
  padding: 17px;

}

.a-menu:hover {
  background-color: rgb(202, 46, 46);
}

.col {
  width: 50%;
  float: left;
  text-align: center;
}

.profile {
  width: 200px;
  height: 200px;
  border-radius: 200px;

}

.social {
  width: 25px;
  padding: 5px;
}

.left {
  width: 20%;
  float: left;
}

.right {
  width: 80%;
  float: left;
}


.Row {
  padding: 5px;
}

.Row:after {
  display: table;
  clear: both;
  content: "";

}

.main-bar {
  background-color: gray;
  display: block;
  height: 25px;

}

.main-bar span {
  background-color: rgb(255, 0, 0);
  height: 25px;
  display: block;
  color: white;

}

.JavaScript {
  width: 60%;
  animation: JavaScript 2s;
}

.css {
  width: 70%;
  animation: css 2s;
}

.html {
  width: 100%;
  animation: html 2s;
}

.Python {
  width: 50%;
  animation: Python 2s;
}

.php {
  width: 20%;
  animation: php 2s;
}

.mysql {
  width: 0%;
  animation: mysql 2s;

}

.tkinter {
  width: 10%;
  animation: tkinter 2s;
}



@keyframes JavaScript {
  0% {
    width: 0%;

  }

  100% {
    width: 60%;
  }

}

@keyframes css {
  0% {
    width: 0%;

  }

  100% {
    width: 70%;
  }

}

@keyframes html {
  0% {
    width: 0%;

  }

  100% {
    width: 100%;
  }

}

@keyframes python {
  0% {
    width: 0%;

  }

  100% {
    width: 50%;
  }

}

@keyframes php {
  0% {
    width: 0%;

  }

  100% {
    width: 20%;
  }

}

@keyframes mysql {
  0% {
    width: 0%;

  }

  100% {
    width: 00%;
  }

}

@keyframes tkinter {
  0% {
    width: 0%;

  }

  100% {
    width: 10%;
  }

}

.foot {
  width: 100%;
  height: 40px;
  background-color: #333;
  text-align: center;
  color: aliceblue;
}




.contact-us {
  width: 90%;
  max-width: 1366px;
  margin: 5rem auto 0 auto;
  height: 100%;
  padding: 2rem 0;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  padding: 5rem 0;
  width: 100%;
  align-items: center;
}

form .btn {
  width: 100px;
  text-align: center;
}

label,
input,
textarea,
.btn {
  font-family: inherit;
  font-size: 1.6rem;
}

label,
input,
textarea {
  margin-bottom: 1.54rem;
}

input, textarea {
  border-block: white;
  width: 80%;
  border-radius: 1rem;
  border: none;
  outline: none;
  box-sizing: border-box;
  border: 3px solid #ccc;
  padding: 0.75rem 2rem;
  background-color: #1d242a;
  color: white;

}
.contact-us {
  text-align: center;
}

textarea {
  resize: vertical;
  background-color: rgb(255, 255, 255);
  color: white;
}