/* ====================================================
media queries
====================================================== */
/* ---------------------------------------------------
breakpoint: 800px
------------------------------------------------------ */

@media(max-width: 800px) {
    .other-boardSummary {
      margin-bottom: 100px;
    }
  }
  
  
  @media(min-width: 320px) and (max-height: 720px) {
    h1 {
      margin-top: 26px;
      margin-bottom: 12px;
    }
    .summary {
      margin-top: 20px;
    }
    .toDo-div {
      padding: 7px 25px 7px 25px;
    }
    .done-div {
      padding: 7px 25px 7px 25px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 13px 25px 13px 25px;
    }
    .lower-boardSummary {
      padding: 10px 20px 10px 20px;
    }
  }
  
  
  @media(min-width: 320px) and (min-height: 720px) {
    h1 {
      margin-top: 42px;
      margin-bottom: 16px;
    }
    .summary {
      margin-top: 30px;
    }
    .toDo-div {
      padding: 25px;
    }
    .done-div {
      padding: 25px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 25px;
    }
    .lower-boardSummary {
      padding: 20px;
    }
  }
  
  @media(min-width: 360px) and (max-height: 750px) {
    .summary-headline {
      padding: 0px 0px 0px 15px;
    }
    .toDo-div {
      padding: 20px 35px 20px 35px;
    }
    .done-div {
      padding: 20px 35px 20px 35px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding-left: 46px;
      padding-right: 46px;
    }
    .lower-boardSummary {
      padding: 15px 26px 15px 26px;
    }
  }
  
  
  @media(min-width: 360px) and (min-height: 750px) {
    #greeting_mobile {
      font-size: 24px;
    }
    #greeting_name_mobile {
      font-size: 30px;
    }
    .summary-headline {
      padding: 0px 0px 0px 21px;
    }
    .toDo-div {
      padding: 35px;
    }
    .done-div {
      padding: 35px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding-left: 46px;
      padding-right: 46px;
    }
    .lower-boardSummary {
      padding: 26px;
    }
  }
  
  @media(min-width: 370px) {
    .summary-headline {
      padding: 0px 0px 0px 25px;
    }
  }
  
  @media(min-width: 390px) {
    .summary-headline {
      padding: 0px 0px 0px 35px;
    }
  }
  
  @media(min-width: 420px) and (min-height: 775px) {
    #greeting_mobile {
      font-size: 28px;
    }
    #greeting_name_mobile {
      font-size: 34px;
    }
    .summary-headline {
      padding: 0px 0px 0px 45px;
    }
    .toDo-div {
      padding: 40px;
    }
    .done-div {
      padding: 40px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding-left: 55px;
      padding-right: 55px;
    }
    .lower-boardSummary {
      padding: 30px;
    }
  }
  
  @media(min-width: 440px) {
    .summary-headline {
      padding: 0px 0px 0px 50px;
    }
  }
  
  @media(min-width: 500px) {
    .summary-headline {
      padding: 0px 0px 0px 75px;
    }
  }
  
  @media(min-width: 550px) {
    #greeting_mobile {
      font-size: 32px;
    }
    #greeting_name_mobile {
      font-size: 40px;
    }
    .summary-headline {
      padding: 0px 0px 0px 75px;
    }
  }
  
  @media(min-width: 600px) and (min-height: 815px) {
    #greeting_mobile {
      margin-bottom: 12px;
    }
    h1 {
      font-size: 35px;
    }
    .toDo-div {
      padding: 45px;
    }
    .done-div {
      padding: 45px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding-left: 60px;
      padding-right: 60px;
    }
    .lower-boardSummary {
      padding: 34px;
    }
    .counter {
      font-size: 34px;
    }
    .toDo span {
      font-size: 14px;
    }
    .done span {
      font-size: 14px;
    }
    .urgent span {
      font-size: 12px;
    }
    .upcoming-deadline {
      font-size: 14px;
    }
    .date {
      font-size: 14px;
    }
    .lower-boardSummary span {
      font-size: 12px;
    }
  }
  
  @media(min-width: 700px) and (min-height: 825px) {
    .toDo-div {
      padding: 50px;
    }
    .done-div {
      padding: 50px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding-left: 70px;
      padding-right: 70px;
    }
    .lower-boardSummary {
      padding: 37px;
    }
  }
  
  @media(min-width: 800px) {
    .summary-headline {
      margin: 70px 0px 0px 135px;
      flex-direction: row;
      align-items: center;
    }
    h1 {
      margin-top: 0;
      margin-bottom: 0;
    }
    .lightblue-vertical-line {
      margin-top: 0;
    }
    .lightblue-vertical-line {
      display: flex;
    }
    .lightblue-underline {
      display: none;
    }
    .wrapper-div {
      display: flex;
    }
    .summary {
      margin-left: 140px;
      margin-top: 42px;
    }
    .toDo-div {
      padding: 48px;
    }
    .done-div {
      padding: 48px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 30px 62px 30px 62px;
    }
    .lower-boardSummary {
      padding: 34px;
    }
  }
  
  @media(min-width: 850px) {
    h1 {
      font-size: 38px;
    }
    .summary-headline {
      margin: 80px 0px 0px 165px;
    }
  }
  
  @media(min-width: 950px) {
    .toDo-div {
      padding: 63px;
    }
    .done-div {
      padding: 63px;
    }
    .toDo-and-done-icon {
      width: 40px;
      height: 40px;
    }
    .urgency-icon {
      width: 40px;
      height: 40px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 40px 95px 40px 95px;
    }
    .lower-boardSummary {
      padding: 46px;
    }
  }
  
  @media(min-width: 1100px) {
    h1 {
      font-size: 40px;
    }
    .summary-headline span {
      font-size: 17px;
    }
    .summary {
      width: 60%;
      margin-left: 200px;
    }
    .toDo-div {
      padding: 45px;
    }
    .done-div {
      padding: 45px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 30px 57px 30px 57px;
    }
    .lower-boardSummary {
      padding: 34px;
    }
    .good-morning {
      display: flex;
      flex-direction: column;
      width: 40%;
      align-items: start;
      justify-content: center;
      margin-top: 38px;
      margin-right: 50px;
    }
    .greeting {
      color: var(--background-color-darkblue);
      font-size: 33px;
      font-weight: 500;
      padding-bottom: 12px;
    }
    .greeting-name {
      color: var(--accent-color-lightblue);
      font-size: 42px;
      font-weight: 700;
    }
  }
  
  @media(min-width: 1200px) {
    h1 {
      font-size: 42px;
    }
    .toDo-div {
      padding: 45px 55px 45px 55px;
    }
    .done-div {
      padding: 45px 55px 45px 55px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 30px 79px 30px 79px;
    }
    .lower-boardSummary {
      padding: 40px;
    }
  }
  
  @media(min-width: 1350px) {
    h1 {
      font-size: 44px;
    }
    .summary-headline span {
      font-size: 18px;
    }
    .wrapper-div {
      margin-top: 20px;
    }
    .toDo-div {
      padding: 48px 78px 48px 78px;
    }
    .toDo-and-done-icon {
      width: 50px;
      height: 50px;
    }
    .done-div {
      padding: 48px 78px 48px 78px;
    }
    .urgentCounter-and-upcomingDeadline {
      padding: 33px 105px 33px 105px;
    }
    .urgency-icon {
      width: 50px;
      height: 50px;
    }
    .vertical-line {
      height: 60px;
      margin-left: 30px;
      margin-right: 30px;
    }
    .lower-boardSummary {
      padding: 40px 55px 40px 55px;
    }
    .greeting {
      font-size: 40px;
    }
    .greeting-name {
      font-size: 50px;
    }
    .counter {
      font-size: 45px;
    }
    .toDo span {
      font-size: 17px;
    }
    .done span {
      font-size: 17px;
    }
    .urgent span {
      font-size: 15px;
    }
    .upcoming-deadline {
      font-size: 17px;
    }
    .date {
      font-size: 17px;
    }
    .lower-boardSummary span {
      font-size: 15px;
    }
  }
  
  @media(min-width: 1450px) {
    .summary-headline {
      margin: 80px 0px 0px 195px;
    }
  }
  
  @media(min-width: 1600px) {
    .summary-headline {
      margin: 80px 0px 0px 240px;
    }
  }