/* VARS */
:root {
    --gap: 10.2px;
}

/* SETUP */
* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
	    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
	font-family: Courier, mono-spaced;
	font-weight: normal;
	font-size: 14.5px;
	line-height: 1.1;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	color: red;
	background-color: white;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "clig";
	-webkit-font-feature-settings: "liga", "clig";
	font-feature-settings: "liga", "clig";
}

main {
    padding-top: 8px; 
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 8px;
}

.circle-filled {
  width: 5px;
  height: 5px;
  background-color: red; /* Change to match your design */
  border-radius: 50%;
  display: inline-block;
  margin: 0px 0.5px 0px 1.8px;
  vertical-align: middle;
position: relative;
  top: -1px; /* adjust as needed: -1px to -2px usually works */
}

.circle-filled-blink {
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 0.5px 0px 1.8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
	
  animation: blinkDot 1.1s infinite;
}

.circle-outline {
  width: 6px;
  height: 6px;
  border: 1px solid red;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 0px 0px 1.3px;
  vertical-align: middle;
	position: relative;
  top: -1px; /* adjust as needed: -1px to -2px usually works */

}


.circle-outline-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid red;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 0px 0px 1.3px;
  vertical-align: middle;
  top: -1px;
}

.circle-outline-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.375);
  transform-origin: center;
}

/* \ direction */
.circle-outline-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* / direction */
.circle-outline-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* \ direction */
.circle-outline-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* / direction */
.circle-outline-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.circle-outline-half-filled {
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid red;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 0px 0px 1.3px;
  vertical-align: middle;
  top: -1px;
  overflow: hidden;
}

.circle-outline-half-filled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: red;
}


.circle-outline-half-top {
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid red;
  border-radius: 50%;
  display: inline-block;
  margin: 0 0 0 1.3px;
  vertical-align: middle;
  top: -1px;
  overflow: hidden;
}

.circle-outline-half-top::before {
  content: "";
  position: absolute;
  top: 0;           /* Start at top */
  left: 0;
  width: 100%;
  height: 50%;       /* Cover top half */
  background-color: red;
}

@keyframes blinkDot {
  0%   { background-color: red; }
  49%  { background-color: red; }
  60%  { background-color: transparent; }
  99%  { background-color: transparent; }
  100% { background-color: red; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink {
  animation: blink 1s infinite;
}
span1 {
	color: red;
}

span7 {
	color: red;
	letter-spacing: 0.03rem;

}

span6 {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2.1px;
}

span15 {
	letter-spacing: 0.03rem;

}


.span28 {
font-weight: bold;
color: red;
animation: blinkingText 1.1s infinite;
vertical-align: top; /* or try: top, text-top, or custom tweaks below */
position: relative;
top: -1px; /* Fine-tune this value */
}


span29 {
	font-weight: bold;
	color: red;
}

span30 {
	font-weight: bold;
	color: #0000f5;
}

span31 {
	color: #0000f5;
}

span32 {
font-weight: bold;
color: #009900;
}

span33 {
color: #009900;
}

span34 {
color: darkred;
}

span36 {
color: #323232;
}

span35 {
	letter-spacing: 0.05rem;
}

span39 {
	color: red;
}

span40 {
color: red;
}





a {
    color: #6a6a6b;
}


a:link {
    color: red;
	background-color: none;
	text-decoration: none;}



a:visited {
  	text-decoration: none;
    color: red;
}



a:hover {
	color: grey;
	text-decoration: none;
	background-color: none;
}

input {
	display: none;
}


.text, .text_mobile {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease;
}

/* When the checkbox is checked, show the content */
input:checked ~ .text, input:checked ~ .text_mobile {
    opacity: 1;
    height: auto;
}


.toggle-label {
    cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* iOS Safari, Chrome */
    -webkit-touch-callout: none; /* Prevent context menu on long press */
}


.toggle-label::after {
    content: "Information";
    color: red;
    cursor: pointer;
	font-size: 14.5px;
}

input:checked + .toggle-label::after {
    content: "Information (x)";
}


@keyframes blinkingText {
  0% {
    color: #009900;

  }
  49% {
    color: #009900;


  }
  60% {
    color: transparent;

  }
  99% {
    color: transparent;

  }
  100% {
    color: #009900;

  }
}



/* HEADER */
.header {
    display: flex;
}

.header__left {
    margin-right: var(--gap);
    flex-shrink: 0;
}


.block {
    display: flex;
}

.left {
    margin-right: var(--gap);
}

.block_mobile {
    display: none;
}

.accordian_mobile {
    display: none;
}

.text_mobile {
    display: none;
}

@media (max-width: 575px) {
	body {
	font-family: Courier, mono-spaced;
	font-weight: normal;
	font-size: 14.5px;
	line-height: 1.1;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	color: red;
	background-color: white;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "clig";
	-webkit-font-feature-settings: "liga", "clig";
	font-feature-settings: "liga", "clig";
}

	
	
	
    /* Display the mobile version */
    .block_mobile {
        display: flex;
    }
    
    /* Only hide the desktop version on mobile */
    .block {
        display: flex; /* Keep the desktop content visible on mobile */
    }
    
    .accordian_mobile {
        display: block;
    }
    
    .accordian {
        display: none;
    }
    
    .text_mobile {
        display: block;
    }
    
    .text {
        display: none;
    }
	
	
	.text, .text_mobile {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease;
}

/* When the checkbox is checked, show the content */
input:checked ~ .text, input:checked ~ .text_mobile {
    opacity: 1;
    height: auto;
}


.toggle-label {
    cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* iOS Safari, Chrome */
    -webkit-touch-callout: none; /* Prevent context menu on long press */
}


.toggle-label::after {
    content: "Information";
    color: red;
    cursor: pointer;
		font-size: 14.5px;

}

input:checked + .toggle-label::after {
    content: "Information (x)";
}
	
	
}