@import url("edenlands.css");

.buttons {
	display: flex;
	margin-top: 25px;
}
.buttons button {
	padding: 6px 30px 6px 30px;
}

/* START: #splash */
#splash {
	font-family: "Coiny";
	position: relative;
}
#splash .bg {
	background-color: #000000;
}
#splash .rel {
	/* height: 400px; */
}
#splash .center-column .logo-text {
	line-height: 90px;
}
#splash .center-column h2:nth-child(2) {
	color: #56a9e9;
	line-height: 80px;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-x) #ffffff;
}
#splash .center-column h4 {
	line-height: 80px;
}
#splashgames {
	background-color: #56a9e9;
	border-radius: 100px;
	padding: 0px 100px 0px 100px;
	line-height: 100px;
	color: #000000;
	transition: 333ms;
}
#splashgames h2 {
	text-shadow: none;
}
#splashgames:hover {
	background-color: #ffc600;
	border-radius: 2px;
	transition: 50ms;
}
#squig1 {
	transform: translate(151px, 43px);
}
#squig2 {
	transform: translate(-438px, 66px);
}
#squig3 {
	transform: translate(239px, 14px);
}
#squig4 {
	transform: translate(-365px, 25px);
}
#squig1, #squig2, #squig3, #squig4 {
	position:absolute;
	left:50%;
}
#squig5 {
	height: 367px;
}
/* END: #splash */

/* START: about-us */
#about-us {
	padding: 0px 0px 280px 0px;
	position: relative;
}
#about-us .bg {
	background-color: #000000;
}
#about-us #pic1 {
	position:absolute;
	left:50%;
	transform: translate(calc(-50% + 660px), 120px);
}
#about-us #pic2 {
	position:absolute;
	left:50%;
	transform: translate(calc(-50% + 710px), -17px);
}
#about-us #pic3 {
	pointer-events: visible;
	position:absolute;
	left:50%;
	transform: translate(34px, 490px);
	stroke: #ffffff;
	stroke-width: 7px;
	stroke-linecap: round;
	transition: 333ms ease;
	z-index: 3;
}
#about-us #pic3:hover {
	stroke: #ffc600;
	transition: 50ms ease;
}
#about-us #bar {
	position: absolute;
	width: 120%;
	background-color: #56a9e9;
	box-shadow: 0px 5px 0px 0 #56a9e980;
	font-family: "NerkoOne";
	left: 50%;
	transform: translate(-50%, 0) rotate(345deg);
}
#about-us #bar h2:nth-child(2) {
	color: #ffc600;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-x) #000000;
}
/* #about-us #bar h1 {
	color:#ffffff;
	font-size: 4.44em;
	line-height: 100px;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #56a9e9;
	padding-bottom: 25px;
} */
#about-us section {
	padding: 120px 0px 0px 0px;
	position: relative;
	display: flex;
	align-items: center;
	z-index: 2;
	gap: 140px;
}
#about-us section > div {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#about-us section p {
	padding: 240px 180px 0px 0px;
}
#about-us section p .squig-highlight::before {
	background-image: url("images/yellow_line_001.svg");
}
#about-us section button {
	display: block;
	font-size: 28px;
}
#about-us section > img {
	width: 550px;
}
/* END: about-us */

/* START:#roshambash */
#roshambash {
	position: relative;
	padding: 0px 0px 400px 0px;
	color: #000000;
}
#roshambash .bg {
	background-color: #ffc600;
}
#roshambash .bg #white-paralelogram {
	transform: translate(calc(-50% + 140px), 196px);
}
#roshambash .bg #box {
	display: none;
	position: absolute;
	width: 880px;
	height: 820px;
	background-color: #ffffff;
	transform: translate(calc(-50% - 0px), 290px);
}
#roshambash section {
	display: flex;
	align-items: center;
	padding: 280px 190px 0px 0px;
	gap: 120px;
}
#roshambash-pics {
	position: relative;
	width: 600px;
	height: 600px;
	flex-shrink: 0;
}
#roshambash-text {
	display: flex;
    flex-direction: column;
	align-items: start;
	gap: 35px;
}
#roshambash-text > h2 {
	padding: 0px 30px 0px 30px;
}
#roshambash-text p .squig-highlight::before {
	background-image: url("images/red_line_005.svg");
}
#roshambash .buttons {
	gap: 20px;
}
#play-roshambash-button {
	padding: 7px 30px 5px 30px;
	font-size: 28px;
	background-color: #e52532;
	border-color: #000000;
	text-shadow: 0px 2px 0 #ffffff80;
}
#play-roshambash-button:hover {
	background-color: #dfa4a8;
}
#play-roshambash-button:active {
	text-shadow: 0px 0px 0 #ffffff80;
	background-color: #ffc600;
}
#explore-roshambash-button {
	padding: 7px 30px 5px 30px;
	color: #000000;
	font-size: 28px;
	background-color: #ffffff;
	border-color: #000000;
	text-shadow: 0px 2px 0 #00000080;
}
#explore-roshambash-button:hover {
	background-color: #808080;
}
#explore-roshambash-button:active {
	background-color: #808080;
	background-color: #ffc600;
}
/*END #roshambash */

/*START #edenlands */
/* Imported from edenlands.css */
/*END #edenlands */

/* START: #stop-the-slop */
#stop-the-slop {
	padding: 0px 0px 280px 0px;
	position: relative;
}
#stop-the-slop .bg {
	background-color: #000000;
}
#stop-the-slop #pic1 {
	position:absolute;
	left:50%;
	transform: translate(calc(-50% + 270px), -57px);
}
#stop-the-slop #pic2 {
	position:absolute;
	left:50%;
	transform: translate(calc(-50% + 710px), -17px);
}
#stop-the-slop #pic3 {
	pointer-events: visible;
	position:absolute;
	left:50%;
	transform: translate(34px, 490px);
	stroke: #ffffff;
	stroke-width: 7px;
	stroke-linecap: round;
	transition: 333ms ease;
	z-index: 3;
}
#stop-the-slop #pic3:hover {
	stroke: #ffc600;
	transition: 50ms ease;
}
#stop-the-slop #bar {
	position: absolute;
	width: 120%;
	background-color: #e52532;
	box-shadow: 0px 5px 0px 0 #e5253280;
	font-family: "NerkoOne";
	left: 50%;
	transform: translate(-50%, -70px) rotate(358deg);
}
#stop-the-slop #bar h2 {
	color: #ffc600;
	font-size: 2.27em;
	line-height: 75px;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #000000;
}
#stop-the-slop #bar h1 {
	color:#ffffff;
	font-size: 4.44em;
	line-height: 100px;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #56a9e9;
	padding-bottom: 25px;
}
#stop-the-slop section {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 2;
	gap: 140px;
}
#stop-the-slop section > div {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#stop-the-slop section p {
	padding: 150px 180px 0px 0px;
}
#stop-the-slop section p .squig-highlight::before {
	background-image: url("images/yellow_line_001.svg");
}
#stop-the-slop section button {
	display: block;
	font-size: 28px;
}
#stop-the-slop section > img {
	width: 550px;
}
/* END:#stop-the-slop */

@media (max-width : 1746px) {
	#squig1 {
		width: 179px;
		transform: translate(151px, 43px);
	}
	#squig2 {
		width: 225px;
		transform: translate(-360px, 83px);
	}
	#squig3 {
		width: 56px;
		transform: translate(191px, 26px);
	}
	#squig4 {
		width: 102px;
		transform: translate(-283px, 33px);
	}
	#splash .center-column h2:nth-child(2) {
		line-height: 50px;
	}
	#splashgames {
		padding: 0px 50px 0px 50px;
		line-height: 80px;
	}
	#about-us {
		padding-bottom: 80px;
	}
	#about-us #bar h2 {
		font-size: 2.87em;
		line-height: 80px;
	}
	#about-us #bar h1 {
		font-size: 5.74em;
	}
	#about-us #pic1 {
		width: 111px;
		transform: translate(calc(-50% + -469px), 710px);
	}
	#about-us #pic2 {
		width: 77px;
		transform: translate(calc(-50% + 449px), -178px);
	}
	#about-us #pic3 {
		width: 443px;
		transform: translate(calc(-50% - 22px), 545px);
	}
	#about-us #bar {
		transform: translate(-50%, 258px) rotate(0deg)
	}
	#about-us section {
		padding-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 200px;
	}
	#about-us section p {
		padding: 0px;
	}
	#about-us section > img {
		width: 280px;
	}
	#roshambash {
		padding: 0px 0px 240px 0px;
	}
	#roshambash .bg #white-paralelogram {
		display: none;
	}
	#roshambash .bg #box {
		display: block;
	}
	#roshambash section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 150px 0px 0px 0px;
		gap: 40px;
	}
	#roshambash-pics {
		width: 400px;
		height: 400px;
	}
	#roshambash-text {
		align-items: center;
		gap: 20px;
	}
	#stop-the-slop {
		padding-bottom: 390px;
	}
	#stop-the-slop #bar h2 {
		font-size: 2.87em;
	}
	#stop-the-slop #bar h1 {
		font-size: 5.74em;
	}
	#stop-the-slop #pic1 {
		width: 111px;
		transform: translate(calc(-50% + 0px), 710px);
	}
	#stop-the-slop #pic2 {
		width: 77px;
		transform: translate(calc(-50% + 449px), -178px);
	}
	#stop-the-slop #pic3 {
		width: 443px;
		transform: translate(calc(-50% - 22px), 776px);
	}
	#stop-the-slop #bar {
		transform: translate(-50%, 269px) rotate(0deg)
	}
	#stop-the-slop section {
		padding-top: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 257px;
	}
	#stop-the-slop section p {
		padding: 0px;
	}
	#stop-the-slop section > img {
		width: 280px;
	}
}
@media (max-width: 1030px) {
	#about-us {
		padding: 0px 0px 75px 0px;
	}
	#about-us #pic1 {
		display: none;
	}
	#about-us #pic2 {
		transform: translate(calc(-50% + 185px), -30px);
	}
	#about-us #pic3 {
		display: none;
	}
	.buttons {
		justify-content: center;
	}
	#stop-the-slop #pic2 {
		transform: translate(calc(-50% + 185px), -30px);
	}
	#stop-the-slop #pic3 {
		display: none;
	}
}
@media (max-width: 790px) {
	#squig5 {
		height: 250px;
	}
	#stop-the-slop #pic1 {
		transform: translate(calc(-50% + 0px), 760px);
	}
}
@media (max-width: 660px) {
	#squig1 {
		width: 112px;
		transform: translate(92px, 36px);
	}
	#squig2 {
		width: 144px;
		transform: translate(-231px, 33px);
	}
	#squig3 {
		width: 31px;
		transform: translate(139px, 25px);
	}
	#squig4 {
		width: 74px;
		transform: translate(-204px, 11px);
	}
	#squig5 {
		height: 200px;
	}
	#splashgames {
		padding: 0px 30px 0px 30px;
		line-height: 55px;
	}
	#splash .center-column .logo-text {
		line-height: 55px;
	}
	#splash .center-column h2:nth-child(2) {
		padding: 0px 0px 0px 0px;
		line-height: 35px;
	}
	#splash .center-column h4 {
		line-height: 45px;
	}
	#about-us #bar {
		transform: translate(-50%, 200px) rotate(0deg);
	}
	#about-us #bar h2 {
		line-height: 50px;
	}
	#about-us #bar h1 {
		line-height: 90px;
		padding-bottom: 0px;
	}
	#about-us #pic1 {
		display: none;
	}
	#about-us #pic2 {
		width: 47px;
		transform: translate(calc(-50% + 131px), -89px);
	}
	#about-us section {
		padding: 30px 0px 0px 0px;
		gap: 170px;
	}
	#about-us section > img {
		width: 200px;
	}
	#roshambash {
        padding: 0px 0px 170px 0px;
    }
	#roshambash .bg #box {
		height: 610px;
	}
	#roshambash-pics {
		width: 300px;
		height: 300px;
	}
	#roshambash-text {
		gap: 23px;
	}
	#roshambash section {
        gap: 40px;
    }
	#stop-the-slop {
		padding-bottom: 250px;
	}
	#stop-the-slop #bar {
		transform: translate(-50%, 200px) rotate(0deg);
	}
	#stop-the-slop #bar h2 {
		line-height: 30px;
		padding-top: 10px;
	}
	#stop-the-slop #bar h1 {
		line-height: 90px;
		padding-bottom: 0px;
	}
	#stop-the-slop #pic1 {
		width: 90px;
		transform: translate(calc(-50% + 0px), 520px);
	}
	#stop-the-slop #pic2 {
		width: 47px;
		transform: translate(calc(-50% + 131px), -89px);
	}
	#stop-the-slop section {
		padding: 30px 0px 0px 0px;
		gap: 170px;
	}
	#stop-the-slop section > img {
		width: 200px;
	}
}
@media (max-width: 460px) {
	#stop-the-slop {
		padding-bottom: 240px;
	}
	#stop-the-slop #pic1 {
		transform: translate(calc(-50% + 0px), 560px);
	}
}
@media (max-width: 380px) {
	#roshambash-text > h2 {
		padding-right: 5px;
		padding-left: 5px;
	}
}
@media (max-width: 370px) {
	#about-us #bar h2:nth-child(2) {
		font-size: 2.2em;
	}
}