@font-face {
    font-family: "AcPlus ToshibaSat 8x14";
    src: url("../fonts/AcPlus_ToshibaSat_8x14.woff") format("woff"),
         url("../fonts/AcPlus_ToshibaSat_8x14.woff2") format("woff2"),
         url("../fonts/AcPlus_ToshibaSat_8x14.ttf") format("truetype");
}

:root {
    --font-color: #aaaaaa;
    --background-color: #19161C;  /* Corrected variable name typo */
    --golden-ratio: 1.618;
    --base-unit: 1em; /* Base unit for scaling elements in relation to the golden ratio */
}

body {
    padding: 1.5em;
    font-family: "AcPlus ToshibaSat 8x14", "Courier New", Courier, monospace;
    background-color: var(--background-color); /* Corrected variable name typo */
    color: var(--font-color);
    font-size: calc(var(--base-unit) * 1.2); 
    line-height: calc(var(--base-unit) * var(--golden-ratio));
    max-width: calc(560px * var(--golden-ratio));
    margin: auto;
    word-wrap: break-word;
}

.add-prefix::before {
    content: "> ";
}

/* Combined repeating styles */
.text-wrap, p, h1, h2, h3, a, span, div, article header {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

article header h3 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

section p {
margin: 1em 0 1em 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

header, h1, h2, h3 {
    text-align: left;
    color: var(--font-color);
    text-transform: uppercase;
}

.logo {
    display: block;
    max-width: calc(100px * var(--golden-ratio));
    height: auto;
    margin: 0 auto;
    padding: calc(var(--base-unit) * 0.5);
}

nav, aside {
    border-bottom: 2px solid var(--font-color);
}

nav a::after {
    content: " /";
}

.navigation-style, nav ul, ul, aside ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    text-transform: uppercase;
}

nav li, aside li {
    display: inline-block;
}

aside li::before {
    content: "-";
    margin-right: 6px;
    display: inline-block;
}

aside {
    max-height: 400px;  /* Set a suitable max-height */
    overflow-y: auto;   /* Enables vertical scrolling */
    padding-right: 10px; /* Optional: Adds space inside the scrollbar */
}

aside li {
    display:block;
}

.link-style, aside a:link, aside a:visited, a:link, a:visited {
    color: var(--font-color);
    text-decoration: none;
}

.link-interaction, aside a:hover, aside a:focus, nav a:hover, nav a:focus, .backarrow:hover, .backarrow:focus, section a:hover, section a:focus {
    color: var(--background-color);
    background-color: #f0f0f0;
    padding: 3px;
}

.icons-container {
    display: flex;
    align-items: flex-start;
    justify-content: left;
}

.icons {
    display: inline-block;
    width: 77px;
    height: auto;
    padding: 0;
    margin: 0;
}

em, blockquote {
    color: aliceblue;
}

article img {
    display: block;
    max-width: 90%;
    height: auto;
    margin: calc(var(--base-unit) * var(--golden-ratio) / 2) auto;
}

section img {
    display: block;
    max-width: 90%;
    height: auto;
    margin: calc(var(--base-unit) * var(--golden-ratio) / 2) auto;
}

section a:not(:has(> img)):hover, section a:not(:has(> img)):focus {
    color: var(--background-color);
    background-color: #f0f0f0;
    padding: 3px;
}

section a:hover > img, section a:focus > img {
    color: inherit;
    background-color: inherit;
}

section a:hover, section a:focus {
    background-color: transparent;
    padding: 0;
}

.top-border, footer {
    text-align: left;
    border-top: 2px solid var(--font-color);
}

.bottom-border {
    border-bottom: 2px solid var(--font-color);
}

.hide-border {
    border: none;
}

hr {
    border: 1px solid var(--font-color);
}

@media (max-width: 768px) {
    nav li {
        display: inline;
        width: 100%;
        text-align: left;
        margin-bottom: calc(var(--base-unit) * var(--golden-ratio));
    }

    body {
        padding: calc(var(--base-unit) * 0.8);
        font-size: calc(var(--base-unit) * 1.2);
        max-width: 100%;
        margin: 0 auto;
    }
    footer {
        font-size:90%;
    }
}