* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

@keyframes pan-background {
	0% {
	  background-position: 0% 0%;
	}
	100% {
	  background-position: 200% 0%;
	}
  }

@keyframes pan {
	0% {
		transform: translateX(200%);
	}
	100% {
		transform: translateX(-200%);
	}
}

@keyframes spin-pan {
	0% {
		transform: rotate(0deg) translateX(-200%);
	}
	100% {
		transform: rotate(360deg) translateX(-200%);
	}
}

@keyframes blink {
	0%, 47.5%, 52.5%, 100% {
		height: 8px;
		
	}
	50% {
		height: 0;
	}
}

::selection {
	background-color: white;
	color: #FF5757;
}

body {

	--block-size: 2rem;

	width: 100%;
	height: 100vh;

	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;

	cursor: none;
	
	.container {
		position: absolute;

		display: grid;
		grid-template-rows: repeat(var(--rows), 1fr);
		grid-template-columns: repeat(var(--columns), 1fr);
	
		user-select: none;

		>.block {
			width: var(--block-size);
			aspect-ratio: 1;
	
			border: 1px solid rgb(255 255 255 / 1%);
			transition: background-color 1000ms ease-in-out;
			will-change: background-color;
		}

		&.ocean {
			--rows: 0;
			--columns: 0;

			width: 100%;
			height: 100%;

			display: grid;
			grid-template-rows: repeat(var(--rows), 1fr);
			grid-template-columns: repeat(var(--columns), 1fr);

			>.bridge {
				--primary-color: rgba(255, 255, 255, 0.6);
				--secondary-color: #ffffff00;
				--size-checker: 1.5rem;


				position: absolute;
				height: calc(var(--block-size) / 3);
				z-index: 5;

				background-image: linear-gradient(
					45deg,
					var(--primary-color) 0%,
					var(--primary-color) 25%,
					var(--secondary-color) 25%,
					var(--secondary-color) 50%,
					var(--primary-color) 50%,
					var(--primary-color) 75%,
					var(--secondary-color) 75%,
					var(--secondary-color) 100%
				);
				background-size: var(--size-checker) var(--size-checker);
				animation: pan-background 25s linear infinite;

				pointer-events: none;

				&.selected {
					z-index: 6;
					background: 
					repeating-conic-gradient(gray 0% 25%, rgb(158, 158, 158) 0% 50%) 
					  50% / var(--size-checker) var(--size-checker);
					  box-shadow: 0 0 0.5rem 0.25rem rgb(0 0 0 / 20%);
					animation: none;
					height: calc(var(--block-size) / 2);
				}
			}



			>.block {
				
				background-color: #69C0FF;
			
				&.lighter {
					background-color: #6CC3FF;
				}

				&.movement {
					transition-duration: 0ms;
					background-color: #93d2fd;
				}
			
				&:hover {
					transition-duration: 0ms;
					background-color: #a7dcff;
				}
			
				&.grass,
				&.flower{
					z-index: 3;
				}
				&.grass {
					background-color: #76B454;

					&.high {
						
						border: calc(var(--block-size) / 4) solid #76B454;
						background-image: linear-gradient(
							45deg,
							#76B454 0%,
							#76B454 25%,
							#70AF4E 25%,
							#70AF4E 50%,
							#76B454 50%,
							#76B454 75%,
							#70AF4E 75%,
							#70AF4E 100%
						);
						background-size: 50% 50%;
						animation: pan-background 5s linear infinite;
					}

					&.low {
						background-color: #70af4e;
					}
				}

				&.flower {

					border: calc(var(--block-size) / 3) solid #76B454;

					&.red { background-color: #EE796B; }
					&.blue { background-color: #9E85BE; }
					&.yellow { background-color: #B4E2F9; }
					&.purple { background-color: #EC5AA3; }
					&.orange { background-color: #FDDA76; }
				}
			
				&.port {
					border: none!important;
					background-color: gray!important;
					background-image: none!important;

					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
					font-size: 1.5rem;
									
					font-family: "Itim", serif;
					font-weight: 400;
					font-style: normal;

					&:not(.support) {
						z-index: 7;
					}

					&.support {
						border: calc(var(--block-size) / 5) solid #76B454!important;
						background-color: #5a5a5a!important;
					}
					
					&.selected {
						background-color: #929292!important;
					}
				}
			}
		}

		&.sun {
			--rows: 4;
			--columns: 4;

			display: grid;
			grid-template-rows: repeat(var(--rows), 1fr);
			grid-template-columns: repeat(var(--columns), 1fr);

			position: absolute;
			pointer-events: none;



			z-index: 100;

			animation: spin-pan 300s linear infinite;

			>.block {

				width: calc(var(--block-size) * 2.5);

				&.lighter {
					background-color: rgba(254, 248, 212, 0.15);

					&.darker {
						background-color: rgba(254, 248, 212, 0.075);
					}
				}
			}
		}

		&.sky {
			--rows: 10;
			--columns: 40;

			position: absolute;
			bottom: 5%;

			display: grid;
			grid-template-rows: repeat(var(--rows), 1fr);
			grid-template-columns: repeat(var(--columns), 1fr);

			pointer-events: none;

			z-index: 50;
			animation: pan 90s linear infinite;

			&.no-pan {
				animation: none;
			}
			

			>.block {

				border: 0;

				/* background-color: rgb(255 255 255 / 5%); */

				transition: none;
			
				/* &.lighter {
					background-color: rgb(255 255 255 / 25%);
				} */
			
				&.movement {
					transition-duration: 0ms;
					background-color: #4b85d1;
				}
			
				/* &:hover {
					transition-duration: 0ms;
					background-color: #83ade3;
				} */
			
				&.light1 {
					background-color: rgb(255 255 255 / 25%);
				}

				&.light2 {
					background-color: rgb(255 255 255 / 50%);
				}

				&.light3 {
					background-color: rgb(255 255 255 / 75%);
				}
			}

		}
	}

	>.radial-gradient {
		content: '';
		position: "absolute";
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		pointer-events: none;
		background-image: radial-gradient(
			circle,
			transparent 75%,
			#003a9060
			);
		z-index: 100;
	}

	>.boat {
		position: absolute;
		width: 1rem;
		height: 1rem;
		background-color: #FF5757;
		border: 2px solid #ffffff;
		pointer-events: none;
		z-index: 1000;

		box-shadow: 0 0 0.5rem 0.25rem rgb(255 255 255 / 50%);

		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 0.1rem;
		flex-direction: row;

		>.eye {
			background-color: white;
			width: 2px;
			height: 8px;

			animation: blink 5s infinite;
		}

	}

	.keybinds {

		--height: 20%;
		--radius: 2rem;

		--box-shadow: -0.15rem 0.15rem 0 0.15rem rgb(255 255 255 / 5%);

		--shown: rgb(255 255 255 / 10%);
		--detail: rgb(255 255 255 / 15%);
		--activated: rgb(255 255 255 / 20%);

		position: absolute;
		bottom: calc(-1 * (var(--height) - 1%));
		min-width: 960px;
		width: 50%;
		height: var(--height);
		z-index: 999;
		transition: bottom 500ms ease-in-out;

		border: 0.5rem solid #1E1E1E;
		background-color: #232323;

		box-shadow: 0 0 4rem 0.5rem rgb(0 0 0 / 50%);

		display: flex;
		flex-direction: column;


		font-family: "Itim", serif;
		font-weight: 400;
		font-style: normal;
						  

		&:hover {
			bottom: -1%;
		}

		>.credits {
			flex: 1;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			background-color: #3b3b3b;
			color: white;

			>a {
				margin-left: 0.2rem;
				margin-right: 0.2rem;
				color: #FF5757;
			}
		}

		>.keys {
			flex: 4;

			display: flex;
			flex-direction: row;

			>div {
				flex: 1;
	
	
				display: flex;
				flex-direction: column;
	
				border-left: 4px solid #3b3b3b;
				border-right: 4px solid #3b3b3b;
	
				&:first-child {
					border-left: none;
				}
	
				&:last-child {
					border-right: none;
				}
	
				&:nth-child(odd) {
					background-color: rgb(255 255 255 / 5%);
				}
	
				>span,
				>div {
					flex: 1;
	
					position: relative;
				}
	
				>span {
					
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-size: 1.25rem;
					
	
					
				}
	
				>div {
					background-color: rgb(255 255 255 / 1%);
				}
	
				&.mouse >div {
					display: flex;
					justify-content: center;
					align-items: center;
	
					--gap: 4px;
	
					>div {
						display: flex;
						flex-direction: column;
	
						
						width: 25%;
						height: 80%;
						row-gap: var(--gap);
		
						.bottom {
							flex: 2;
							background-color: var(--shown);
							box-shadow: var(--box-shadow);
	
							&:hover {
								background-color: var(--activated);
							}
						}
	
						.top {
							flex: 1;
							display: flex;
							column-gap: var(--gap);
	
							.left {
								flex: 3;
								background-color: var(--shown);
							}
	
							.middle {
								flex: 1;
								background-color: var(--shown);
							}
	
							.right {
								flex: 3;
								background-color: var(--shown);
							}
	
							>* {
								box-shadow: var(--box-shadow);
							}
	
							>*.detail {
								background-color: var(--detail);
							}
	
							>.pressed,
							>*:hover {
								background-color: var(--activated);
							}
						}
	
					}
					
				}
	
				&.space >div {
	
					display: flex;
					justify-content: center;
					align-items: center;
	
					>div {
						width: 80%;
						height: 30%;
						background-color: var(--shown);
	
						box-shadow: var(--box-shadow);
	
						border-radius: 0.25rem;
					}
	
					&.pressed,
					&:hover {
						>div {
							margin-bottom: -4px;
							background-color: var(--activated);
						}
					}
					
				}
			}
		}
	}
}