@font-face {
  font-family: "Kiran Builder";
  src: url("kiranbuilder.ttf");
}

main {
  min-width: 100%;
}

#introduction {
  text-align: start;
}

/* search box with pagefind */
#search {
  max-width: 40rem;
}
#search button {
  background-color: #fff0;
}
hr {
  max-width: 40rem;
  margin: 1rem 0;
}
:root {
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff88;
  --pagefind-ui-border: pink; /* eeeeee */
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: "BogFace", sans-serif;
}

#weeknotes {
  padding-right: 2rem;
  max-width: 80rem;
}

.weeknotesinyear {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
  grid-template-areas:
    "year year year year"
    "week-01 week-14 week-27 week-40"
    "week-02 week-15 week-28 week-41"
    "week-03 week-16 week-29 week-42"
    "week-04 week-17 week-30 week-43"
    "week-05 week-18 week-31 week-44"
    "week-06 week-19 week-32 week-45"
    "week-07 week-20 week-33 week-46"
    "week-08 week-21 week-34 week-47"
    "week-09 week-22 week-35 week-48"
    "week-10 week-23 week-36 week-49"
    "week-11 week-24 week-37 week-50"
    "week-12 week-25 week-38 week-51"
    "week-13 week-26 week-39 week-52"
    "- - - week-53";
  align-items: center;
}
.year {
  grid-area: year;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.year span {
  text-align: center;
  font-family: "Kiran Builder", fantasy;
  font-size: 3em;
}

.placeholder {
  background-color: #0002;
  border-radius: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 4rem;
  z-index: -1;
}

.weeknote {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1px solid grey;
  border-radius: 0.5rem;

  width: 100%;
  height: 100%;
  max-width: 20rem;
  max-height: 6lh;

  position: relative;
  background-color: #f5abb7;

  background-size: 25px 25px;
  background-image: repeating-linear-gradient(
    -45deg,
    #9591 0,
    #9591 2px,
    #f5abb7 0,
    #f5abb7 50%
  );
  text-decoration: none;

  text-align: center;
  color: #444;
  position: relative;
}

.weeknote h4 {
  margin: 0;
  color: #000;
}

.weeknote.archived,
.weeknote.archived h4 {
  color: #b88a92;
}
.weeknote.archived::after {
  content: "(archived)";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  color: #ce6b69;
  transform: rotate(-10deg) translateY(-50%);
  font-size: 2rem;
  vertical-align: middle;
}

.tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 0.125rem;
}
.tracker.no-notes {
  grid-column: 2 / -1;
  opacity: 0.6;
  display: flex;
  justify-content: start;
  align-items: center;
}
.tracker .tag {
  padding: 0.25rem 0.25rem;
  width: 100%;
  text-align: center;
  z-index: 5;
  background-color: white;
  border-radius: 0.25rem;
  rotate: var(--r);
  border-width: 3px;
  border-style: solid;
  box-sizing: content-box;
}
.tracker .tag.thick {
  border-width: 6px;
  margin: -3px;
}
.tracker .up {
  position: absolute;
  top: calc(50% + var(--m) * -100%);
  /* border-left-width: 2px;
  border-left-style: dotted; */
  width: 2px;
  height: calc(100% * var(--m));
}
.tracker .up.thick {
  width: 4px;
  /* border-left-width: 4px; */
}

@media (max-width: 40rem) {
  #weeknotes .weeknote .links {
    display: none;
  }
  #weeknotes .weeknote .readtime {
    display: none;
  }
  .weeknote.archived::after {
    font-size: 1.5rem;
  }
}

@media (max-width: 30rem) {
  #weeknotes .weeknote .date {
    display: none;
  }
  .weeknote.archived::after {
    font-size: 1rem;
  }
}

/* external link styles */

.other-sites {
  margin: 0.5rem 0 0 0;
  max-width: 100vw;
  width: auto;
}
.other-sites h2 {
  font-size: 2rem;
  margin: 0;
}

.other-sites-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* website style */
.website {
  font-family: "Josefin Sans";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #222;
  color: white;
  text-decoration: none;
  max-width: 20rem;
  margin: 0.5rem;
}
.website:visited {
  color: white;
}
.website > * {
  width: 100%;
  text-align: center;
  margin: 0 1rem;
}
.website .title {
  background-color: #63a;
  padding: 1rem 0;
}
.website p {
  margin: 0.5rem 1rem;
  padding: 0 1rem;
}

/* blog style */
@font-face {
  font-family: "Josefin Sans";
  src: url("https://blog.alifeee.net/fonts/JosefinSans-Regular.ttf");
}
.blog-post {
  background-color: #dcd;
  font-family: "Josefin Sans", sans-serif;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  pointer-events: none;
  margin: 0.5rem 0.5rem;
  max-width: 20rem;
}
.blog-post a {
  color: #000;
  padding: 1rem;
}
.blog-post a:visited {
  color: #000;
}
.blog-post:hover {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
.blog-post .link {
  text-decoration: none;
  color: black;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: "preview-image info";
  align-items: center;
}
.blog-post .link > * {
  margin: 0 0.5rem;
}
.blog-post .link > .info {
  grid-area: info;
}
.blog-post .link > .preview-image {
  grid-area: preview-image;
  max-width: 100%;
  display: flex;
}
.blog-post .preview-image > img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  border-radius: 1em;
  margin: 0 auto;
}
.blog-post .info .title {
  margin: 0;
  font-size: 2rem;
}
.blog-post .info .date {
  margin: 0;
  margin-top: 0.5rem;
  opacity: 0.6;
  font-size: 0.8rem;
}

/* notes style */
.notes {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  background-color: white;
  color: #111;
  padding: 1rem 0.5rem;
  border: 2px dashed #f0f8;
}
.notes p {
  margin: 0;
}
.notes .n1 {
  font-size: 2rem;
  font-weight: bold;
}