/**
 * original code from https://github.com/bryanbraun/your-life/tree/gh-pages
    * modified by @LundiNord
 */
:root {
  --box-color: #000000;
}
[data-theme="dark"] {
  --box-color: rgba(255, 255, 255, 0.34);
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 8px; /* for page padding on mobile */
}

.month {
  padding: 1.25px;
}
.chart {
  position: relative;
  margin: 0.5rem auto 2rem auto;
  padding: 0;
  list-style-type: none;
}
.x-axis {
  position: absolute;
  top: -2.75em;
  height: 2.75em;
  width: 100%;
}
.x-axis .markers,
.y-axis .markers {
  font-size: 0.8rem;
  color: var(--text-color);
}
.weeks {
  max-width: 624px; /* 12px per week * 52weeks = 624px */
}
.weeks > li {
  border: 1px solid var(--box-color);
  width: 1.282051282%; /* 8px/624px */
  padding-bottom: .961538462%; /* 6px/624px */
  margin: .320512821%; /* 2px/624px */
  float: left;
}
.weeks--x-label {
  color: var(--text-color);
  font-size: 1.25rem;
}
.weeks--y-label {
  color: var(--text-color);
  transform: rotate(-90deg);
  font-size: 1.25rem;
  position: absolute;
  left: -64px;
  top: 24px;
}
.weeks--x-markers span {
  position: absolute;
  bottom: 0;
}
/* The year is divided into 52 weeks, so the % marker location //
// can be found at (1/52)n (where n is the week number). We    //
// must offset by 1 because we start counting at 1, so the     //
// final equation is (n/52)-(1/52)                             */
.weeks--x-markers span:nth-of-type(1) { left: 0;             }
.weeks--x-markers span:nth-of-type(2) { left: 7.6923076920%; }
.weeks--x-markers span:nth-of-type(3) { left: 17.307692308%; }
.weeks--x-markers span:nth-of-type(4) { left: 26.923076923%; }
.weeks--x-markers span:nth-of-type(5) { left: 36.538461538%; }
.weeks--x-markers span:nth-of-type(6) { left: 46.153846154%; }
.weeks--x-markers span:nth-of-type(7) { left: 55.769230769%; }
.weeks--x-markers span:nth-of-type(8) { left: 65.384615385%; }
.weeks--x-markers span:nth-of-type(9) { left: 75%;           }
.weeks--x-markers span:nth-of-type(10) { left: 84.615384615%; }
.weeks--x-markers span:nth-of-type(11) { left: 94.230769231%; }

.weeks--y-markers span {
  position: absolute;
  left: -1.25em;
}

.weeks--y-markers span:nth-of-type(1) { top: 0; } /* (n/90) */
.weeks--y-markers span:nth-of-type(2) { top: 5.555555556%; }
.weeks--y-markers span:nth-of-type(3) { top: 11.111111111%; }
.weeks--y-markers span:nth-of-type(4) { top: 16.666666667%; }
.weeks--y-markers span:nth-of-type(5) { top: 22.222222222%; }
.weeks--y-markers span:nth-of-type(6) { top: 27.777777778%; }
.weeks--y-markers span:nth-of-type(7) { top: 33.333333333%; }
.weeks--y-markers span:nth-of-type(8) { top: 38.888888889%; }
.weeks--y-markers span:nth-of-type(9) { top: 44.444444444%; }
.weeks--y-markers span:nth-of-type(10) { top: 50%; }
.weeks--y-markers span:nth-of-type(11) { top: 55.555555556%; }
.weeks--y-markers span:nth-of-type(12) { top: 61.111111111%; }
.weeks--y-markers span:nth-of-type(13) { top: 66.666666667%; }
.weeks--y-markers span:nth-of-type(14) { top: 72.222222222%; }
.weeks--y-markers span:nth-of-type(15) { top: 77.777777778%; }
.weeks--y-markers span:nth-of-type(16) { top: 83.333333333%; }
.weeks--y-markers span:nth-of-type(17) { top: 88.888888889%; }
.weeks--y-markers span:nth-of-type(18) { top: 94.444444444%; }
.weeks--y-markers span:nth-of-type(19) {
  bottom: -1em;
  left: 100%;
  font-size: 1.5em;
  font-weight: bold;
}

/* see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

[data-tooltip]:hover::after {
  display: block;
  position: absolute;
  content: attr(data-tooltip);
  border: 1px solid var(--border-color);
  background: var(--background-color);
  padding: .25em;
  margin-top: 15px;
}


/**
 * Print Styles
 */
@page {
  size: Letter portrait;
}
@media print {
  .credits p,
  .chart li {
    /* Force backgrounds to show (like the red shapes). This overrides the print
      dialog option "Print backgrounds," which often defaults to disabled). We
      target the affected elements directly because inheritance wasn't sufficient
      in Firefox. */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .unitbox {
    border-bottom: none;
    padding: 0;
    background-image: none;
  }

  .month {
    appearance: none;
    width: 96px;
    font-size: 18px;
  }
  .day {
    font-size: 18px;
  }
  .year {
    font-size: 18px;
  }

  .print-hide {
    display: none;
  }
}