/* Desktop Large*/
@media (max-width: 1280px) {
  .nav .navbar-title .logo {
    top: 1rem;
  }

  .nav .navbar-title {
    padding: 0.3rem;
  }
  .main .content {
    max-width: 90vw;
    width: 90vw;
    scroll-margin-top: 8rem;
  }
  .nav .navbar-menu .menu {
    height: 3rem;
  }
  .main {
    margin-top: 8rem;
  }
  .main .content .selection .date label {
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem;
  }

  .main .content .selection .date .choose input {
    font-size: 1rem;
    padding: 0.5rem;
    width: 15rem;
  }
}

/* Desktop */
@media (max-width: 992px) {
  .nav .navbar-title h1 {
    font-size: 1.2rem;
  }
  .nav .navbar-title .location {
    top: 0.5rem;
    right: 1rem;
  }
  .nav .navbar-menu .menu span {
    font-size: 1.5rem;
  }
  .main .content .data .data-circle h1 {
    width: 6rem;
    height: 6rem;
    font-size: 3rem;
  }
  .main .content .data .pb .data-info {
    font-size: 1.2rem;
    width: 10rem;
  }
  .main .content .data .data-indexPM p,
  .main .content .data .data-indexCO p {
    font-size: 1.5rem;
  }
  .main .content h3 {
    padding: 0.8rem 2rem;
    font-size: 1.5rem;
  }
  .main .content {
    scroll-margin-top: 8rem;
  }
  #myChart {
    height: 25rem !important;
    padding: 0 2rem 2rem 2rem;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .nav .navbar-title h1 {
    font-size: 1.2rem;
    text-align: start;
  }
  .nav .navbar-title .location {
    top: 0.3rem;
    right: 1rem;
  }
  .main .content {
    max-width: 100vw;
    width: 100vw;
    scroll-margin-top: 8rem;
  }

  .main .content .data .data-circle h1 {
    width: 5rem;
    height: 5rem;
  }
  .main .content .data .pb .data-info {
    font-size: 1.2rem;
    width: 10rem;
  }
  .main .content .data .data-indexPM .box,
  .main .content .data .data-indexCO .box {
    width: 8rem;
  }
  .main .content .data .data-indexPM p,
  .main .content .data .data-indexCO p {
    font-size: 1.5rem;
  }
  .main .content .selection .date .choose input {
    width: 10rem;
  }
  .main .content .table table {
    margin: 1rem;
  }
  #info {
    padding: 1rem;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .nav .navbar-title h1 span {
    display: block;
  }
  .nav .navbar-title h1 {
    font-size: 0.8rem;
    text-align: start;
  }
  .nav .navbar-title .location {
    right: 0.3rem;
  }
  .main .content h3 {
    padding: 0;
  }
  .main .content .data {
    flex-direction: column;
  }
  .main .content .data .data-circle {
    margin: auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
  }
  .main .content .data .data-circle h1 {
    margin-right: 30px;
  }
  .main .content .data .pb {
    padding-left: 10px;
    padding-right: 10px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .main .content .data .pb .data-info {
    font-size: 1rem;
    width: 7em;
    margin-right: 10px;
  }
  .main .content .data .data-indexPM .box,
  .main .content .data .data-indexCO .box {
    width: 6rem;
    margin-right: 10px;
  }
  .main .content .data .data-indexPM p,
  .main .content .data .data-indexCO p {
    font-size: 1.2rem;
  }
  .main .content .data .pb .data-info {
    font-size: 1rem;
  }
  .main .content .selection {
    flex-direction: column;
  }
  .main .content .selection .date label {
    flex: 1;
  }
  .main .content .selection .date .choose {
    flex: 3;
  }
  .main .content .selection .date .choose input {
    width: 15rem;
  }
  .main .content .table table {
    margin: 1rem;
  }
  .content .pm25,
  .content .co {
    margin-bottom: 1rem;
  }

  .content .pm25 .title,
  .content .co .title {
    font-size: 1rem;
  }
  .content .pm25 p,
  .content .co p {
    font-size: 0.8rem;
  }
  .bubble {
    width: 10px;
    height: 10px;
  }
  .footer {
    font-size: 0.7rem;
  }
}