/*@font-face {
    font-family: "HomeMarker";
    src: url("宅在家麥克筆20251116.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
  }*/

@import url("https://fonts.googleapis.com/css2?family=Huninn&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

:root,
::before,
::after {
  --theme-color: #007bff;
  color: var(--theme-color);
  /*font-family: "HomeMarker", Helvetica, sans-serif;*/
  font-size: 24px;
  font-family: "IBM Plex Mono", "Huninn", monospace;
  font-weight: 500;
}

h1,
h2,
h3,
span,
.grain-text{
  filter: url(#grain_text);
}

h1,
h2,
h3{
  font-weight: 300;
}

a,
a:visited {
  color: var(--theme-color);
}

h1 {
  padding: 20px;
}

.button {
  cursor: pointer;
  border-radius: 100px;
  --box_border-radius: 100px;
  padding: 24px 48px;
  display: inline;
  text-decoration: none; /* removes the default blue underline */
  color: inherit; /* keeps the text color the same as before */
  outline: none;
}

.button:hover {
  --box_background: var(--theme-color);
  color: white;
}

.grainy-box {
  position: relative;
}

.grainy-box::before {
  position: absolute;
  filter: url(#grain);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--box_border-radius, 4px);
  border: var(--box_border, 5px) solid var(--theme-color);
  background: var(--box_background);
  content: " ";
  z-index: -1;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 64px auto;
  padding: 32px;

  box-sizing: border-box;
  text-align: center;

  gap: 32px;

  width: 100vmin;
}

body {
  width: 100vw;
  margin: 0;
}

#char {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 250px;
    height: auto;
    image-rendering: pixelated;
  }

  .bubble {
    /*width: 500px;*/
    margin-bottom: -30px;
    padding: 32px 60px;
    text-align: center;
    box-sizing: border-box;

    &::before {
      border-radius: 24px;
    }
  }
}

.links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.hr {
  max-height: 150px;
  width: 100%;
  image-rendering: pixelated;
}

img.main {
  width: 100vmin;
}

.title-image {
  max-width: 100vmin;
  max-height: 300px;
}

.title-image-small {
  max-width: 100vmin;
  max-height: 250px;
}

.split-image {
  height: 50vmin;
}

.footer-image {
  width: 20vmax;
}

.license {
  font-size: 16px;
}

.menu-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;

  .menu-link {
    height: 150px;
  }
}

.year-block{
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: left;
  font-weight: 500;
  font-size: min(20px, 3vw);

  .month-line{
    display: flex;
    flex-direction: row;
    gap: 16px;

    .day-line{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    }

    .not-recorded-day{
      opacity: 0.15;
    }

    a{
    text-decoration: none;
    }

}