/*media queries */
@media (max-width: 321px) {
  .header-text #main {
    font-size: 25px;
  }
  .header-text p {
    font-size: 20px;
  }
  .header-text h3 {
    font-size: 20px;
  }
  .right-title {
    font-size: 14px;
    padding-top: 23px;
  }
  .skill-bar {
    margin-top: 20px;
  }
  .skill-main {
    font-size: 12px;
    margin-top: -20px;
    display: block;
  }
  .toggle {
    width: 70px;
    height: 70px;
  }
  .contact-input {
    width: 358px;
    height: 34px;
  }
  .contact-right {
    width: 100%;
  }
  .contact-left {
    height: 50vh;
    width: 100%;
  }

  .form-container {
    align-items: center;
    justify-content: center;
  }
  .form-container button {
    font-size: 12px;
  }
  .download {
    width: 60%;
  }
  .download a {
    font-size: 12px;
  }

@media (max-width: 426px) {
  #header {
    background-image: url(none);
  }
  .menuButton {
    display: block;
  }
  .header-text #main {
    font-size: 25px;
  }
  .hideOnMobile {
    display: none;
  }

  .contact-input {
    margin-top: 0;
    height: 30px;
    width: 80%;
  }

  /*projects*/
  .project-container {
    width: 100%;
    float: none;
  }
  #project-1 {
    width: 100%;
  }
  #project-2 {
    width: 100%;
  }
  #project-3 {
    width: 100%;
  }
  #project-4 {
    width: 100%;
  }
  .projects {
    height: 200vh;
  }
  .right-desc p {
    display: none;
  }

  /*SKILSS*/
  .skills {
    height: 180vh;
  }
  .skill-main {
    font-size: 12px;
    margin-top: -20px;
    display: block;
  }
  .skill-main .skill-bar .info {
    display: flex;
    justify-content: space-between;
    padding: 13px 10px;
  }

  /*EDUCATION*/

  .toggle {
    width: 70px;
    height: 70px;
  }
  .contact {
    height: 152vh;
  }
  .contact-left {
    height: 50vh;
    width: 100%;
  }
  .contact-right {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
}


@media (max-width: 700px) {
  #header {
    background-image: none;
    background-color: #080800;
  }
  body {
    overflow-x: hidden;
  }
}


}