@media (width <= 1200px) {
  #profile {
    grid-area: item1;
  }
  #leftside {
    grid-area: item2;
  }
  .menu {
    display: none;
  }
  .menuIcon {
    display: block;
  }
  .home {
    grid-template-columns: auto;
    grid-template-areas: "item1" "item2";
    height:fit-content;
  }

  .theborder {
    width: 300px;
    height: 300px;
  }
  .rightside {
    width: 250px;
    height: 250px;
  }
  .profile {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
  .footer_layer1 {
    justify-content: center;
  }

  .about .content {
    grid-template-columns: auto;
  }
  .content .aboutImg {
    text-align: center;
    margin-inline: auto;
    width: 40%;
    margin-bottom: 3rem;
  }
}
@media (width<=800px) {
  .profile {
    margin-inline: auto;
  }
  .leftside {
    width: 100%;
    margin-top: 2rem;
  }
  .typewriter h1 {
    font-size: 2rem;
  }
  .home {
    width: 100vw;
    margin-left: 0;
  }
}
@media (width <= 503px) {
  .aboutBtn {
    margin: 1rem 0;
  }

  .contactme1 {
    display: none;
  }
  .typewriter h1 {
    font-size: 1.5rem;
  }
  .leftside span {
    font-size: 1.2rem;
  }
  .leftside p {
    text-align: justify;
  }
  .theborder {
    width: 300px;
    height: 300px;
  }
  .rightside {
    width: 250px;
    height: 250px;
  }
  p{
    text-align: justify;
  }
  .career{
    padding: 3rem;
  }
 
  .education-item h3{
    font-size: 1rem;
  }
  .education-item p,span{
    padding:0.5rem 0;
    font-size: 0.8rem;
    width: 90%;
  }

  .container-card p{
    text-align: justify;
  }
  .container-card .card-title{
    text-align: center;
  }
  #formStatus{
    width: 70%;
  }
}
@media (width <= 390px) {
  .typewriter h1 {
    font-size: 1rem;
  }
  .leftside span {
    font-size: 1rem;
  }
  .leftside p {
    text-align: justify;
    font-size: 0.8rem;
  }
  .theborder {
    width: 280px;
    height: 280px;
  }
  .rightside {
    width: 230px;
    height: 230px;
  }
  .intro{
    width: 100%;
  }
  .contact-form-container form{
    width: 70%;
}
h1{
  font-size: 2rem;
}
}
@media (width <= 200px) {
  .typewriter h1 {
    font-size: 0.5rem;
  }
  .leftside span {
    font-size: 0.5rem;
  }
  .leftside p {
    text-align: justify;
    font-size: 0.4rem;
  }
  .theborder {
    width: 220px;
    height: 220px;
  }
  .rightside {
    width: 170px;
    height: 170px;
  }
  .intro{
    width: 100%;
  }
  .contact-form-container form{
    width: 70%;
}
h1{
  font-size: 1rem;
}
}