/*
:root {
  --sphere-width: max(min(600px, 100vw), 50vw, min(80vw, 70vh));
  --sphere-margin-top: min(40px, calc(0.25*(100vw - var(--sphere-width))));
  --sphere-margin-bottom: 2em;
}
*/

body {
  overflow-y: auto;
  overflow-x: hidden;
}

#chs-spacer {
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
  

#chs-sphere {
  position: relative;

  margin-left: auto;
  margin-right: auto;

/*  width: var(--sphere-width);
  padding-top: var(--sphere-width);
  margin: var(--sphere-margin-top) auto var(--sphere-margin-bottom) auto;
*/
}

#chs-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#chs-switch-container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}


#chs-celestial-label {
  direction: rtl;
}

.chs-mode-label {
  display: inline-block;
/*  width: 262px;*/
/*  height: 30px;
  line-height: 30px;*/
  margin: 0;
}

.chs-mode-label-text {
  display: inline-block;
  max-width: 160px;
  margin: 0;
  vertical-align: middle;
}

#chs-switch-button {
  display: inline-block;
  margin: 8px;
  width: 200px;
}

#chs-latitude-container {
  margin: 0 auto 62px auto;
  width: 90%;
  max-width: 420px;
}


#chs-horizon-arrow-horizontal {
  display: inline-block;
  margin: 8px;
}

#chs-celestial-arrow-horizontal {
  display: inline-block;
  margin: 8px;
}

#chs-horizon-arrow-vertical {
  display: none;
  margin: 8px;
}

#chs-celestial-arrow-vertical {
  display: none;
  margin: 8px;
}


@media (max-width: 760px) {
  #chs-switch-container {
    flex-direction: column;
  }

  #chs-horizon-arrow-horizontal {
    display: none;
  }

  #chs-celestial-arrow-horizontal {
    display: none;
  }

  #chs-horizon-arrow-vertical {
    display: inline-block;
  }

  #chs-celestial-arrow-vertical {
    display: inline-block;
  }

}