@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

body {
   margin: 0;
   background-color: #fff;
   font-family: 'Source Code Pro', monospace;
   font-size: 12px;
   color: #000;
   overflow-x: hidden;
   }

* {
    box-sizing: border-box;
    }


/* 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: 1300px;
            /* 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 */
            }

            /* all links on your page EXCEPT the navigation */
           #container a {
            color: red;
            /*font-weight: bold;*/
            /* if you want to remove the underline use:
               text-decoration:none; */
            }

           #header {
                width: 100%;
                background-color: #fff;
            /* header color here! */
                height: 100px;
            /* 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: 100%;
            }

/* NAVIGATION */
            #navbar {
                height: 40px;
                background-color: #fff;
                /* navbar color */
                width: 100%;
            }

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

            #navbar li {
                padding: 10px;
            }

/* navigation links*/
            #navbar li a {
                color: blue;
                /* navbar text color */
                font-size: 12px;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: red;
                text-decoration: underline;
            }
            
.navlinks {
  display: flex;
 justify-content: center;
 align-items: center; 
}
  

            #flex {
                display: flex;
            }

/* this colors BOTH sidebars
   if you want to style them separately,
   create styles for #leftSidebar and #rightSidebar */
aside {
    background-color: #fff;
    width: 300px;
    padding: 20px;
       }


/* this is the color of the main content area,
   between the sidebars! */
main {
    background-color: #fff;
    flex: 1;
    justify-content: center;
    padding: 20px;
    order: 2;
            }
            
.frame-container {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 470px;
  background-color: white;
  border: 0.1em solid #000;
  box-shadow: 2px 2px;
  padding: 10px;
  box-sizing: border-box;
}       
         
.frame-container iframe {
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}   
            
            
            

.header-image {
	height: 50px;
	margin: 40px auto;
	display: block;
}




/* 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: #fff;
  /* background color for footer */
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
  /* this centers the footer text */
  }

h1, h2, h3, h4, h5{
  font-size: 12px;
  }

h1 {
  color: blue;
  border-bottom: 1px solid blue;
  }

h2 {
  color: blue;
	border-bottom: 1px dotted blue;
  }


/* this is just a cool box, it's the darker colored one */
.box {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto 2rem auto;
  background-color: #fff;
  border: 0.1em solid #000;
  box-shadow: 2px 2px;
  overflow: auto;
  }
  
.box p {
  padding: 0 10px 0 10px;
  font-family: "Doto", sans-serif;
  font-weight: 600;
  font-size: 15px
 }

.box img {
    width: 100%;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0px;
    display: block;
}



/* title bar */
.title-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.5rem;
  top: 0;
  padding: 0.1rem;
  background: #fff;
  position: sticky;
}


.title-bar button {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 0.2rem;
  border: 2px solid black;
  background-color: #fff;
  cursor: pointer;
  transform: scale(0.5);
}

.separator {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*padding: 0.4rem 0.8rem;*/
  border-top: 0.1rem solid;
  border-width: 0.1rem 0;
  font-size: 1rem;
}

.details p{
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 10px;
  font-family: "source code pro";
  font-size: 10px;
  user-select: none;
  margin: 0;
}





/* top left scroll box */

 /*#poem-box {
	 width: 310px;
		/*margin-top: 35rem; 
	}*/   /*if i want to move the box down the page*/
	
#poem-box ul {
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

#poem-box a {
    color: blue;
		margin-left: auto;
		margin-right: auto;
}

.plant-container {
 display: flex;
 justify-content: center;
 align-items: center; 
}




/* 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*/
               
            /* above didn't work for me max width was formerly 1200px*/

            @media only screen and (min-width: 100px) and (max-width: 600px) {
                #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;
                }
            }