@media (max-width: 400px) and (orientation: portrait) {

  .button-toggledarkmode {
    top: -5px;
    right: 0;
  }
  .button-toggledarkmode button {
    font-size: 1rem;
  }

  .button-jobs {
  }
  .button-jobs button {
    font-size: 1.5rem;
  }

  .jobs {
    width: 320px;
  }

  .container {
    max-width: 360px;
    min-width: 360px;
    min-height: auto; 
    margin: 15px;
  }

  .top {
    padding: 20px;
    margin-top: 20px;
  }
  .top-height {
    height: 260px;
  }

  .group {
  }
  .group .left-side img {
    width: 340px;
  }

  .bottom {
    /* border: 1px solid red; */
    margin: 10px 20px 0;
  }
  .bottom .right-side {
   }



  .hobbies {
    margin: 10px 20px 0;
  }
  .hobbies ul {
    flex-direction: column;
  }

}

@media (max-width: 900px) and (orientation: landscape) {

  .button-toggledarkmode {
    top: -8px;
    right: 0;
  }
  .button-toggledarkmode button {
    font-size: 1rem;
  }

  .button-jobs {
  }
  .button-jobs button {
    font-size: 1.5rem;
  }

  .container {
    max-width: 900px;
    min-height: auto; 
    margin: 20px;
  }

  .top {
    padding: 20px;
    margin-top: 20px;
  }
  .top-height {
    height: 480px;
  }
  
  .group {
  }
  .group img {
    /* width: 340px; */
  }
  .group .right-side {
   }

  .bottom {
  }

}