/* user styles */

/* styles are what change the color and sizes of stuff on your site. */

/* these are variables that are being used in the code
these tended to confuse some people, so I only kept 
the images as variables */

:root {
    --header-image: url('../images/main_page/dithered_image.png');
    --body-bg-image: url('../images/main_page/backgrond2.jpg');

    /* colors */
    --content: #1a1a1a;
}

#topBar {
  background-image: url('../images/main_page/topbar.png');
  background-repeat: no-repeat;
  background-position: center center;
  /* scale the image so its height fits the bar */
  background-size: auto 100%;
}
/* FONT FAMILIES */
/* Each font family has multiple weights and styles available
To use a font on an element, add: font-family: 'FontName', sans-serif;
To use bold, add: font-weight: bold; or font-weight: 700;
To use italic, add: font-style: italic; */

/* Roboto - Clean, modern sans-serif (great for body text) */
@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/static/Roboto-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/static/Roboto-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/static/Roboto-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto/static/Roboto-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

/* Roboto Condensed - Compact version (good for headings) */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/Roboto_Condensed/static/RobotoCondensed-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf');
    font-weight: 300;
}

/* Share Tech Mono - Monospace font (great for code blocks) */
@font-face {
    font-family: 'Share Tech Mono';
    src: url('../fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf');
    font-weight: 400;
}

/* Unbounded - Bold, distinctive display font (good for page titles) */
@font-face {
    font-family: Unbounded;
    src: url('../fonts/Unbounded/static/Unbounded-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Unbounded;
    src: url('../fonts/Unbounded/static/Unbounded-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: Unbounded;
    src: url('../fonts/Unbounded/static/Unbounded-Light.ttf');
    font-weight: 300;
}

/* HOW TO USE FONTS:
   
   1. Add font-family to any element:
      body { font-family: Roboto, sans-serif; }
   
   2. Change weight with font-weight:
      font-weight: 300;  (Light)
      font-weight: 400;  (Regular - default)
      font-weight: 700;  (Bold)
   
   3. Use italic (Roboto only):
      font-style: italic;
   
   FONT EXAMPLES:
   
   - Body text: font-family: Roboto, sans-serif;
   - Headings: font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
   - Page title: font-family: Unbounded, sans-serif; font-weight: 700;
   - Code: font-family: 'Share Tech Mono', monospace;
   
   FULL EXAMPLE:
   
   h1 {
       font-family: Unbounded, sans-serif;
       font-weight: 700;
       font-size: 32px;
   }
   
   p {
       font-family: Roboto, sans-serif;
       font-weight: 400;
   }
   
   strong {
       font-weight: 700;
   }
   
   em {
       font-style: italic;
   }
*/

/*Font Usage Guide
Basic Usage: Add font-family: 'FontName', sans-serif; to any CSS selector.

Available Fonts:
Roboto - Clean, modern sans-serif

Best for: body text, general content
Example: body { font-family: Roboto, sans-serif; }
Roboto Condensed - Compact version

Best for: headings, titles (saves horizontal space)
Example: h1 { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
Share Tech Mono - Monospace font

Best for: code blocks, technical content
Example: code { font-family: 'Share Tech Mono', monospace; }
Unbounded - Bold, distinctive display font

Best for: page titles, attention-grabbing elements
Example: h1 { font-family: Unbounded, sans-serif; font-weight: 700; }
Font Weights Available:
font-weight: 300; = Light
font-weight: 400; = Regular (default)
font-weight: 700; = Bold
font-style: italic; = Italic styles (Roboto only)
Replace the font-family: '5by5', sans-serif; in your body rule with your preferred font!
*/

body {
    font-family: Roboto, sans-serif;
    margin: 0;
    background-color: #0d0d0d;
    /* you can delete the line below if you'd prefer to not use an image */
    /* use one full-size image instead of tiling */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* optional: make background fixed so content scrolls over it */
    background-attachment: fixed;
    color: #fddc34;
    background-image: var(--body-bg-image);
}

/* Ensure page background covers the viewport height */
html, body { min-height: 100%; }

/* Global typography rules */
h1, h2, h3 {
    font-family: Unbounded, sans-serif;
    font-weight: 700;
}

/* Navbar links should use Unbounded for a consistent header style */
#navbar li a {
    font-family: Unbounded, sans-serif;
}

/* When viewing an individual project page, hide the site navbar
   and use a highlighted accent color for the back link. */
body.project-page #headerArea,
body.project-page #navbar {
    display: none;
}

/* Back link styling on project pages */
body.project-page a.back-link {
    color: #fde68a;
    font-weight: 800;
    text-decoration: none;
}
body.project-page a.back-link:hover { text-decoration: underline; color: #fff3b0; }

/* Guestbook / mono sections */
.guestbook {
    font-family: 'Share Tech Mono', monospace;
}

/* Blog pages: when an HTML page sets <body class="blog">,
   use Share Tech Mono for the main textual content so blog posts
   have a consistent monospace look. Headings remain Unbounded. */
body.blog,
body.blog main,
body.blog article,
body.blog p,
body.blog li,
body.blog a {
    font-family: 'Share Tech Mono', monospace;
}

/* Projects TOC (collapsible/popout) */
.toc-popout {
    margin-bottom: 12px;
}
.toc-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid #fddc34;
    color: #fddc34;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 700;
}
.toc-toggle:focus { outline: 2px solid #fde68a; }
.toc-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
    border-left: 1px solid rgba(255,255,255,0.03);
    padding-left: 10px;
    margin-top: 6px;
}
.toc-popout.open .toc-list {
    max-height: 500px; /* enough to show list items */
}
.toc-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc-list li {
    margin: 6px 0;
}
.toc-list a {
    color: #fddc34;
    text-decoration: none;
}
.toc-list a:hover { text-decoration: underline; color: #fde68a; }

* {
    box-sizing: border-box;
}

/* below this line is CSS for the layout */

/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */


/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#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 */
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
    color: #fddc34;
    font-weight: bold;
    /* if you want to remove the underline
  you can add a line below here that says:
  text-decoration:none; */
}

#header {
    width: 100%;
    background-color: transparent;
    /* header color here! */
    height: 150px;
    min-height: 150px;
    display: block;
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
  you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
}

/* navigation section!! */
#navbar {
    height: 40px;
    background-color: #0d0d0d;
    /* navbar color */
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: #fddc34;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #fde68a;
    text-decoration: underline;
}

#flex {
    display: flex;
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    background-color: #1a1a1a;
    width: 200px;
    padding: 20px;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}


/* this is the color of the main content area,
between the sidebars! */
main {
    background-color: #262626;
    flex: 1;
    padding: 20px;
    order: 2;
}

/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

footer {
    background-color: #0d0d0d;
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
}

h1,
h2,
h3 {
    color: #fddc34;
}

h1 {
    font-size: 25px;
}

strong {
    /* this styles bold text */
    color: #fddc34;
}

/* this is just a cool box, it's the darker colored one */
.box {
    background-color: #0d0d0d;
    border: 1px solid #fddc34;
    padding: 10px;
}

/* CSS for extras */

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #0d0d0d;
    /* Match blog topBar style site-wide: monospace accent header */
    font-family: 'Share Tech Mono', monospace;
}


/* 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 subtrack 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!
  since 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;
    }
}

/* On wide/landscape viewports, show the bottom of the header image */
@media (min-aspect-ratio: 16/9) {
    #header {
        background-position: center center;
    }
}

/* On very tall/portrait viewports, show the full header image (no crop) */
@media (max-aspect-ratio: 9/16) {
    #header {
        background-size: contain;
        background-position: center center;
    }
}