* {
  Padding:0px;
  Margin:0px;
  box-sizing:border-box;}

Html, body {
	width: 100%;
	height: 100%;
	}


/*=========================
   1. Navigation buttons
==========================*/
	#main-nav ul {
    		background: black;
	  	}

		#main-nav li {
 	 		margin-top:2px;
 	 		text-align: right; 
 	 		list-style-type: none;
			}

			#main-nav a {
  		 		margin:0 auto;
 		 		display: block;
				width: 160px;
 		 		height: 35px;
		 		line-height: 35px;
		 		Background-color: black;
 		 		text-decoration: none; 
 		 		Color: white;
 		 		font-family: futura-pt, sans-serif;
 		 		font-weight: 300;
 		 		font-size: 35px;}
     	


	#main-nav a:hover {background-color: yellow;color: black;}

	#main-nav a:active {background-color: black;color: white;}

/*=========================
   2. Text styles
==========================*/

	h1 {font-family: futura-pt, sans-serif;font-weight: 700;font-style: normal;}
		
	h2 {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}

	h3 {font-family: futura-pt, sans-serif;font-weight: 300;font-style: normal;}

	h4 {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
			
	h5 {font-family: futura-pt, sans-serif;font-weight: 500;font-style: normal;}
			
	h6 {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}


/*=========================
   5. 0 Grid Styles
==========================*/

  /*==1.GRID_CONTAINER==*/
 	.grid-container {
    		background-color: black;
    		padding: 50px 0 50px 0;
   		max-height: 1200px;
    		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
    		grid-template-columns: repeat(8, 1fr);
    		grid-auto-rows: 150px;
    		}

	.title {
      		color: white;
      		background: black;
      		grid-column-start: 1;
      		grid-column-end: span 7;
      		grid-row-start: 3;
      		grid-row-end: span 2;
      		overflow: hidden;
		font-size: 100px;
      		}

	h1 has been {
		font-size: 100px;
		}

	.navigation {	  
	    	grid-column-start: 6;
	    	grid-column-end: span 3;
	    	grid-row-start: 2;
	    	grid-row-end: 3;
	    	}


 /*==2.GRID_CONTAINER==*/
	#id {anatomy}
 	.anatomy-section {
    		max-width: 1200px;
    		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
    		grid-template-columns: repeat(8, 1fr);
    		grid-auto-rows: 150px;
    		color: yellow;
    		background-img: 
    		}

	.anaheader {
      	    max-width: 1200px;
	    grid-column-start: 1;
	    grid-column-end: span 1;
	    grid-row-start: 5;
	    grid-row-end: span 1;
	    transform: rotate(-90deg);
	    font-size: 70px;
      	    color: yellow;
	    }

	   .intro-text {
	    grid-column-start: 1;
	    grid-column-end: span 7;
	    grid-row-start:4;
	    grid-row-end: span 2;
      	    color: yellow;
      	    font-size: 15px;
            text-align: center;
            transform: rotate(-0.4deg);
	    }

	   .anat {
	    grid-column-start: 3;
	    grid-column-end: span 8;
	    grid-row-start: 3;
	    grid-row-end: span 1;
	    Font-size: 25px;
	    }

	   .line {
	    grid-column-start: 1;
	    grid-column-end: span 3;
	    grid-row-start: 6;
	    grid-row-end: span 5;
	    Font-size: 150px;
            color: black;
	    }


  /*==3.GRID_CONTAINER==*/
 	.characters-section {
    		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
		grid-template-columns: repeat(8, 1fr);
    		grid-auto-rows: 150px;
    		background: white;
    		}

	.char {
	    	grid-column-start: 1;
	    	grid-column-end: span 8;
	    	grid-row-start: 2;
	    	grid-row-end: 8;
	    	Font-size: 65px;
	    	text-align: center;
		}

	
  /*==4.GRID_CONTAINER==*/
	.history-section {
    		max-width: 1200px;
		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
    		grid-template-columns: repeat(8, 1fr);
    		grid-auto-rows: 150px;
    		background: black;
		}

	.hist {
		max-width: 1200px;
	    	grid-column-start: 1;
	    	grid-column-end: span 8;
	    	grid-row-start: 1;
	    	grid-row-end: 8;
	    	Font-size: 65px;
	    	text-align: center;
		background: black;
		color: white;
		}

  /*==5.GRID_CONTAINER==*/

.grid-container2 {
    		width:100%;
   		max-width: 1200px;
    		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
    		grid-template-columns: repeat(8, 1fr);
    		grid-auto-rows: minmax(200px, 200px);
		overflow: hidden;
    		}

	.uses-section {
		max-width: 1200px;
    		margin:0 auto;
    		padding:0;
    		display: grid;
    		grid-gap:10px 10px;
    		grid-template-columns: repeat(8, 1fr);
		grid-auto-rows: minmax(200px, 200px);
    		background: white;
		overflow: hidden;
		}


	.uses {
	    	grid-column-start: 2;
		grid-column-end: span 2;
	    	grid-row-start: 2;
		grid-row-end: span 2;
	    	Font-size: 45px;
		color: black;
		transform: rotate(-90deg);
		padding-top: 35px;
		}
	
	.text1 {Font-size: 20px;
		color: black;
 		font-family: futura-pt, sans-serif;
 		font-weight: 300;
  		grid-column-start: 6;
  		grid-column-end: span 2;
  		grid-row-start: 2;
  		grid-row-end: span 2;
		}

	.text2 {
	    	grid-column-start: 4;
        	grid-column-end: span 2;
	    	grid-row-start: 4;
		grid-row-end: span 2; 
	    	Font-size: 20px;
		color: black;
 		font-family: futura-pt, sans-serif;
 		font-weight: 300;
		}

	.text3 {
	    	Font-size: 20px;
		color: black;
 		font-family: futura-pt, sans-serif;
 		font-weight: 300;
  		grid-column-start: 6;
  		grid-column-end: span 2;
  		grid-row-start: 6;
  		grid-row-end: span 3;
  		overflow: hidden;
		}

	.text4 {
	    	grid-column-start: 4;
        	grid-column-end: span 2;
	    	grid-row-start: 8;
		grid-row-end: span 2;
	    	Font-size: 20px;
		color: black;
 		font-family: futura-pt, sans-serif;
 		font-weight: 300;
		overflow: hidden;
		}

	.pic1 {grid-column-start: 3;
		grid-column-end: span 3;
		grid-row-start: 2;
		grid-row-end: span 2;
		padding-left: 105px;	  
		}

	.pic2 {grid-column-start: 2;
		grid-column-end: span 4;
		grid-row-start: 4;
		grid-row-end: span 2;
		}

	.pic3 {grid-column-start: 3;
		grid-column-end: span 3;
		grid-row-start: 6;
		grid-row-end: span 2;
		padding-left: 60px;
		}

	.pic4 {grid-column-start: 2;
		grid-column-end: span 3;
		grid-row-start: 8;
		padding-left: 20px;
		}


@media only screen and (max-width: 768px) {

			/*==FONT SIZES==*/
			     .title > h1 {font-size: 100px;}
				h5 {font-size: 13px;}

			/*==COLUMNS==*/
				[CLASS*"col-"] 
				{width: 100%;}

			/*==CHARACTERS==*/
 				.characters-section {
    					margin:0 auto;
    					padding:0;
    					display: grid;
    					grid-gap:10px 10px;
					grid-template-columns: repeat(8, 1fr);
    					grid-auto-rows: 100px;
    					background: white;
    					}

 				.char {
	    				grid-column-start: 1;
	    				grid-column-end: span 8;
	    				grid-row-start: 2;
	    				grid-row-end: 8;
	    				font-size: 50px;
	    				text-align: center;
					}

			/*==5.GRID_CONTAINER==*/

				.uses-section {
				max-width: 768px;
				}


				.uses {
	    			grid-column-start: 3;
				grid-column-end: span 5;
	    			grid-row-start: 2;
				grid-row-end: span 1;
				padding-left: 30px;
				padding-bottom: 70px;
				padding-top: 0px;
				padding-right: 0px;
				transform: rotate(0deg);
				}
	
				.text1 {
				color: black;
 				font-family: futura-pt, sans-serif;
 				font-weight: 
  				grid-column-start: 6;
  				grid-column-end: span 2;
  				grid-row-start: 3;
  				grid-row-end: span 2;
				}

				.text2 {
	    			grid-column-start: 6;
        			grid-column-end: span 2;
	    			grid-row-start: 5;
	    			Font-size: 20px;
				color: black;
 				font-family: futura-pt, sans-serif;
 				font-weight: 300;
				}

				.text3 {
	    			Font-size: 20px;
				color: black;
 				font-family: futura-pt, sans-serif;
 				font-weight: 300;
  				grid-column-start: 6;
  				grid-column-end: span 2;
  				grid-row-start: 7;
  				grid-row-end: span 3;
  				overflow: hidden;
				}

				.text4 {
	    			grid-column-start: 6;
        			grid-column-end: span 2;
	    			grid-row-start: 9;
				grid-row-end: span 3;
	    			Font-size: 20 px;
				color: black;
 				font-family: futura-pt, sans-serif;
 				font-weight: 300;
				}

				/*((TOP, RIGHT, BOTTOM, LEFT))*/

				.pic1 {grid-column-start: 2;
				grid-column-end: span 2;
				grid-row-start: 3;
				grid-row-end: span 1;
				padding: 0px 0px 0px 50px;
				}

				.pic2 {grid-column-start: 3;
				grid-row-start: 5;
				padding: 0px 0px 0px 25px;
				}

				.pic3 {grid-column-start: 2;
				grid-column-end: span 3;
				grid-row-start: 7;
				padding: 0px 0px 0px 50px;
				}

				.pic4
				{grid-column-start: 3;
				grid-row-start: 9;
				padding: 0px 0px 0px 0px;
				}

			}


@media only screen and (max-width: 600px) {

			/*==FONT SIZES==*/
				.title > h1 {font-size: 100px;
					     text-align: center;}

				h5 {font-size: 15px;}

			/*==NAVIGATION==*/
				.navigation {
					grid-column-start: 1;
					grid-column-end: span 4;
					grid-row-start: 2;
					grid-row-end: span 1: 
					}

				#main-nav ul {
					-webkit-columns: 4 50px; 
					-moz-columns: 4 50px; 
					columns: 4 50px; 
					}

				#main-nav a { 
  					font-size: 20px;
					text-align: center;
					grid-column-start: 1;
					grid-column-end: span 5;
					grid-row-start: 2;
					grid-row-end: span 2;
					width: 100px;
					}


			/*==COLUMNS==*/
				[CLASS*"col-"] 
				{width: 100%;}
			

			/*==NAV GRID==*/
				.grid-container {
    				grid-template-columns: repeat(4, 1fr);
					}

			/*==CHARACTERS==*/
 				.characters-section {grid-auto-rows: 50px;}

 				.char {font-size: 30px;}

			/*==USES==*/
				.grid-container2 {overflow: hidden;}

				.uses-section {grid-auto-rows: 75px;}

				/*((TOP, RIGHT, BOTTOM, LEFT))*/

				.uses {font-size: 30px;
					transform: rotate(0deg);
					padding: 0px 80px 0px 0px;
					}

				.pic1 {grid-column-start: 2;
					grid-column-end: span 6;
					grid-row-start: 4;
					grid-row-end: span 4;
					padding: 0px 0px 0px 35px;
					}
	
				.text1 {grid-column-start: 2;
  					grid-column-end: span 6;
  					grid-row-start: 7;
  					grid-row-end: span 3;
					padding: 20px 0px 0px 0px;
					}

				.pic2 {grid-column-start: 2;
					grid-column-end: span 6;
					grid-row-start: 10;
					grid-row-end: span 4;
					padding: 0px 0px 0px 75px;
					}

				.text2 {grid-column-start: 2;
        				grid-column-end: span 6;
	 			   	grid-row-start: 13;
					grid-row-end: span 3;
					padding: 10px 0px 0px 0px;
					}

				.pic3 {grid-column-start: 2;
					grid-column-end: span 6;
					grid-row-start: 16;
					grid-row-end: span 2;
					overflow: hidden;
					padding: 0px 0px 0px 35px;
					}

				.text3 {grid-column-start: 2;
  					grid-column-end: span 6;
  					grid-row-start: 18;
  					grid-row-end: span 3;
					padding: 10px 0px 0px 0px;
					}

				.pic4 {grid-column-start: 2;
					grid-column-end: span 6;
					grid-row-start: 21;
					grid-row-end: span 2;
					padding: 0px 0px 0px 80px;
					}

				.text4 {grid-column-start: 2;
        				grid-column-end: span 6;
	    				grid-row-start: 24;
					grid-row-end: span 3;
					padding: 30px 0px 0px 0px;
					}

    				}