* { box-sizing: border-box; } /* the box sizing selector sets the width and height of an element and the border-box declaration tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements <-from WC3 */
body { background-color: #cfe1d2;
      background-repeat: repeat;
       font-family: Arial, Verdana, sans-serif; }/*The body selector will style the background image, text color and font family between the body HTML tags 
	   The theme for the portfolio is southwest, specifically nature of the southwest in color and aesthetics
	   The color choices I made for this digital design portfolio are based on my digital painting Magical Succulents, the color palette was created at Palette URL: http://paletton.com/#uid=7020u0kdnvB4pRC8HGKieqHmIlS 
	   Type choices were kept simple for readability and to create a sense of simplicity as my design style The digital design portfolio contains a lot of text and needs to be easy on the eyes*/
#mobile {display: none; }
#deskktop { display: inline; }
#wrapper { background-color: #526655; 
           margin-left: auto;
           margin-right: auto;
           width: 80%; min-width: 700px; max-width: 1024px;
		   border-top-left-radius: 25px;
		   box-shadow: 5px 5px 5px #1e1e1e;} /* A box shadow was added to the id and min and max width were given a value*/
header { background-color: #526655;; 
         color: #FFFFFF;
		 border-top-left-radius: 25px;
}	 /*The header selector will style the background-color and text color of only the header HTML */
h1 {background-image: url(right_header.jpg);
    background-position: right;
    background-repeat: no-repeat;
	line-height: 72px;
	padding-left: 20px;
    margin-bottom: 0;} /* a background image was set to the right side, no repeat, at a 72px height with 20 px of padding and no margin on the bottom */
.sidebar {
  margin: 0;
  padding: 0;
  width: 170px;
  background-color: #526655;
  position: fixed;
  height: 70%;
  overflow: auto;
}

/* Sidebar links contain the navigation links This navigation travels down the page if the page scrolls keeping navigation available to the user */
.sidebar a {
  display: block;
  color: black;
  padding: 14px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #526655;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #526655;
  color: black;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 170px;
  padding: 1px 16px;
  height: 500px;
}

h2 { color: #526655; 
	 font-family: "Arial Black", Gadget, sans-serif
	} /* The h2 selector will style the font family in all h2 HTML */
h3 { color: #526655; } /* the h3 selector will be styled with a specific color */
main { margin-left: 170px;
       padding-top:1px;
       padding-bottom:1px;
       padding: 20px;	   
       background-color: #ffffff; } /* the main selector styles the main section top and bottom padding of 1px also adds the background color white */

} /*This id will style an image with a 300 px height in the background, not repeating, filling the entire space - the 170px left margin allows for the navigation area*/ 
.topic{float:right; font-size: 1.2em; border:1px solid rgb(8, 14, 36); background-color:#FFDABA; 
			color:#000000; margin-left:3px; padding: 10px; border-radius: 15px;}
.topic_pic2_2{float:right; width:225px; border:1px solid #080D24; margin:5px 5px 0px 2px; border-radius: 15px;}
.b_brand { color: #526655;
          font-size: 1.2em; } /*This is a class selector and it is associated only with certain HTML elements, in this case it is the name of the owner of this digital portfolio or the beginning of a paragraph, it styles the text color and font size */
.responsive {
  width: 100%;
  max-width: 411px;
  height: auto;  
}     /*This class selector will make images responsive */
table { margin: auto; /*This selector styles the table */
        border: 1px solid #000000;
        width: 90%; 
		border-collapse: collapse;
}
td, th { padding: 5px;
		border: 1px solid #000000;
        color: #000033; } /* the td and th selectors will be styled with a specific color, padding and a green border */
td { text-align: center; /* the td will be styled with the text aligned center */
}
.text { text-align: left; /* the class text when applied to td will style a left aligned text for the cells with descriptions */
}
tr:nth-of-type(even) { background-color: #d2e2d4; } /* the nth-of-type even selector will style the even rows with a specific color, light green */
tr:first-of-type { background-color: #83b283;
} /* the first of type selector will style the odd rows with a specific color, white */
 a {color: #1D43AB;
 }
 
 .bottom a {color: #FFFFFF;
 }
 .bottomleft {
  position: relative;
  bottom: 8px;
  top: 50px;
  left: 16px;
  margin-right:675px;
}
 
 footer {margin-left: 100px;
         padding: 10px;
         background-color: #526655;
		 font-size: .90em;
		 font-style: bold;
		 text-align: right; } /* The footer selector will change the font size, font style and text alignment in all footer HTML */
}
 header, nav, main, footer {display: block;} /* for display on Internet Explorer version 10 and below */
@media only screen and (max-width: 1024px) {
          body { margin: 0; padding: 0;  
                 background-image: none; } 
          #wrapper { width: auto;
	                 min-width: 0;
				     margin: 0;
			         box-shadow: none; }
		  header { border-top-left-radius: 0px;}
          h1 { margin: 0; }
          .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
          main { padding:  1em;
                   margin-left: 0;
                   font-size: 90%; }
          footer {margin: 0; } /* this media query is for screens with a max width of 1024, most likely tablet displays - it describes the changed values to specific CSS selectors that will enable the menu to display horizontally, as well as the body, wrapper, h1, main and footer with larger or smaller padding, margins and font sizes */
#homehero, #abouthero, #galleryhero,#teachingthero, #resumethero { margin-left: 0; }
}
@media only all and (max-width: 768px) {
		   header { border-top-left-radius: 0px;}
		   h1 { font-size: 100%; font-size: 1.5em; padding-left: 0.3em; }
.sidebar a {
    text-align: center;
    float: none;
 }
 .bottomleft {
  position: relative;
  bottom: 8px;
  top: 5px;
}
main { padding: .1em .6em .1em .4em; }
#homehero, #abouthero, #galleryhero,#teachingthero, #resumethero  { display: none; } 
		    footer { margin: 0; }
#desktop { display: none; }
#mobile {display: inline; }	
}/* this media query is for screens with a max width of 768, most likely phone displays - it describes the changed values to specific CSS selectors that will enable the menu to display vertically with division lines between the links - additionally the h1, hero images, footer, and main display with larger or smaller padding, margins and sizes - finally the id desktop and mobile will provide the phone number on the home page to display for mobile use */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
.bottomleft {
  position: relative;
  bottom: 8px;
  top: 5px;
}
h1 {background-image: url(right_header_small.jpg);
    background-position: right;
    background-repeat: no-repeat;
	line-height: 72px;
	padding-left: 20px;
    margin-bottom: 0;} /* a background image was set to the right side, no repeat, at a 72px height with 20 px of padding and no margin on the bottom */
  }