.line-1 {
    text-decoration: underline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid;
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: blue; /* color */
}
/* Dashed */
.line-2 {
    text-decoration: underline;
    text-decoration-thickness: 4px;/* size */
    text-decoration-style: dashed; 
    text-underline-offset: 3px; /* Moves the underline further from the text */
    text-decoration-color: brown; /* color */
}
/* Double*/
.line-3 {
    text-decoration: underline;
    text-decoration-thickness: 3px;/* size */
    text-decoration-style: double; 
    text-underline-offset:2px; /* Moves the underline further from the text */
    text-decoration-color: green; /* color */
}
/* Dotted */
.line-4 {
    text-decoration: underline;
    text-decoration-thickness: 5px;/* size */
    text-decoration-style: dotted;
    text-underline-offset: 2px; /* Moves the underline further from the text */
    text-decoration-color: orangered; /* color */
}
/* Wavy */
.line-5 {
    text-decoration: underline;
    text-decoration-thickness: 3px;/* size */
    text-decoration-style: wavy; /* 波線 */
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: deeppink; /* color */
}
/* Strikethrough */
.line-6 {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid; /* choose style */
    text-decoration-color: red; /* color */
}
/* Underline & Overline */
.line-7 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid; /* choose style */
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: black; /* color */
}
.line-8 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: dashed; /* choose style */
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: black; /* color */
}
.line-9 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 10px; /* size */
    text-decoration-style: dotted; /* choose style */
    text-underline-offset: 20px; /* Moves the underline further from the text */
    text-decoration-color: orangered; /* color */
    font-family: Henny Penny;/* Google Fonts */
    font-weight: bold;
    font-size:2rem;
    color:green;
}
.line-10 {
    border-top: 4px solid red; /* Top line */
    border-bottom: 4px solid blue; /* Bottom line */
    padding: 5px 0; /* Adds spacing between the text and the lines */
    font-family: Monoton;/* Google Fonts */
    font-size: 1.5rem;
  }






.marker1  {
    background-color: rgb(255 0 136/ .4);
}

.marker2 {
    position: relative; /* This sets the parent element as the reference point for absolute positioning of the pseudo-element (::before). */
    z-index: 0; /* Creates a stacking context for this element, ensuring its child pseudo-elements (like ::before) remain within its layer. */
}

.marker2::before {
    content: ""; /* Generates an empty pseudo-element that will act as the marker. */
    position: absolute; /* Positions the pseudo-element relative to the parent (.marker1) due to its relative positioning. */
    left: 0; /* Aligns the left edge of the pseudo-element with the left edge of the parent container. */
    right: 0; /* Aligns the right edge of the pseudo-element with the right edge of the parent container. This stretches the element horizontally. */
    bottom: 0; /* Positions the pseudo-element at the bottom of the parent container, directly under the text. */
    height: 0.4em; /* Defines the height of the pseudo-element, creating the marker effect under the text. */
    background: rgb(148 255 175 / .7); /* Sets the green background color for the marker. */
    z-index: -1; /* Places the pseudo-element behind the parent element’s content but still within the parent’s stacking context. */
}


.emphasis-1 {
    text-emphasis: filled blue; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-2 {
    text-emphasis: circle purple; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-3 {
    text-emphasis: double-circle deeppink; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-4 {
    text-emphasis: open brown; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-5 {
    text-emphasis: sesame orangered; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-6 {
    text-emphasis: triangle green; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
.emphasis-7 {
  text-emphasis: "×" rgb(67, 67, 67); /* style & color */
  font-family:IBM Plex Mono; /* Google Fonts */
}
.emphasis-8 {
    text-emphasis: "★" rgb(0, 255, 55); /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
}

.vertical {
writing-mode: vertical-rl; /* vertically align text*/
}
.emphasis-9 {
text-emphasis-position: under right; /* positions emphasis at the right*/
text-emphasis: sesame;
}
.emphasis-10 {
    background-image: radial-gradient(circle at center, blue 40%, transparent 40%); /* Adjust the percentage to control the size of the dot */
    background-position: top right; 
    background-repeat: repeat-x;
    background-size: 1rem 1rem; /* Matches one dot to one letter (approximately 1rem each) */
    padding-top: .8em; /* Adjusts the vertical positioning of the emphasis */
}