html {
    background: repeating-linear-gradient(
    33deg,
    #1d1d1d,
    #1d1d1d 25px,
    #b9a025 25px,
    #b9a025 50px
    );
}

.content {
    margin-left: 3%;
    margin-right: 3%;
    background-color: #1d1d1d;
    padding-bottom: 3%;
}

h1 {
    text-align: center;
    font-family: "Terminal F4";
    font-size: 40pt;
    color: #b9a025;
}

h2 {
    text-align: center;
    font-family: "Vigofam";
    font-size: 24pt;
    font-style: italic;
    color: #b9a025;
}

h3 {
    text-align: center;
    font-family: "Vigofam";
    font-size: 16pt;
    font-style: italic;
    color: #b9a025;
}

h4 {
    font-family: "Vigofam";
    color: #b9a025;
    font-size: 32pt;
    font-variant: small-caps;
    margin-bottom: -20pt;
}

h5 {
    font-family: "Vigofam";
    color: #ffffff;
    font-size: 24pt;
    font-variant: small-caps;
}

h6 {
    font-family: "Greenos";
    color: #b9a025;
    font-size: 26pt;
    font-variant: small-caps;
    margin-bottom: -20pt;
    padding-left: 18%;
    padding-right: 18%;
    font-style: italic;
}

summary {
    background: repeating-linear-gradient(
    33deg,
    #1d1d1d88,
    #1d1d1d88 25px,
    #b9a02588 25px,
    #b9a02588 50px
    );

    padding: 10px;
    font-family: "Terminal F4";
    font-size: 24pt;
}

div[name="chapter"]{
    font-family: "MonospaceTypewriter";
    margin: 0%;
    background-color: rgba(255, 255, 255, 0.116);
    
    color: white;
    border-radius: 30px;
    box-shadow: 0 0 100px 120px inset #1d1d1d;
    padding: 10%;
    padding-bottom: 5%;
    padding-top: 5%;
}

span {
    white-space: pre-line;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted rgb(255, 255, 255); /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: rgba(0, 0, 0, 0.733);
  color: white;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

span[name="N"] {
    color: #b7b7b7;
    text-shadow: 0 0 3px rgba(126, 126, 126, 0.73);
    font-family: "LiberationSerifBold";
    font-size: 15pt;
}

span[name="Cyn"] {
    color: #dcbb16;
    text-shadow: 0 0 3px rgba(179, 196, 0, 0.73);
    font-family: "Cascadia";
    font-size: 13.5pt;
}

span[name="Tessa"] {
    color:#7e9be9;
    font-family: "GALONE";
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.459);
    font-size: 14pt;
}

span[name="J"] {
    color:#ff3838;
    text-shadow: 0 0 3px rgba(85, 25, 0, 0.644);
    font-family: "JosefinBold";
    font-size: 16pt;
}

span[name="V"] {
    color:#dd3f5a;
    font-family: "SitkaSmall";
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.829);
    font-size: 16pt;
    text-decoration: solid;
}

span[name="Uzi"] {
    color:#bd29e2;
    font-family: "BerlinSansFB";
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.73);
    font-size: 15pt;
}

span[name="mother"] {
    color:rgb(0, 0, 0);
    font-weight: bold;
    text-shadow: 0 0 3px rgb(255, 255, 255);
}

span[name="SOLVER"] {
    color:yellow;
    font-variant: small-caps;
    text-shadow: 0 0 10px black;
    font-family: "OCRA";
    font-size: 14pt;
}

div[name="text"] {
    color: white;
    text-align: left;
    font-size: 12pt;
    white-space: pre-line;
}

ul[name="navbar"] {
    font-family: "Terminal F4";
    text-align: left;
    font-size: 24pt;
    font-variant: normal;
    color: white;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    font-size: 18pt;
    text-wrap-mode: nowrap;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

li[name="navbar_item"] {
    display:inline;
    align-content: center;
    padding-right: 20px;
}

a {
    color: rgb(255, 255, 255);
    text-decoration-line: none;
}

a:hover {
    color: rgb(216, 139, 164);
}

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

@font-face {
    font-family: "Terminal F4";
    src: url("Terminal\ F4.ttf");
}

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

@font-face {
    font-family: "Greenos";
    src: url("Greenos-8MpL0.ttf");
}

@font-face {
    font-family: "OCRA";
    src: url("OCRAEXT.TTF");
}

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

@font-face {
    font-family: "JosefinBold";
    src: url("JosefinSlab-Bold.ttf");
}

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

@font-face {
    font-family: "LiberationSerifBold";
    src: url("LiberationSerif-Bold.ttf");
}

@font-face {
    font-family: "SitkaSmall";
    src: url("sitka-small-599.ttf");
}

@font-face {
    font-family: "BerlinSansFB";
    src: url("BRLNSR.TTF");
}