@charset "UTF-8";
:root {
  --black: hsl(30 38% 8%);
  --red: hsl(0 52% 59%);
  --white: #fff;
  --soft-white: hsl(30 2% 95%);
  --box-size: 32px;
  --side-padding: 1.3rem;
  --border-color: var(--white);
  --box-label: hsl(220 15% 27%);
  --box-number: hsl(220 15% 27%);
  --empty-border-color: var(--border-color);
  --empty-fill-color: hsl(20 5% 84%);
  --empty-box-label: var(--box-label);
  --empty-box-number: var(--box-number);
  --avoidance-empty-border-color: var(--border-color);
  --avoidance-empty-fill-color: var(--soft-white);
  --avoidance-empty-box-label: #ccc;
  --avoidance-empty-box-number: #ccc;
  --completed-fill-color: hsl(340 62% 45%);
  --completed-hover-color: var(--white);
  --completed-border-color: var(--black);
  --completed-box-label: var(--box-label);
  --completed-box-number: var(--box-number);
  --partial-fill-color: hsl(30 13% 68%);
  --partial-hover-color: var(--white);
  --partial-border-color: var(--black);
  --partial-box-label: var(--box-label);
  --partial-box-number: var(--box-number);
  --failure-fill-color: #f00;
  --failure-hover-color: var(--white);
  --failure-border-color: var(--black);
  --failure-box-label: var(--box-label);
  --failure-box-number: var(--box-number);
  --failure-icon-color: var(--white);
  --finished-fill-color: hsl(340 52% 32%);
  --finished-hover-color: var(--white);
  --finished-border-color: var(--border-color);
  --finished-box-label: var(--finished-fill-color);
  --finished-box-label-hover: var(--finished-hover-color);
  --finished-box-number: var(--finished-fill-color);
  --finished-box-number-hover: var(--finished-hover-color);
  --abandoned-fill-color: hsl(220 21% 6%);
  --abandoned-hover-color: var(--white);
  --abandoned-border-color: var(--border-color);
  --abandoned-box-label: var(--abandoned-fill-color);
  --abandoned-box-label-hover: var(--abandoned-hover-color);
  --abandoned-box-number: var(--abandoned-fill-color);
  --abandoned-box-number-hover: var(--abandoned-hover-color);
  --sunday-fill-color: var(--soft-white);
  --sunday-hover-color: hsl(30 48% 20%);
  --sunday-border-color: var(--border-color);
  --sunday-box-label: hsl(208 21% 40%);
  --sunday-box-label-hover: hsl(30 18% 70%);
  --sunday-box-number: hsl(208 21% 43%);
  --sunday-box-number-hover: hsl(30 18% 70%);
  --selected-fill-color: var(--red);
  --selected-hover-color: hsl(0 2% 85%);
  --selected-border-color: var(--black);
  --selected-box-label: var(--selected-fill-color);
  --selected-box-label-hover: var(--selected-hover-color);
  --selected-box-number: var(--selected-fill-color);
  --selected-box-number-hover: var(--selected-hover-color);
  --today-color: hsl(45 38% 47%);
  --today-fill-color: hsl(222 34% 15%);
  --today-hover-color: hsl(0 2% 85%);
  --today-border-color: var(--black);
  --today-box-label: var(--today-fill-color);
  --today-box-label-hover: var(--today-hover-color);
  --today-box-number: var(--today-fill-color);
  --today-box-number-hover: var(--today-hover-color);
  --gap: 10px;
  --header-bg: hsl(220 20% 10%);
  --saving-bg: #151515;
  --name: hsl(220 23% 77%);
  --name-bg: hsl(30 10% 88%);
  --name-hover-bg: hsl(220 10% 20%);
  --name-finished-fg: hsl(220 20% 25%);
  --name-abandoned-fg: hsl(220 20% 25%);
  --name-selected-bg: hsl(81 18% 34%);
  --name-selected-fg: var(--white);
  --name-selected-finished-fg: hsl(82 13% 52%);
  --name-selected-abandoned-fg: hsl(82 13% 52%);
}

/*
@font-face {
  font-family: english;
  src: url('/static/fonts/imfell-english-italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: english;
  src: url('/static/fonts/imfell-english-roman.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
*/
* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-rendering: optimizeLegibility;
}

html {
  background: #000;
  height: 100%;
}

body {
  background: var(--header-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

main {
  background: var(--header-bg);
  color: #999;
  flex: 1;
  overflow-y: scroll;
  position: relative;
  transition: filter 0.3s;
}
main > header.month {
  align-items: end;
  background: var(--header-bg);
  border-top: solid 5px var(--header-bg);
  padding: 1rem var(--side-padding) 0.4rem;
  transition: filter 0.3s;
}
main > header.month h1 {
  margin: 0;
}
main > header.month h1 a {
  color: #324467;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
}
main > header.month h1 a:hover {
  color: #fff;
}
main > header.month .namespace {
  color: #333;
  font-weight: 300;
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
main > header.month.saving {
  border-top-color: #111;
}
main .projects {
  /* border-top: solid 2px var(--border-color); */
  display: flex;
}
main .names {
  /* border-right: solid 2px var(--border-color); */
  display: flex;
  flex-direction: column;
  margin-bottom: var(--gap);
  width: 10rem;
  z-index: 100;
}
main .names .project-name {
  align-items: center;
  color: var(--name);
  cursor: pointer;
  display: flex;
  height: calc(var(--box-size) + 12px);
  font-size: 0.9rem;
  font-weight: 450;
  line-height: 1.15;
  padding: 0 var(--side-padding);
  padding-right: 0.5rem;
  word-break: break-word;
  /*
  &.art {
    color: hsl(130 14% 51%);
  }

  &.typesetting {
    color: hsl(171 22% 54%);
  }

  &.fiction {
    color: hsl(73 28% 58%);
  }

  &.code {
    color: hsl(253 48% 71%);
  }

  &.writing {
    color: hsl(202 42% 71%);
  }
  */
  /*
  &::before {
    content: '';
    background: #ccc;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    margin-right: 7px;
  }

  &.art::before {
    background: hsl(340 100% 67%);
  }

  &.typesetting::before {
    background: hsl(171 30% 60%);
  }

  &.fiction::before {
    background: hsl(214 30% 60%);
  }

  &.code::before {
    background: hsl(61 30% 60%);
  }
  */
}
main .names .project-name:hover {
  background: var(--name-hover-bg);
}
main .names .project-name.finished {
  border-color: var(--name-finished-fg);
  color: var(--name-finished-fg);
}
main .names .project-name.abandoned {
  border-color: var(--name-abandoned-fg);
  color: var(--name-abandoned-fg);
}
main .names .project-name.selected {
  background: var(--name-selected-bg);
  color: var(--name-selected-fg);
}
main .names .project-name.selected.finished {
  color: var(--name-selected-finished-fg);
}
main .names .project-name.selected.abandoned {
  color: var(--name-selected-abandoned-fg);
}
main .boxes {
  flex: 1;
  overflow-x: scroll;
  padding-right: var(--gap);
  padding-left: var(--gap);
  padding-bottom: var(--gap);
}
main .boxes .project-days {
  display: flex;
}
main .boxes .project-days.avoidance .day.empty {
  background: var(--avoidance-empty-fill-color);
  border-color: var(--avoidance-empty-border-color);
}
main .boxes .project-days.avoidance .day.empty .box-label {
  color: var(--avoidance-empty-box-label);
}
main .boxes .project-days.avoidance .day.empty .box-num {
  color: var(--avoidance-empty-box-number);
}
main .boxes .project-days .day {
  /* border: solid 2px var(--black); */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  justify-content: space-between;
  padding: 0.2rem 0.1rem;
  text-align: center;
  margin: 6px 0px;
  height: var(--box-size);
  width: var(--box-size);
  min-width: var(--box-size);
  min-height: var(--box-size);
  max-width: var(--box-size);
  max-height: var(--box-size);
  position: relative;
  -webkit-user-select: none;
}
main .boxes .project-days .day:last-of-type {
  margin-right: var(--gap);
}
main .boxes .project-days .day .box-label {
  color: var(--box-label);
  font-size: 0.3rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
  pointer-events: none;
  text-transform: uppercase;
}
main .boxes .project-days .day .box-num {
  color: var(--box-number);
  font-size: 0.75rem;
  line-height: 1;
  margin-top: -4px;
  pointer-events: none;
}
main .boxes .project-days .day.empty {
  /* background: var(--empty-fill-color); */
  border-color: var(--empty-border-color);
}
main .boxes .project-days .day.empty .box-label {
  color: var(--empty-box-label);
}
main .boxes .project-days .day.empty .box-num {
  color: var(--empty-box-number);
}
main .boxes .project-days .day.empty:hover .box-label {
  color: #444;
}
main .boxes .project-days .day.empty:hover .box-num {
  color: #555;
}
main .boxes .project-days .day.sunday {
  border-color: var(--sunday-border-color);
}
main .boxes .project-days .day.sunday .box-label {
  color: var(--sunday-box-label);
}
main .boxes .project-days .day.sunday .box-num {
  color: var(--sunday-box-number);
}
main .boxes .project-days .day.sunday:hover .box-label {
  color: var(--sunday-box-label-hover);
}
main .boxes .project-days .day.sunday:hover .box-num {
  color: var(--sunday-box-number-hover);
}
main .boxes .project-days .day.today {
  background: var(--today-fill-color);
}
main .boxes .project-days .day.today.empty {
  border-radius: 3px;
}
main .boxes .project-days .day.today .box-label {
  color: var(--today-color);
}
main .boxes .project-days .day.today .box-num {
  color: var(--today-color);
}
main .boxes .project-days .day.completed {
  background: var(--completed-fill-color);
  border-color: var(--completed-border-color);
}
main .boxes .project-days .day.completed .box-label {
  color: var(--completed-fill-color);
}
main .boxes .project-days .day.completed .box-num {
  color: var(--completed-fill-color);
}
main .boxes .project-days .day.completed:hover {
  background: var(--completed-hover-color);
}
main .boxes .project-days .day.completed:hover .box-label {
  color: var(--completed-hover-color);
}
main .boxes .project-days .day.completed:hover .box-num {
  color: var(--completed-hover-color);
}
main .boxes .project-days .day.failure {
  background: var(--failure-fill-color);
  border-color: var(--failure-border-color);
}
main .boxes .project-days .day.failure::before {
  color: var(--failure-icon-color);
  bottom: 0;
  content: "×";
  font-size: 1.7rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
main .boxes .project-days .day.failure .box-label {
  color: var(--failure-fill-color);
}
main .boxes .project-days .day.failure .box-num {
  color: var(--failure-fill-color);
}
main .boxes .project-days .day.failure:hover {
  background: var(--failure-hover-color);
}
main .boxes .project-days .day.failure:hover .box-label {
  color: var(--failure-hover-color);
}
main .boxes .project-days .day.failure:hover .box-num {
  color: var(--failure-hover-color);
}
main .boxes .project-days .day.partial {
  background: var(--partial-fill-color);
  border-color: var(--partial-border-color);
}
main .boxes .project-days .day.partial .box-label {
  color: var(--partial-fill-color);
}
main .boxes .project-days .day.partial .box-num {
  color: var(--partial-fill-color);
}
main .boxes .project-days .day.partial:hover {
  background: var(--partial-hover-color);
}
main .boxes .project-days .day.partial:hover .box-label {
  color: var(--partial-hover-color);
}
main .boxes .project-days .day.partial:hover .box-num {
  color: var(--partial-hover-color);
}
main .boxes .project-days .day.finished {
  background: var(--finished-fill-color);
  border-color: var(--finished-border-color);
  cursor: default;
}
main .boxes .project-days .day.finished .box-label {
  color: var(--finished-box-label);
}
main .boxes .project-days .day.finished .box-num {
  color: var(--finished-box-number);
}
main .boxes .project-days .day.abandoned {
  background: var(--abandoned-fill-color);
  border-color: var(--abandoned-border-color);
  cursor: default;
}
main .boxes .project-days .day.abandoned .box-label {
  color: var(--abandoned-box-label);
}
main .boxes .project-days .day.abandoned .box-num {
  color: var(--abandoned-box-number);
}
main .boxes .project-days .day.selected::before {
  background: rgba(151, 182, 99, 0.5);
  bottom: 0;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
main .boxes .project-days .day.selected:hover::before {
  background: rgba(175, 200, 132, 0.5);
}
main .boxes .project-days .spacer {
  min-width: 20vw;
}
@media screen and (min-width: 700px) {
  main .boxes .project-days .spacer {
    min-width: 10vw;
  }
}

.panel {
  background: #111;
  opacity: 0;
  pointer-events: none;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 1.5rem;
  padding-bottom: 6.5rem;
  position: fixed;
  transition: opacity 0.3s;
  z-index: 300;
}
.panel header {
  display: flex;
}
.panel header input[type=text] {
  background: #000;
  border: none;
  border-radius: 0;
  color: #fff;
  flex: 1;
  font-size: 1.2rem;
  max-width: 16rem;
  padding: 0.3rem 0.6rem 0.4rem;
}
.panel header input[type=text]:focus {
  outline: none;
}
.panel header .button.save {
  display: inline-flex;
  flex: 1;
}
.panel .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.panel .buttons .button {
  color: #999;
}
.panel .button {
  border-radius: 5px;
  color: #999;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
}
.panel .button:hover {
  cursor: pointer;
  text-decoration: underline;
}
.panel[project-id=""] .button.delete, .panel[project-id=""] .button.finish {
  display: none;
}

footer {
  background: var(--header-bg);
  /* border-top: solid 2px var(--white); */
  display: flex;
  gap: 30px;
  transition: filter 0.3s;
  padding-inline: var(--side-padding);
  padding-bottom: 2rem;
}
footer nav {
  display: flex;
  flex: 1;
  gap: 5px;
}
footer a {
  color: #4f5664;
  display: inline-block;
  font-size: 1rem;
  padding: 1rem 0 2rem;
  text-decoration: none;
}
footer a:hover {
  color: var(--red);
}

body.panel-visible .panel {
  opacity: 1;
  pointer-events: inherit;
}
body.panel-visible > header {
  filter: blur(2px);
}
body.panel-visible main {
  filter: blur(2px);
}
body.panel-visible > footer {
  filter: blur(2px);
}

/* Login page */
form.login {
  margin: 20rem auto 0;
  max-width: 300px;
}
form.login .group label {
  color: #413847;
  display: block;
  margin-bottom: 0.2em;
}
form.login .group section {
  margin-bottom: 1em;
}
form.login .group section input[type=text] {
  background: #0d0b0e;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.4rem;
  padding: 0.8rem 1rem;
  max-width: 100%;
}
form.login .group section input[type=text]:focus {
  outline: none;
}
form.login .group section input[type=password] {
  background: #0d0b0e;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.4rem;
  padding: 0.8rem 1rem;
  max-width: 100%;
}
form.login .group section input[type=password]:focus {
  outline: none;
}
form.login input.button {
  -webkit-appearance: none;
  background: #942438;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.8rem 1rem 0.9rem;
  margin-top: 1rem;
  max-width: 100%;
  width: 100%;
}
form.login input.button:hover {
  background: #444;
}

/*# sourceMappingURL=style.css.map */