@font-face{
    font-family: "VCR OSD Mono";
    src: url("/fonts/vcr-osd-mono.ttf");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: "ProggyClean";
    src: url('/fonts/ProggyCleanCENerdFont-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Monofur";
    src: url('/fonts/MonofurNerdFontMono-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FantasqueSans";
    src: url('/fonts/FantasqueSansMNerdFont-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

.tiny5-regular {
    font-family: "Tiny5", sans-serif;
    font-style: normal;
}



/*    font credit
 *    www.OnlineWebFonts.Com
 *    You must credit the author Copy this link on your web
 *    <div>Font made from <a href="http://www.onlinewebfonts.com/fonts">Web Fonts</a>is licensed by CC BY 4.0</div>
 *    OR
 *    <a href="http://www.onlinewebfonts.com/fonts">Web Fonts</a>
 *
 *    CSS rules to specify fonts
 *
 *    font-family: "VCR OSD Mono";;
 */



:root {
    /*--header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');*/
    --body-bg-image: url('/images/backgrounds/star-background.webp');

    /* colors */
    --content: #43256E;
    --light-gray: #000;
    --gray: #000;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #0028FF;
    --darker-blue: #FF62C9;
    --lighter-blue: #30F6FF;
    --even-lighter-blue: transarent;
    --lightest-blue: transparent;
    --red: #FF5151;
    --dark-orange: #FFEF69;
    --light-orange: #ff1a1a;
    --even-lighter-orange: #09ff52;
    --strange-yellow: #dbae2e;
    --stranger-yellow: #ff9900;
    --burnt-pikachu: #333300;
    --geodude: #666633;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #00b63d;
    --lemon-cake: #ffff99;
    --slate-black: #1f1f2d;
    --coal-black: #0d0d0d;
    --miku-teardrop: #66ccff;
    --miku-circuit: #1affff;
    --aqua: #0066cc;
    --marker-green-clr: #a9ff4d;
    --marker-green-bg: rgba(255, 255, 153, 0.65);
    --user: #AAD94C;
    --root: #F26D78;
    --normal: #b3b1ad;
    --arg: #FFB454;
    --string: #39BAE6;
    --target: #FF8F40;
    --comment: #636A72;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}



body {
    margin: 0;
    background-color: var(--slate-black);
    background-image: var(--body-bg-image);
    background-size: 420px;
    color: var(--green);
    font-family: "Monofur";
    font-size: large;
}

code {
    background-color: var(--slate-black);
    font-family: "FantasqueSans";
    color: var(--normal);
}

.root::before {
    content: "# ";
    color: var(--root);
}

.user::before {
    content: "$ ";
    color: var(--user);
}

.arg {
    color: var(--arg);
}

.string {
    color: var(--string);
}

.comment {
    color: var(--comment);
}

/* the following section is for the CRT scanlines
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 10%);
    z-index: 2;
    background-size: 120% 3px, 4px 100%;
    pointer-events: none;
} */


* { /*box-sizing*/
    box-sizing: border-box;
}



#container {
max-width: 900px;
/* this is the width of your layout!
 * if you change the above value, scroll to the bottom
 * and change the media query according to the comment!
 */
margin: 0 auto;
/* this centers the entire page */
}



/*#container a {
 *    color: #ED64F5;
 *    font-weight: bold;
 * if you want to remove the underline
 * you can add a line below here that says:
 *    text-decoration:none;
 * }*/



a:link {
    color: var(--miku-circuit);
    text-decoration: none;
}
a:visited {
    color: var(--miku-circuit);
    text-decoration: none;
}
a:hover {
    color: var(--miku-teardrop);
    text-decoration: none;
}
a:active {
    color: var(--miku-teardrop);
    text-decoration: none;
}

#top-header {
width: 100%;
height: 20px;
color: var(--miku-circuit);
border: 1px solid var(--miku-teardrop);
/* background-size: 100%; */
/* background-image: url("/images/top-header.webp"); */
background-color: var(--slate-black);
margin-bottom: 5px;
word-spacing: 1500%;
text-align: center;
font-family: "VCR OSD Mono";
font-size: smaller;
}

#header {
width: 100%;
height: 150px;
color: var(--miku-circuit);
color: var(--miku-circuit);
border: 1px solid var(--miku-teardrop);
/* background-size: 100%; */
/* background-image: url("/images/top-header.webp"); */
background-color: var(--slate-black);
font-size: 500%;
text-align: center;
padding-top: 40px;
font-family: "VCR OSD Mono";
}


#navbar {
height: 40px;
width: 100%;
color: var(--miku-circuit);
border: 1px solid var(--miku-teardrop);
/* background-size: 100%; */
/* background-image: url("/images/top-header.webp"); */
background-color: var(--slate-black);
margin-bottom: 10px;
font-family: "VCR OSD Mono", "Tiny5", "Ubuntu";
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
#navbar li a {
color: #ffffff;
font-weight: 800;
text-decoration: none;
}
#navbar li a:hover {
color: var(--lemon-cake);
text-decoration: underline;
}

#current {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}


@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00, 0 0 70px #00ff00;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #99ff33, 0 0 40px #99ff33, 0 0 50px #99ff33, 0 0 60px #99ff33, 0 0 70px #99ff33, 0 0 80px #99ff33;
    }
}


#flex {
display: flex;
}




aside { /* this colors BOTH sidebars; if you want to style them separately, comment out #leftSidebar and #rightSidebar */
    background-color: var(--geodude);
    width: 200px;
    padding: 14px;
    font-size: smaller; /* this makes the sidebar text slightly smaller */
}

#leftSidebar {
    background-color: var(--slate-black);
    border: 1px solid var(--miku-teardrop);
    width: 250px;
    padding: 14px;
    font-size: smaller; /* this makes the sidebar text slightly smaller */
    margin-right: 10px;
}

#rightSidebar {
    background-color: var(--slate-black);
    border: 1px solid var(--miku-teardrop);
    width: 240px;
    padding: 16px;
    font-size: smaller; /* this makes the sidebar text slightly smaller */
    margin-left: 10px;
}



main { /* this is the color of the main content area, between the sidebars! */
    background-color: var(--slate-black);
    border: 1px solid var(--miku-teardrop);
    flex: 1;
    padding: 20px;
    order: 2;
    line-height: 27px;
}



#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}

/* section {
} */

footer {
    background-color: var(--slate-black);
    border: 1px solid var(--miku-teardrop);
    width: 100%;
    /*  height: 40px;  */
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    font-size: small;
}



h1 {
    color: var(--green);
    line-height: 110%;
}



mark {
    color: var(--marker-green-clr);
    background-color: var(--marker-green-bg);
}

blockquote {
    padding-left: 20px;
    border-left: 2px solid var(--green);
}

q {
    font-style: italic;
    quotes: "“" "”" "‘" "’";
}

/* hr {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
} */

ul {
    list-style-type: "> ";
}

.center-small {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.center_max {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}


.box {
    background-color: var(--coal-black);
    border: 1px solid var(--lighter-blue);
    padding: 10px;
    margin-bottom: 20px;
}

.bbox {
        padding-bottom: 16px;
        padding-top: 16px;
}

.buttonl {
    padding-right: 22px;
}

/* legacy Ubuntu pop-ups
.ddt {
    width: 198px;
    height: 17px;
    background-image: url(/images/ddts/titlebar.png);
}


.ddtx {
    margin-left: 7px;
    margin-top: 3px;
}

.ddb {
    width: 198px;
    height: 92px;
}

.ddbb {
    margin-left: 137px;
    margin-top: 63px;
}
*/

.log {
    background-color: var(--slate-black);
    border: 1px solid var(--miku-teardrop);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.snav {
    padding-left: 10px;
}


#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: var(--slate-black);
}



/* BELOW THIS POINT IS MEDIA QUERY
 * so you wanna change the width of your page?
 * by default, the container width is 900px.
 * in order to keep things responsive, take your new height,
 * and then subtract it by 100. use this new number as the
 * "max-width" value below
 */

@media only screen and (max-width: 800px) {
    #flex {
    flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
     *    s ince the sidebars would be too small on a mobile device.                   *
     *    feel free to play around with the order!
     */
    main {
        order: 1;
    }

    #leftSidebar {
    order: 2;
    }

    #rightSidebar {
    order: 3;
    }

    #navbar ul {
    flex-wrap: wrap;
    }
}