/* ROOT */ 
:root {
  /* background image */
  --background-image-url: url('flowerscrop_edit.jpg');
  --background-size: 1200px;
  --background-color: #43256E;
  --background-repeat: repeat;  
  /* text */
  --font-family: 'Courier New';
  /* colors */
  --content: #f4b8ff;
  --text-color: #f4b8ff; 
  }


/* BODY */ 
body {
  margin-top: 4%;
  margin-left: 8%;
  
  /* background */
  background-image: var(--background-image-url);
  background-size: var(--background-size);
  background-position: var(--background-position);
  background-repeat: var(--background-repeat);
  
  /* text */ 
  font-family: var(--font-family);
  font-size: 20px;
  color: var(--text-color);  /* Use the variable for text color */
}


/* CONTAINER */
/* 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 */

#flex {
  display: flex;
      }


/* this is the color of the main content area,
between the sidebars! */

/* CONTAINER */
main {
  color: var(--text-color);  /* Use the variable for text color */
  background-color: #43256E;
  flex: 1;
  width: 30%;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 8%;
  margin-left: 30%; 
  height: 50%;
  text-align: center; 
}


main a:link, main a:visited {
  color: var(--text-color);  /* Ensure all link states use the text color */
}

main a:hover {
  color: #ff6347;  /* Hover color */
}

main a:active {
  color: #ff6347;  /* Active color (optional) */
}



      
      /* ORDER */
/* what's this "order" stuff about??
allow me to explain!
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! */


h1 {
  color: #ED64F5;
  font-size: 35px;
  }