/* Minimal and clean CSS with Matrix-style header and footer */
@import url("app.css");
@import url("left-line.css");

/*
    matrix green: 00ff00
*/

/* Define the site font */
@font-face{
    font-family: "IBM 3270";
    src: url("/style/fonts/IBM3270/6d2ac8672f2eb25e2d0f0b52465f00f8.woff2")format("woff2"),
        url("/style/fonts/IBM3270/6d2ac8672f2eb25e2d0f0b52465f00f8.woff")format("woff"),
        url("/style/fonts/IBM3270/6d2ac8672f2eb25e2d0f0b52465f00f8.ttf")format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/*
    Main settings for the whole page
*/
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

html {
    background-color: #000;
    color: #00ff00;
}

body {
    font-family: 'IBM 3270', monospace;
    font-size: 20px;
    line-height: 1.5;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
}

.container {
    flex: 1; /* Pushes the footer to the bottom */
    padding: 20px;
}

.debug {
    color: #ffffff;
    font-size: 65%;
    padding:10px;
    border:1px dashed #ff0000
}


/*
    Double columns container
*/
.two-column-container {
    display: flex;
    gap: 10px; /* Adds spacing between columns */
}

.left-column {
    width: 80%;
    padding: 10px;
}

.right-column {
    width: 20%;
    padding: 10px;
    border-left: 0.10px dashed #00ff00;
}


/*
    Main settings for header and footer
*/
header {
    display: flex;          /* Enables flexbox */
    justify-content: space-between; /* Pushes elements to edges */
    align-items: center;    /* Aligns items vertically */
    padding: 5px 5px;     /* Adds spacing */
    border-bottom: 0.1px solid #00ff00;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 15px; /* Spacing between items */
}

header nav ul li {
    display: inline;
}

header nav ul li a {
    color: #00ff00;
    text-decoration: none;
    font-weight: bold;
}

header nav ul li a:hover {
    text-decoration: underline;
}

footer {
    border-top: 0.1px solid #00ff00;
    font-size: 65%;
    text-align: center;
}

.error {
    border-top: 1px solid #ff0000;
    font-size: 150%;
    text-align: center;
}

/* Log-style container with even smaller font */
.about-log {
    font-size: 60%;
    padding: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}



/*
    Main settings for the text elements
*/
p {
    margin: 10px 0;
}

ul, ol {
    margin: 15px 0;
    padding-left: 20px;
}

ul li, ol li {
    margin-bottom: 10px; /* Increased spacing between list items */
}

pre, code {
    font-family: 'IBM 3270', monospace;
    background: #111;
    padding: 5px;
    border-radius: 3px;
}

a {
    color: #00ff00;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-style: solid;
}


/*
    Table
*/
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    font-size: 75%;
    border: 1px solid #00ff00;
}

th {
    font-weight: bold;
    background-color: #00ff00; /* Matrix Green */
    color: black;
}


/*
    code
*/
pre code.language-sh {
    background-color: #004700; /* very light green background */
    border-left: 4px solid #8cd98c;
    color: #ffea00;
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: "Fira Code", monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-x: auto;
}

pre code.language-json {
    background-color: #004700; /* very light green background */
    border-left: 4px solid #8cd98c;
    color: #ffea00;
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: "Fira Code", monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-x: auto;
}