responsive.css

@media screen and (min-width:540px) {
  .navbar{
    display: flex;
    width: 100%;
    top: 0;
    height: 10%;
    align-items: right;
    justify-content: right;
  }
  .closenavbar,.opennavbar{
    display: none;
  }
  .head1{
    visibility: visible;
  }
  h1{
    visibility: visible;
    display: inline-flex;
    position: fixed;
    left: 0;
    font-size: 2rem;
  }
.nav{
  display: none;
}
  .navbtn:hover{
    background-color: yellow;
    border-radius: 1vw;
    color: black;
    
  }
  .fa-sun,.fa-moon:hover{
    transform: scale(1.2);
  }
  .img-container img{
    width: 20vw;
  }
  .img-container{
    float: left;
    margin-top: 11vw;
    margin-left: 20vw;
  }
  .txt{
    margin-top:11% ;
    width: 50vw;
    font-size: 1.6rem;
    float: right;
  }
  .about {
    clear: both; 
    margin-top:20vh;
  }
  h2,h3{
    display: block;
    float: none;
  }
  .projects,.largescreenaboutme{
    clear: both;
  }
  .largescreenaboutme{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding:10px;
  }
  .largescreenaboutme div{
    overflow: hidden;
    padding:10px;
  } 
  .tech{
    display: flexbox;
    flex-wrap: nowrap;
  }
  .technologies-icons{
    flex-wrap: wrap;
    flex-shrink: 1;
  }
  .scont img{
    width: 10%;
    height: auto;
    transform: scale(1);
  }
  .scont img:hover{
    transform: scale(2);
    transition: 2s;
    margin-left:2vh ;
  }
  .scont{
    width: auto;
    cursor: pointer;
  }
  .services > div > div:not(.scont) {
    display: none;
  }
  .projects{
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }  
  .form{
    width: 30%;
  }
  .main-con{
    width: 17vw;
  }
  .scont h5{
    margin-left: 5px;
  }
}
@media screen and (min-width:790px) {
  .about{
    display: none;
  }
  .about2{
    display: block;
  }
  .scont img{
    transform: scale(2);
  }

}
@media screen and (min-width:540px) {
  .form{
    margin: 20px;
    width: 30%;
    min-width: 300px;
    max-width: 420px;
  }
  
.contacts{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.contact{
  top: 0;
  justify-content:flex-end;
}
.contact a {
  height: 20px;
}
.fa-sun,.fa-moon{
  font-size: 2rem;
}
}