/* 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." */
   
   


   
   
   
   
   
/********* START CUSTOMIZING HERE *********/

body {
  background-color: #224624;
  background-image: url(''); /*** This is where you'll add a link or file path to the image you want as the background ***/
  background-repeat: repeat; /*** repeats the image across the entire page ***/
  
  /* sets the font color, family, size, etc for the entire page */
  color: black;
  font-family: Arial;
  
  /* sets the default size of the page for desktop computers and centers the page */
  max-width:1280px;
  width:100%;
  margin: 0 auto;
}




img {
  max-width: 100%; /* images will be 100% of the size of the container they're in */
  height: auto; /* sets height to auto maintain the dimensions */
}
#googly-tree{ 
  margin-top:16px;}




/* this is the class we gave to our page wrapper */
.profile-page {
  display: grid;
  grid-template-columns: 1fr 2fr; /* creates 2 columns where second column is 2x width of first. fr = fractional  */
  gap: 20px;   /* Adds a 20px gap between the columns and rows */
  
  margin: 3rem 0; /* add a little bit of space to the top and bottom of the wrapper. 
  rem = root em. 1rem is usually 16px by default. the number is a multiplier so 1rem = 16px, 2rem = 32px, etc. */
}


/* both columns share the container class. anything here will affect both columns*/
.container {
  background-color: pink;
  padding: 0 1em; /*adds a little bit of space to the left and right of everything in the section so it doesn't touch the edge */
}



/* this changes the look of all of our section titles like "Contact Me" and "About Me" */
.section-title {
  color: white;
  background-color: black;
  padding:8px;
}


ul {
  list-style-type: none; /* removes the bullets */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal sized columns */
  gap: 8px; /* Space between rows and columns */
  list-style-position: inside;
  padding: 12px;
  margin: 12px 12px;
}


/* changes styles for all anchor tags (links) */
a {
  text-decoration: none; /* remove the underline from links */
  color: black;
}

/*changes what happens when you hover over a link */
a:hover { 
  text-decoration: underline;
  font-weight: bold;
}




/* centers our glitter graphic banner and adds space below it to separate it from the paragraph */
.banner {
  display: block;
  margin: 0 auto; 
  padding-bottom: 2rem;
}



/*** THIS CHANGES THE LAYOUT FOR SMALLER SCREENS ***/  
@media (max-width: 768px) {
  .profile-page {
    grid-template-columns: 1fr;
    margin: 2.5rem;
  }
}