@charset "utf-8";

/* Fun_Society -> Fuck_Society
font-family: "pf-pixelscript", sans-serif;
font-weight: 400;
font-style: normal;
*/

/* Button text
 font-family: 'Silkscreen', cursive; 
 */

        :root {
    --header-image: url(https://3deified.art/my-header.png);
        } 

        body {
                font-family: "Alagard";
                margin: 30;
                background-image: url(https://3deified.art/starsagain.gif);
                background-size: 125px;
                
            } /* 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: 600px;
                /* 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: #bd7b10;
                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%;
                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: 50px;
                /* 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: 20px;
            } /* same as above, but for li, list items */

            /* navigation links*/
            #navbar li a {
                color: hsl(0, 0%, 0%);
                /* navbar text color */
                font-weight: 800;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #dddddd;
            }

            #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 {
                flex: 1;
                padding: 30px;
                order: 2;
            }


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

            h1,
            h2,
            h3 {
                color: #dddddd;
            } /* 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: #faf0b6;
            }



            /* 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%;
                }
                
                /* 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 */
            }