/* Reduce by a quarter */
@media (max-width: 650px) {
  .main-container {
    grid-template-rows: 450px;
    grid-template-columns: 450px;
  }

  .signs-image {
    width: 450px;
  }

  .sign-circle {
    margin-left: 13px;
    margin-top: 13px;
    width: 423px; /* needed for after chart calculates */
    height: 423px; /* needed for after chart calculates */
  }

  .sign {
    top: -6px; /* -child size/2 */
    left: 205px; /* parent size/2 - child size/2 */
  }

  .sign-large {
    height: 12px;
  }

  .sign-medium {
    height: 10px;
  }

  .sign-small {
    height: 9px;
  }

  .sign-extra-small {
    height: 7px;
  }

  .planet-circle {
    margin-left: 52px;
    margin-top: 52px;
    width: 345px; /* needed for after chart calculates */
    height: 345px; /* needed for after chart calculates */
  }

  .planet {
    top: -12px; /* -child size/2 */
    left: 160px; /* parent size/2 - child size/2 */
  }

  .planet-skinny {
    padding-left: 4px;
  }

  .planet-large {
    height: 19px;
  }

  .planet-medium {
    height: 18px;
  }

  .planet-medium-small {
    height: 17px;
  }

  .planet-small {
    height: 16px;
  }

  .planet-extra-small {
    height: 16px;
  }

  .line-circle-outer {
    margin-left: 19px;
    margin-top: 19px;
    width: 412px;
    height: 412px;
  }

  .line-circle-inner {
    margin-left: 105px;
    margin-top: 105px;
    width: 240px;
    height: 240px;
  }

  .line-outer,
  .line-inner {
    border-radius: 1px;
    width: 2px;
    height: 12px;
    top: -1px;
  }

  .line-outer {
    left: 205px; /* parent size/2 - child size/2 */
  }

  .line-inner {
    left: 118px; /* parent size/2 - child size/2 */
  }

  .retro-circle {
    margin-left: 66px;
    margin-top: 66px;
    width: 319px;
    height: 319px;
  }

  .retro {
    top: -4px; /* -child size/2 */
    left: 155px; /* parent size/2 - child size/2 */
  }

  .retro img {
    width: auto;
    height: 9px;
  }

  .retro-skinny {
    padding-left: 4px;
  }

  .aspect-circle {
    margin-left: 111px;
    margin-top: 111px;
    width: 228px;
    height: 228px;
  }

  .aspect-line {
    left: 115px; /* parent size/2 - child size/2 */
    height: calc(var(--height) * 0.75);
    top: calc(var(--top) * 0.75);
  }

  .form {
    grid-template-columns: 192px 27px 1px 27px 68px 46px;
  }

  .form p {
    text-align: left;
  }
}

/* Reduce by half */
@media (max-width: 500px) {
  .main-container {
    grid-template-rows: 300px;
    grid-template-columns: 300px;
  }

  .signs-image {
    width: 300px;
  }

  .sign-circle {
    margin-left: 9px;
    margin-top: 9px;
    width: 282px; /* needed for after chart calculates */
    height: 282px; /* needed for after chart calculates */
  }

  .sign {
    top: -4px; /* -child size/2 */
    left: 137px; /* parent size/2 - child size/2 */
  }

  .sign-large {
    height: 8px;
  }

  .sign-medium {
    height: 7px;
  }

  .sign-small {
    height: 6px;
  }

  .sign-extra-small {
    height: 5px;
  }

  .planet-circle {
    margin-left: 35px;
    margin-top: 35px;
    width: 230px; /* needed for after chart calculates */
    height: 230px; /* needed for after chart calculates */
  }

  .planet {
    top: -8px; /* -child size/2 */
    left: 107px; /* parent size/2 - child size/2 */
  }

  .planet-skinny {
    padding-left: 3px;
  }

  .planet-large {
    height: 13px;
  }

  .planet-medium {
    height: 12px;
  }

  .planet-medium-small {
    height: 11px;
  }

  .planet-small {
    height: 11px;
  }

  .planet-extra-small {
    height: 10px;
  }

  .line-circle-outer {
    margin-left: 12px;
    margin-top: 12px;
    width: 275px;
    height: 275px;
  }

  .line-circle-inner {
    margin-left: 70px;
    margin-top: 70px;
    width: 160px;
    height: 160px;
  }

  .line-outer,
  .line-inner {
    border-radius: 1px;
    width: 1px;
    height: 8px;
    top: -1px;
  }

  .line-outer {
    left: 136px; /* parent size/2 - child size/2 */
  }

  .line-inner {
    left: 79px; /* parent size/2 - child size/2 */
  }

  .retro-circle {
    margin-left: 44px;
    margin-top: 44px;
    width: 213px;
    height: 213px;
  }

  .retro {
    top: -3px; /* -child size/2 */
    left: 103px; /* parent size/2 - child size/2 */
  }

  .retro img {
    width: auto;
    height: 6px;
  }

  .retro-skinny {
    padding-left: 2px;
  }

  .aspect-circle {
    margin-left: 74px;
    margin-top: 74px;
    width: 152px;
    height: 152px;
  }

  .aspect-line {
    left: 76px; /* parent size/2 - child size/2 */
    height: calc(var(--height) * 0.5);
    top: calc(var(--top) * 0.5);
  }

  .form {
    grid-template-columns: 180px 27px 1px 27px 18px 46px;
  }

  .form-left {
    margin-left: -12px;
  }

  .form-container {
    border: none;
    box-shadow: none;
  }

  .time-format {
    font-size: 10px;
  }

  .unknown-time-container {
    margin-top: -36px;
  }

  .unknown-time-label {
    font-size: 18px;
    margin-top: 0px;
  }
}

@media (max-width: 400px) {
  .main-container {
    padding-top: 135px;
  }
}

@media (max-width: 375px) {
  .main-container {
    padding-top: 185px;
  }
}