/* 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 {
  --header-image: url('majd.meglatjuk');
  --body-bg-image: url('https://d7hftxdivxxvm.cloudfront.net/?height=1200&quality=80&resize_to=fill&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2P6t_Yt6dF0TNN76dlp-_Q%252F3417757448_4a6bdf36ce_o.jpg&width=1200');
  /* colors */
  --content: #faf0fa;
 }
 
body {
                margin: 0;
                font-family: "Gamja flower", sans serif;
                font-size:20px;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 55%;
                color: black;
                background-image: var(--body-bg-image);
            }
 
#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 */
  }

#container a {
  color: blue;
   /* if you want to remove the underline
  you can add a line below here that says:
  text-decoration:none; */
  }

#header {
  width: 100%;
  background-color: #8bcdfc;
  /* header color here! */
  height: 150px;
  margin-bottom: 10px;
  /* 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! */
 }

#flex {
  display: flex;
}

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #fabbfa;
                width: 150px;
                padding: 10px;
                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: #faf0fa;
                flex: 1;
                padding: 20px;
                order: 2;
            }
            
#leftSidebar {
                order: 1;
            }

#rightSidebar {
                order: 3;
            }
            
#footer {
  width: 100%;
  background-color: #8bcdfc;
  height: 25px;
  text-align: center;
}
            
            

.box {
                background-color: #faf0fa;
                border: 1px solid #ED64F5;
                padding: 10px;
                font-family: Courier;
                font-size: 14px;
                height:250px;
                overflow: auto;
            }