/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

          :root {
                --body-bg-image: none;
                --content: DimGray;
           }

           @font-face {
                 font-family: 'Leorio';
                 src: url('/fonts/Leorio.ttf');
           }

           @font-face {
                font-family: 'Midnight Memories';
                src: url('/fonts/KGMidnightMemories.ttf');
           }

            body {
                font-family: 'Leorio';
                line-height: 1.5;
                margin: 0;
                background-color: Gainsboro;
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: top center;
                color: #36454F;
            }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 600px;
                margin: 25px auto;
            }
            
            #container a {
                color: Crimson;
            }
            
            #container a:hover {
                color: IndianRed;
            }
            
            #container b {
              color: Crimson;
            }

            #header {
                width: 100%;
                background-color: DarkGray;
                background-image: url('/images/hdheader.jpg');
                background-size: 100%;
            }

            #navbar {
                border: 1px dotted White;
                height: 40px;
                background-color: DimGray;
                width: 100%;
                opacity: 0.85;
            }

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

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

            #navbar li a {
                font-family: 'Midnight Memories';
                font-size: 1.3em;
                color: #ffffff;
                font-weight: 300;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: #f5ecdf;
                text-decoration: none;
            }

            #flex {
                display: flex;
            }

            main {
                background: WhiteSmoke;
                border: 1px dotted Black;
                flex: 1;
                padding: 20px;
                order: 2;
            }
          

            #footer {
                border: 1px dotted White;
                font-family: 'Midnight Memories';
                font-size: 1.3em;
                margin-top: 10px;
                background-color: DimGray;
                color: LightGray;
                width: 100%;
                height: 40px;
                padding: 0px;
                text-align: center;
                opacity: 0.85;
            }

            #footer a {
                font-family: 'Midnight Memories';
                font-size: 1.3em;
                color: #ffffff;
                font-weight: 800;
                text-decoration: none;
            }
            
            #footer a:hover {
                color: #f5ecdf;
            }

            h1,
            h2,
            h3 {
                font-family: 'Midnight Memories'; 
                color: Black;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: #ED64F5;
            }

            .box {
                background-color: #13092D;
                border: 1px solid #ED64F5;
                padding: 10px;
            }

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }

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

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

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