body{
	font-family: Akzidenz Grotesk, sans-serif;
	
}
/*css for creative html*/

#free{
	align-items: center;
}

.navbar{
	list-style: none;
	display: flex;
	justify-content:space-between;
	padding: 10px;
	z-index: 1;
}

.navbar a{
	font-size: 20px;
	color: black;
}

#toolBox{
	margin: 10px;
	display: flex;	
}

.toolList{
	list-style: none;
}

#red{
	color: rgb(255,0,0);
}
#pink{
	color: rgb(255, 166, 190);
}
#orange{
	color: rgb(255,126,48);
}
#yellow{
	color: rgb(255,216,1);
}
#canary{
	color: rgb(255,239,0);
}
#green{
	color: rgb(52,140,49);
}
#sage{
	color: rgb(183,205,131);
}
#blue{
	color: rgb(0,0,255);
}
#skyblue{
	color: rgb(137,197,255);
}
#indigo{
	color: rgb(63,15,183);
}
#violet{
	color: rgb(127,0,255);
}
#lilac{
	color: rgb(213,181,194);
}

a:visited {
	text-decoration: none;
	color: black;
}

a:link {
	text-decoration: none;
	z-index: 1;
	color: black;
}

.navbar a:hover {
	background-color: red;
	transition: 1s;
}

/*css for home page*/

.img-group{
	display: flex;
	height: 205px;
	width: auto;
	flex-flow: row wrap;		
}

.photos{
	height: 300px;
	margin: 5px;
	justify-content: space-between;
	margin-bottom: 20px;


}



.photos:hover{
	border-bottom: 3px solid rgb(255,0,0);
}

/*creative space css*/

#sun{

	position: absolute;
	width: 650px;
	height: auto;
	top: 1550px;
	right: 30px;
}


#mexico{
	position: absolute;
	width: 390px;
	height: auto;
	top: 1100px;
	left: 50px;
	z-index: -1;
}

#dragon{
	width: 40px;
	height: auto;
	position: absolute;
	top: 820px;
	left: 300px;

	z-index: 1;
}

#cd{
	width: 100px;
	height: auto;
	position: absolute;
	top: 660px;
	left: 300px;

	z-index: 1;

}

#drug{
	position: absolute;
	width: 300px;
	top: 700px;
	left: 10px;

	z-index: 1;
}

#prompt{
	position: absolute;
	top: 600px;
	left: 440px;
}
.jamesColor{
	width: 400px;
	height: auto;
}


/*css for info pages*/

.content{
	margin: 10px;
	display: flex;

}
.content div{
	flex:2 0 50%;
}

.infoImg{
	max-width: 100%;
	height: auto;
	margin-right: 5px;
}

.caption{
	margin-bottom: 2px;
}

.description{
	color: rgb(255, 0, 0);
	font-style: italic;
}

/* css for description on pages */
.hide{
	display: none;
}

.show{
	animation-name: spin, depth;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	text-align: center;

}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
    transform-origin: initial;
  }
}
@keyframes depth {
  0% {
    text-shadow: 0 0 black;
  }
  25% {
    text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
  }
  50% {
    text-shadow: 0 0 black;
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
      -5px 0 black;
  }
  100% {
    text-shadow: 0 0 black;
  }
}

.show:hover +.hide{
	display: block;
}

#khalo{
	max-width: 40%;
	height: auto;
}

/*css for info gallery*/
.infoGallery{
	display: flex;
	justify-content: flex-end;
	flex-flow: row wrap;
	

}

.infoPics{
	width: 240px;
	height: auto;
flex: 0 0 50%;
	margin: 10px;
	
}

/*css for about*/

#aboutDiv{
	width: 50%;
	margin: 10px;
}