@charset "UTF-8";
/* CSS Document */


/* ======================================================
   CSS Reset, Border-Box, Clearfix, etc. Don't change.
   ====================================================== */

/* Reset browser default styles: */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}
s
/* border-box so that border widths aren't added to the total width of the element: */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Clearfix to make floated elements behave correctly: */
  .cf:before, .cf:after { content: ""; display: table; }
  .cf:after { clear: both; }
  .cf { zoom: 1; }
  .clear { clear: both; }

/* In order for the percentage heights to work: */
html, body { height:100%; }



/* ======================================================
   General Rules 
   ====================================================== */
/*   
Font weight values for Source Sans Pro Family: -
Light 300, Regular 400, Semi Bold 600, Bold 700, Black 900
*/

Body {
	font-family:  'Open Sans', sans-serif;
	padding: 0px;
}
.container {
	width: 90%;
	margin: 30px auto 30px auto;
}

/* All images scale proportionally 
to the size of the container element 
(usually a div): */
img {
	width: 100%;
	height: auto;
}
h1 {
	font-size: 42px;
	font-weight: 600;
}
p{
	font-size: 20px;
}
body{
	background-color: #fee05f;
	padding:0;
	margin:0;
}





/**background image for HOMEPAGE**/
#homebg{
	background-image:url(images/homebg.png);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-attachment:fixed;
}






/* ======================================================
                    HOMEPAGE (INDEX)
   ====================================================== */
/**background image for HOMEPAGE**/
#homebg{
	background-image:url(images/homebg.png);
 /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

.ash{
	font-size: 65px;
	margin: 470px 0% 3% 0%;
	text-transform: uppercase;
}

.about1{
	padding: 2% 5% 2% 5%;
	font-size: 20px;
	border:7px black solid;
	text-align: center;
}
.school1{
	padding: 2% 5% 2% 5%;
	font-size: 20px;
	border:7px black solid;
	text-align: center;
} 
.personal1{
	padding: 2% 5% 2% 5%;
	font-size: 20px;
	border:7px black solid;
	text-align: center;
}

.whole{
	padding: 5%;
}










/* ======================================================
                 NAVIGATION (LEFT SIDE)
   ====================================================== */
ul {
	margin-top: 100px;
	list-style-type: none;
	float: right;
	text-align: right;
}
.name{
	text-align: right; /**ASHLEY MENARDO**/
}
nav {
	width: 25.333%; /**width of left side**/
	margin: 0; /**no margins... bleeds out of website**/
	padding: 2%; /**padding from inside of nav**/
	position: fixed;/**stays in same area even when scrolling**/
	background-color: white;
	height: 100%;/**stays fixed on left side**/
}


/* ======================================================
                    NAVIGATION LINKS
   ====================================================== */
.navlink{
	text-transform: uppercase; /**links are uppercase**/
}
a{
	color: black;
}
a:hover{
	color: #fee05f; /**turns yellow when mouse is over it**/
}
a:link{
	text-decoration: none; /**no underline link**/
}


/* ======================================================
       RIGHT SIDE OF WEBSITE.. PUT EVERYTHING IN HERE
   ====================================================== */
.main {
	margin-left: 29.333%; /**right side of website... ex. about me**/
}

.about{
	padding: 30%;
	text-align: justify;
}


/* ======================================================
     PORTFOLIO GRID/SECTION (check 'Grid Example' below)
   ====================================================== */






















/* ======================================================
   Fluid 6-column-grid. Calculate your own grid if needed.
   ====================================================== */
   
/*one grid unit = 6 equal columns:*/
.one_unit {
	width: 12.667%;
	margin: 2%;
	float: left;	
}

/*two grid units = 3 equal columns:*/
.two_unit {
	width: 29.333%;
	margin: 2%;
	float: left;	
}

/*three grid units = 2 equal columns:*/
.three_unit {
	width: 46%;	
	margin: 2%;
	float: left;
}

.four_unit {
	width: 62.666%;	
	margin: 2%;
	float: left;
}
.five_unit {
	width: 79.333%;	
	margin: 2%;
	float: left;
}
.six_unit {
	width: 96%;	
	margin: 2%;
	float: left;
}




/* ======================================================
   Grid Example
   ====================================================== */

.grid-container {
margin: 0%;
padding: 0%;
}
.grid-box {
	width: 100%;/**size of image**/
	margin: 0% 1% 20px 0;/**centering image**/
	float: left;
}
.grid-container-text {
	width: 120%;
	margin: 60px 0 0 -3%;
}
.grid-box-text {
	width: 37.333%;
	margin: 10px 3% 10px 3%;
	float: left;
}





/* ======================================================
   Pages Specific Rules
   ====================================================== */
  
   
   
   
   
   

   
   
   
/*Below the Media Queries. Decide on either the mobile first or the destop first approach and delete the example you don't need.   */
@media (max-width: 700px){
/**font changes as it gets smaller**/
p{
	font-size: 12px;
}	
a{
	font-size: 12px;	
}
/**padding for about me when it gets smaller**/
.about{
	width: 70%;
	padding:20% 10% 10% 15%;
	}
/*changes nav to horiozntal when screen is smaller*/
	li{
	float:left;
	display:inline;
	text-align: center;
	padding: 14px 16px
	}
	nav{
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	display: inline;
	height:6%;
	}
/*makes name not visible when smaller*/
	.name{
	visibility: hidden;
	display: none;
	}
/*sizing and placement of logo*/
	.logo{
	float: left;
	margin:0;
	padding:0;
	display: inline-block;
	width: 5%;
	}
/*height and placement of links*/
	.navlink{
	margin: -5px;
	padding: 0;
	}
	.main{
	margin: 0;
	padding: 0;
	}
	.ash{
		margin-top:530px;
	}
}

@media (max-width: 699px){
	h1{
		font-size: 15px;
	}
	nav{
		padding:0;
		margin: 0;
		height: 5%;
		display: block;
	}
/*work webpages show images and descriptions in full (when screen is smaller)*/
	.main{
	margin: 0;
	padding: 0;
	}
	.whole{
		padding: 5%;
	}
	.ash{
		font-size: 48px;
		margin-top: 400px;
	}
	.about1{
		padding: 1% 4% 1% 4%;
		font-size:10px;
	}
	.school1{
		padding: 1% 4% 1% 4%;
		font-size:10px;
	}

	.personal1{
		padding: 1% 4% 1% 4%;
		font-size:10px;
	}
}

@media (max-width: 600px){
/*navigation for when it gets iphone SE small*/	
	.logo{
		width: 6%;
	}
	li{
		padding-top: 10px;
	}
	.ash{
	margin-top:570px;
	font-size:43px;
	}
}

@media (max-width: 420px){
/*navigation for when it gets iphone SE small*/	
	.logo{
		width:8%;
	}
	li{
		padding-top: 10px;
	}
	.ash{
		font-size:40px;
		margin-top: 480px;
	}
}


@media (max-width: 320px){
/*navigation for when it gets iphone SE small*/	
	li{
		padding-top: 7px;
	}
	a{
		font-size: 10px;
	}
	.logo{
		padding: 1%;
		width:7%;
	}
	.ash{
		margin-top:380px;
	}
}