body {
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800 !important;
}

strong {
  font-weight: 700;
}

header.hero {
  background-image: url("/assets/myartwork_web.svg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
}

header.hero h1 {
  font-family: "Cardo", serif;
  font-size: 8vh;
  font-weight: 800;
  text-shadow: 0 0 15px #bebebe;
}

header.hero h2 {
  font-family: serif;
  font-size: 6vh;
  font-weight: 800;
  text-shadow: 0 0 15px #bebebe;
}

#MyIcon {
  max-width: 15vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#MyIcon img {
  border-radius: 5%;
  box-shadow: 0 0 15px #bebebe;
}

#initial .box {
  max-width: 94vw;
  /* background: linear-gradient(to right, #00b4db, #0084b0); */
  background: linear-gradient(to right,
      rgba(0, 180, 219, 0.9),
      rgba(0, 132, 176, 0.9));
  color: white;
}

/* Enwhite strong which was somehow black by default */
#initial strong {
  color: white;
}

/* Social icons */
#social i.lab {
  font-size: 32px;
  color: white;
  padding: 0 0.3ex;
}

#social i:not(#at):hover {
  transition: 0.3s;
  color: black;
}

/* Fading loop animation for down allow */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

#down i.las {
  font-size: 32px;
  color: white;
  animation: fadeIn 0.8s infinite alternate;
}

/* Shrink vertical spaces between sections */
.section:first-of-type {
  padding-bottom: 1rem;
}

.section:not(:first-of-type):not(:last-of-type) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.section:last-of-type {
  padding-top: 1rem;
}

/* Decorate headers per section */
.section h3 {
  border-bottom: 4px solid lightseagreen;
}

#projects {
  border: 4px solid transparent;
  box-sizing: border-box;
  transition: border-color 100ms ease-in-out;
}

#projects:hover {
  border-color: lightseagreen;
}

#employment small {
  font-weight: 700;
}

/* Make p closer to h4 in personal histories */
#education h4,
#employment h4 {
  margin-bottom: 0.25rem;
}

/* Make dt bolder and colourful */
.section dt {
  font-weight: 800;
  color: lightseagreen;
}

/* Delete the vertical space on top of direct-child ul under dd */
.section dd>ul {
  margin-top: 0;
  margin-left: 1rem;
}

/* Replace bullet with a CSS-only pin icon for a specific news item */
#news ul li.is-pinned {
  list-style: none;
  position: relative;
}

#news ul li.is-pinned::before {
  content: "📌";
  /* emoji fallback for broad support */
  position: absolute;
  /* align inside bullet gutter on older browsers */
  left: -1.15em;
  top: 0.1em;
  margin: 0;
  color: #f14668;
  /* Bulma danger color */
}

/* Alignment fix: prefer ::marker so the pin sits exactly where bullets do */
@supports selector(li::marker) {
  #news ul li.is-pinned {
    list-style: disc;
    /* keep a marker box so alignment matches siblings */
    position: static;
  }

  #news ul li.is-pinned::before {
    content: none;
    display: none;
  }

  #news ul li.is-pinned::marker {
    content: "📌  ";
    color: #f14668;
    /* Bulma danger */
    font-size: 0.95em;
    /* visually close to default bullet size */
  }
}

/* --- NEW badge marker (aligned like bullet) --- */
#news ul li.is-new {
  list-style: disc;
}

/* Modern browsers */
@supports selector(li::marker) {
  #news ul li.is-new::marker {
    content: "🆕  ";
    color: #3273dc;
    /* Bulma primary */
  }
}

/* Fallback */
@supports not selector(li::marker) {
  #news ul li.is-new {
    list-style: none;
    position: relative;
  }

  #news ul li.is-new::before {
    content: "🆕";
    position: absolute;
    left: -1.15em;
    top: 0.1em;
    color: #3273dc;
  }
}