body{
    margin: 0% 15% 0% 15%;
    background-color: var(--primary-bg-color);
    font-family:FiraMonoW, monospace;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: var(--primary-text-color);
    text-align: justify;
    justify-content: flex-start;
    /* overflow-x: hidden; */
    /* position: absolute; */
    
    main {
        margin-top: 128px;    
        
    }
    /* margin-bottom: 3000px; */
}


a img{
    filter: var(--filter-bg-color);
    transition:filter 200ms ease-in-out;
    &:hover{
        /* filter: var(--filter-accent-color); */
        /* filter: brightness(0) saturate(100%) invert(67%) sepia(81%) saturate(2726%) hue-rotate(3deg) brightness(106%) contrast(108%); */
        filter: brightness(0) saturate(100%) invert(58%) sepia(25%) saturate(2621%) hue-rotate(359deg) brightness(101%) contrast(107%);
        
    }
} 

h1 {
    line-height: 1em;
}

/* Initially hide the body */
body.Hidden-On-Loading {
    visibility: hidden; /* You can also use display: none; but it affects layout calculation*/
} 

/* When the body is ready to be shown */
body.loaded {
    visibility: visible;
    transition: visibility 0.3s ease-in;
}

a {
    color: var(--accent-color1);
    text-decoration: none;
  }



textarea {
    min-height: 8em;
}
p,li {
    font-weight: 500;
}

input,textarea,select {
    font:inherit;
    width: 100%;    
    max-width:100%;
    min-width: 100%;
    margin: 0 0;
    border-radius: 0.1em;
    background-color: black;
    color: var(--primary-text-color);
    padding: 3px;
    border: 1px solid var(--primary-text-color);
    vertical-align: middle;
    outline: none;
}

.FLimage {
    /* Aligns the image to the left */
    float: right; 
    /* Adds space between the image and the text */
    margin-left: 2em; 
    /* width: 32%; */
    height: auto;
}
.centered-image {
    text-align: center;
    max-width:100%;
}
.centered-image img {
    max-width:100%;
}


.vector_image {
    /* float: inherit;  */
    filter: var(--filter-bg-color);
    /* max-width:10%; */
    /* display: block;  */
    /* margin: 0% 15% 0% 15%; */
    /* text-align: center; */
    max-width: 100%;
    display: flex; justify-content: center; align-items: center;    
} 
.vector_image img {
  max-width: 100%;            /* scale image to fit parent width */
  height: auto;               /* keep aspect ratio */
}

.image{
    display: block;
    max-width:70%;
    height: auto;
} 

/* Each .doc-diagrm increments the counter */
.doc-diagrm {
  counter-increment: doc-diagrm;
  /* margin: 2rem 0; */
}
.doc-table {
  counter-increment: doc-table;
  /* margin: 2rem 0; */
}
.doc-image {
  counter-increment: doc-image;
  /* margin: 2rem 0; */
}

.doc-figure {
  counter-increment: doc-figure;
  /* margin: 2rem 0; */
}

/* Prepend auto-number to the caption text */
.doc-diagrm em::before {
  content: "Diagram " counter(doc-diagrm) ": ";
  font-weight: 600;
}
.doc-table em::before {
  content: "Table " counter(doc-table) ": ";
  font-weight: 600;
}
.doc-image em::before {
  content: "Image " counter(doc-image) ": ";
  font-weight: 600;
}
.doc-figure em::before {
  content: "Figure " counter(doc-figure) ": ";
  font-weight: 600;
}

hr.dotted{
    
    border: none;
    border-bottom:1px dashed;
    color: var(--primary-text-color);
    /* border-top: 1px dashed #FF5733; Set dashed style and color */
    margin: 20px 0; /* Adjust space around the line */
}
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin: 0 auto;
}

.styled-table th,
.styled-table td {
  border: 1px solid var(--primary-text-color);
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.5rem;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* .table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin: 0 auto;
}

.styled-table th,
.styled-table td {
  border: 1px solid var(--primary-text-color);
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0.5rem;
} */

.video-container {
    display: flex;
    justify-content: center;   /* center horizontally */
    margin-top: 20px;
}
.video-frame {
    border: 5px solid var(--primary-text-color);   /* green frame */
    border-radius: 8px;        /* optional rounded corners */
    overflow: hidden;          /* keeps border neat */
}

.container {
    display: flex;       /* Enables flexbox layout */
    flex-wrap: wrap;     /* Allows wrapping to the next row */
    gap: 20px;           /* Adds spacing between rectangles */
    justify-content: center; /* Centers rectangles horizontally */
}
.rectangle {
    /* Rectangle border */
    border: 1px;
    border-style:solid;
    box-shadow: 4px 4px;
    padding: 10px;            /* Padding inside the rectangle */
    width: 60px;               /* Ensures two rectangles fit in one row */
    height: 60px;
    /* Light background color */
    /* background-color: #f9f9f9;  */
    text-align: center;       /* Centers the content inside */
    align-items: center;
    justify-content: center;
    .img{
        min-width: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

.preview_rectangle {
    /* Rectangle border */
    border: 1px;
    border-style:solid;
    box-shadow: 4px 4px;
    padding: 10px;            /* Padding inside the rectangle */
    width: 128px;               /* Ensures two rectangles fit in one row */
    height: 128px;
    /* Light background color */
    /* background-color: #f9f9f9;  */
    text-align: center;       /* Centers the content inside */
    align-items: center;
    justify-content: center;
    .img{
        min-width: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

/* Code block formatting */
pre {
    border-radius: 16px;
    /* height: 100vh; */
    
    /* width: 65vw; */
    overflow-x: auto;
    
}

/* Start counting from -1 so second line becomes "1" */
pre[class*="language-"].line-numbers {
    /* position:absolute; */
    /* margin-top: 8em; */
    /* padding-left: -5em; */
    counter-reset: linenumber -1;
}


/* Hide the first line number */
.line-numbers-rows > span:first-child:before {
    content: "";
    display: block;
    padding-right: 0.8em;
    text-align: right;
    /* Maintain vertical spacing */
    line-height: inherit;
    height: 1.5em; /* Match code line height */



}


pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: inherit;
    height:inherit
}


.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -6.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}


.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ */
input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        border: 1px solid var(--textbox-fg-color);
        -webkit-text-fill-color: var(--textbox-fg-color);
        -webkit-box-shadow: 0 0 0px 1000px var(--textbox-bg-color) inset;
        transition: background-color 5000s ease-in-out 0s;
    } 

.button{
    background:var(--button-bg-color);
    color:var(--button-fg-color);
    margin:5px 0 ;
    padding: 0.5em;
    width: 100%-2em; display: block;
    border: 1px solid var(--button-fg-color);
    border-radius: 0.1em;
    text-align: center;
    font-style: bold;
    text-decoration: none;
    /* font-size: 2em; */
    /* font-style:normal; */
    &:hover{
        /* border: 1px solid var(--accent-color3);  */
        
        color: var(--accent-color1);
        /* text-decoration:underline; */
    }      
    &:focus {
        outline: none;
    }    
}
button:focus {
    outline: none;
}