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

/* more layout styles. */

body{ background:rgba(209, 208, 213, 1.0);
margin:0px;
padding:0px;}
	
a:link{color:rgba(230,0,18,1.00);
text-decoration: none;
}
a:visited{color:rgba(230,0,18,1.00)}
a:hover{color:rgba(0,171,250,1.00);
text-decoration: underline}
a:active{color:rgba(230,0,18,1.00)}
	

#home_banner{width: 100%;
	height:300px;
	background:url("../images/pour3.jpg")scroll center center / cover;
	color: rgba(95,78,88,1.00);	
}


#home_container{width:1200px;
	height: 400px;
	background:rgba(194,60,209,0.00);
	margin: 0px auto;
	padding-top:50px}




					#portfolio {width:1200px;
						height: 400px;
						margin: 25px auto;
						background: rgba(126,142,113,1.00)}

					#pours {width:1200px;
						height: 400px;
						margin: 25px auto;
						background: rgba(126,142,113,1.00)}

					#canva {width:1200px;
						height: 400px;
						margin: 25px auto;
						background: rgba(126,142,113,1.00)}

					#socials {width:1200px;
						height: 100px;
						margin: 25px auto;
						background: rgba(126,142,113,1.00);
						text-align: center}

					.image{width:300px;
						height:400px;
						background:rgba(126,142,113,1.00);
						float:left; 
					}

					.clearfloats{clear:both;}



h2{color:rgba(126,142,113,1.00);
	font-size: 60px;
	font-weight: 200;
	font-style: normal;
	text-align: center;
}

				/*DO NOT TOUCH - CODE FOR FLIPPING IMAGE*/ 

								.flip-wrapper {
						  display: flex;
						  justify-content: center;
						  align-items: center;
						  margin: 40px auto;
						  max-width: 695px;
						  max-height: 900px;
						}

						.flip-container {
						  perspective: 1200px;
						  width: 100%;
						  max-width: 695px;
						  aspect-ratio: 16 / 9;
						  cursor: pointer;
						}

						.flipper {
						  width: 695px;
						  height: 900px;
						  position: relative;
						  transform-style: preserve-3d;
						  transition: transform 0.8s;
						}

						.flipped .flipper {
						  transform: rotateY(180deg);
						}

						.front, .back {
						  position: absolute;
						  width: 695px;
						  height: 900px;
						  object-fit: cover;
						  backface-visibility: hidden;
						  border-radius: 10px;
						  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
						}

						.back {
						  transform: rotateY(180deg);
						}



a:link{color:rgba(3,161,204,.50);}
a:visited{color:rgba(196,64,255,1.00);}
a:hover{color:rgba(3,161,204,1.00);}
a:active{color:rgba(3,161,204,1.00);}

.socials{margin-right: 8px;}