html {
	scroll-behavior: smooth;
}

body {
	font-family: Arial, sans-serif;
	display: flex;
/*	height: 140vh;*/
/*	height: 1200px;*/
/*	background-color: black;*/
	background-image: url("../images/voteSticker.jpg");

}


.ani {
	top: 20px;
	position: absolute;
}

.container {
/*border: 5px solid rgba(155,66,66,1.00);*/
	display: flex;  
	flex-wrap: wrap;
	width: 1240px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
/*	font-family: "Rubik Dirt", system-ui;*/
/*	font-family: "Rubik Dirt", system-ui;*/
/*	font-family: "Bungee Shade", sans-serif;*/
	font-family: "Road Rage", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
/*	font-size: 150px;	*/
/*	padding: 150px 0;*/
	background-color: #F4C41A;
	background-image: url("../images/p6.png");
	background-repeat:repeat;
	background-blend-mode: multiply;
	border: 40px solid #F6F3E7;
	text-shadow: -3px 2px #F4C41A, -10px 8px #F6F3E7;
	filter: invert(4%);
}

.banner {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;

}

.banner img {
	background-color: #F6F3E7;
/*	background-image: url("../images/p6.png");*/
	background-repeat:repeat;
	background-blend-mode: multiply;
	max-width: 100%;      
	height: auto;
	padding: 20px 0;
	
}


.topLine {
/*border: 5px solid rgba(155,66,66,1.00);*/
/*	width: 1000px;*/
	height: 220px;
	padding: 0 10px;
	overflow-y: scroll;
	font-family: "Road Rage", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 200px;
	display: flex;
	flex-direction: column;
	-ms-overflow-style: none;  /* Hide scroll IE and Edge */
	scrollbar-width: none;  /* Hide scroll Firefox */
/*	padding: 20px;*/
	cursor: pointer;
	
}

.topLine::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}


.lineColor1 {
	color: #3B9FB6;
}

.lineColor2 {
	color: #C94948;
}

.vote {
/*border: 5px solid rgba(155,66,66,1.00);*/
	display: flex;  
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: 350px; /* the height */	
/*	mix-blend-mode:soft-light;*/
	cursor: pointer;
}

p {
/*border: 1px solid rgba(155,66,66,1.00);*/
	padding: -20px 0 20px 0;


}

.column {
/*border: 1px solid rgba(155,66,66,1.00);*/
/*-------------------------For Rubik Dirt*/
/*	width: 250px;*/
/*	height: 360px;*/
	
/*-------------------------For Bungee Shade*/
	margin-top: -80px;
	font-size: 650px;
	width: 240px;
	height: 650px; /* the height */	
	line-height: 1.1;
	overflow-y: scroll;
	-ms-overflow-style: none;  /* Hide scroll IE and Edge */
	scrollbar-width: none;  /* Hide scroll Firefox */
}

.column::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.left-column {
/*background-color: #e0f7fa;*/
/*	font-size: 300px;*/
	color: #C94948;

}

.right-column {
/*background-color: #ffebee;*/
/*	font-size: 300px;*/
	display: flex;
	flex-direction: column-reverse;
	color: #3B9FB6;
}


/* Image container styling */
.image-container {
	position: relative;
	margin: 50px 0;
	bottom: 20px;
	width: 940px;
	height: 940px;
}

/* Front image styling */
.image1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;

}

/* Rotating background image styling */
.image2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	object-fit: cover;
	border-radius: 10px;
	transform-origin: center;
	transition: transform 0.1s ease-out;
/*  opacity: 0.8;*/
/*	mix-blend-mode:overlay;*/
}

.tagline {
	font-family: "Road Rage", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 180px;
	line-height: 140px;
	display: flex;
	color: #3B9FB6;
	margin: 50px 0;
	margin-top: -120px;
  z-index: 5;
}

/* Rotate the background image on scroll */
body {
  scroll-behavior: smooth;
}

body, html {
  --scroll-rotation: calc(var(--scroll) * 1deg);
}

body {
  --scroll: 0;
}

.image2 {
  transform: rotate(calc(var(--scroll) * 1deg));
}




/*---------------------------------------------------------MEDIA QUERIES 650--*/
@media screen and (max-width: 550px) {
/*
	header {
		padding: 20px 10px;
	}
*/
	.container {
/*		border: solid 2px rgba(15,79,168,1.00);*/
		max-width: 390px;
	border: 20px solid #F6F3E7;
	}

	.topLine {
		height: 100px;
		font-size: 100px;


	}
	.column {
/*border: 11px solid rgba(155,66,66,1.00);*/
		margin-top: -200px;
		font-size: 200px;
		width: 80px;
		height: 200px; /* the height */	
		line-height: 1.1;
		overflow-y: scroll;
		-ms-overflow-style: none;  /* Hide scroll IE and Edge */
		scrollbar-width: none;  /* Hide scroll Firefox */
	}
	.image-container {
		width: 360px;
		height: 360px;

		margin: 50px 0;
		margin-top: -170px;
	}
	.tagline {
		font-size: 96px;
		line-height: 80px;
		display: flex;
		color: #3B9FB6;
		margin: 10px 0;
		margin-top: -120px;

	}
	.banner img {
	padding: 4px 0;
	
	}


}