/* a CSS stylesheet sets the basic style of your site--whatever will stay the same across all pages, like font type, header image, link colors, background image, that kind of thing. This means you don't have to define that stuff for every single page on your site. This file is modified from sadgrl.online, who has lots of layout resources that I recommend!! */

            :root {
                --header-image: url('https://lastghast.com/neocities-headerghast.png');
                --background-image: url('https://lastghast.com/repeating-skulls.png');
                --header-imagenotxt: url('https://lastghast.com/neocities-headerghast.png');
                /* these are variables; this way you don't have to change the url of your image everywhere in the sheet, just here. You can create more variables with different names, for example of you want to have a different header image show up on smaller screens. more in the media query at the bottom! */
                /* use color-hex.org to find the hex number of any color you want. this one defines the default color of content unless otherwise specified*/
                --content: #cf3c3c;
            } /* closes root block of code */

          

            body {
                font-family: 'Helvetica', sans-serif;
                margin: 0;
                background-color: #000000;
                background-size: 125px;
                color: #ffffff;
                background-image: var(--background-image);
                background-size: 20%;
            } /* anything called 'body' in any other HTML file that references this sheet will inherit these properties. */

            * {
                box-sizing: border-box;
            } /* causes any box defined in the layout to take padding into account, helps keep things consistent. */

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

            /* 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 */
            } /* now any div named 'container' in a page that references this sheet will inherit these properties */

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

            #header {
                max-width: 100%;
                background-color: #000000;
                /* header color here! */
                height: 150px;
                /* this calls your header image as specified up at the top */
                background-image: var(--header-image);
                background-size: 100%;
                background-repeat: no-repeat;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #000000;
                /* navbar color */
                width: 100%;
            }
          
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            } /* in your HTML pages, the ul (unordered list) tags in your header will inherit these properties */

            #navbar li {
                padding-top: 10px;
            } /* same as above, but for li, list items */

            /* navigation links*/
            #navbar li a {
                color: #cf3c3c;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }
            
            hr.double {
                border-top: 3px double;
                border-bottom: none;
            }

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

            #flex {
                display: flex;
                max-width: 100%;
                /* max-width causes an element with the id="flex" to scale down according to screen size if smaller than 100% */
            }
            
            /* this snippet will be used in the Gallery template to format a table so that there will be a horizontal scroll bar if the row exceeds the window width. */
            #flex-table {
	              display: flex;
	              justify-content: space-evenly;
	              flex-wrap: wrap;
	              margin-left: auto;
              	margin-right: auto;
              	overflow-x: auto;
            }

            /* causes images inside the flex-table to resize down with window size. */
            #flex-table img {
                max-width: 100%;
            }
        
            /* the three sections below set up a grid for a responsive image gallery that will move move columns as the window is resized. */
            .gallery {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                padding: 0 4px;
                margin-left: auto;
              	margin-right: auto;
              	justify-content: space-evenly;
            }
            
            /* Creates five equal columns (100/20 = 5) that sit next to each other. change the two percentages next to flex and max-width according to taste */
            .column {
                flex: 20%;
                max-width: 20%;
                padding: 0 4px;
                align-items: center;
                justify-content: space-evenly;
            }
            
            .column img {
                margin-top: 5px;
                vertical-align: baseline;
                max-width: 100%;
            }
            /* end of responsive gallery */

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


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

            h1,
            h2,
            h3 {
                color: #cf3c3c;
            } /* when you use an h1, h2, or h3 tag, it will default to this color */

            h1 {
                font-size: 25px;
            } /* h1 tags will default to this text size */

            strong {
                /* this styles bold text, so you can make it a different color automatically if you wish */
                color: #cf3c3c;
            }



            /* BELOW THIS POINT IS MEDIA QUERY */

            /* media queries tell the browser to check the window size and rearrange elements on the page accordingly, which makes your page mobile-responsive. In this case, if the width of the window is below 800px, it will add in the below code to the specified elements. */

            @media only screen and (max-width: 800px) {
                #header {
                    /* this will fix the header image to fill in the box properly. It may cut off parts of the image depending on the screen size it's viewed on. */
                    /* if you want a different image to appear on smaller screens (like one without text) put a background-image: var(NAME OF VARIABLE); below, and it will overwrite the default header image. */
                    background-size: cover;
                    background-position: center; 
                }
                #flex {
                    flex-wrap: wrap;
                    max-width: 100%;
                }

                aside {
                    width: 100%;
                }
                
                /* these are here in case you have sidebars in your code;  the order here will cause the bars to appear below the main content instead of to the side, since they'd be cramped on a small screen. */
                main {
                    order: 1;
                }
                
                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }
                /* end of sidebar code */
                
                /* this bit tries to reformat your navigation bar on smaller screens to not be so crowded. You may need to experiment if you have longer/more links. */
                #navbar ul {
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    padding: 10px;
                    font-size: smaller;
                }
                
                /*start of responsiveness code for gallery*/
                .gallery {
                    justify-content: flex-start;
                }
                
                .column {
                  /* experiment w the two percentages below depending on how many/what size images you have in each column. */
                    flex: 20%;
                    max-width: 20%;
                    justify-content: flex-start
                }
                .column img {
                    margin-top: 5px;
                    vertical-align: baseline;
                    max-width: 100%
                }
                /* end of responsive gallery code */
            }