@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400&display=swap');

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #B7EDC2;
  color: #FFFFFF;
}

.page {
  height: 100vh;
  width: 100%;
  padding: 1.2rem 2rem;
}

.text-shell {
  max-width: 900px;
  width: 100%;

  margin-top: 10vh;

  text-align: left;
}

.site-title {
  display: none;
}

#textBlock {
  white-space: pre-wrap;
  word-break: keep-all;
  color: #FFFFFF;
}

/* header */

.fixed-header {
  font-family:
    "Nanum Gothic",
    sans-serif;

  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.01em;

  margin-bottom: 0.45rem;

  color: #DED1D1;
  opacity: 1;
}

/* block counter */

.block-counter {
  font-family:
    "Apple SD Gothic Neo",
    "Pretendard",
    "Noto Sans KR",
    sans-serif;

  font-size: 0.65rem;
  line-height: 1;

  margin-bottom: 0.8rem;

  color: #DED1D1;
  opacity: 0.8;

  transition: color 0.15s ease;
}

.block-counter:hover {
  color: #B81F1F;
}

/* text */

.random-content {
  font-family:
    "Apple SD Gothic Neo",
    "Pretendard",
    "Noto Sans KR",
    sans-serif;

  font-size: 0.82rem;
  line-height: normal;

  color: #FFFFFF;
}

/* text hover*/

.hover-word {
  transition: color 0.15s ease;
}

.hover-word.hover-active {
  color: #B81F1F;
}

/* blood buttons */

.button-area {
  position: fixed;

  top: 8px;
  left: 8px;

  display: flex;
  gap: 6px;

  z-index: 100;
}

/* reading buttons */

.reading-buttons {
  position: fixed;

  left: 2rem;
  top: 77vh;

  display: flex;
  gap: 6px;

  z-index: 100;
}

/* all button style */

#randomTextButton,
#nextTextButton,
#moveBloodButton,
#toggleBloodButton {
  font-family:
    "Apple SD Gothic Neo",
    "Pretendard",
    "Noto Sans KR",
    sans-serif;

  font-size: 11px;

  cursor: default;
}

/* blood.gif*/

#bloodGif {
  position: fixed;

  width: 64px;
  height: 64px;

  z-index: 1;

  pointer-events: none;
  image-rendering: pixelated;
}