/* Note: Emma did the HTML and CSS, she has previous knowledge about HTML+CSS from Johanna (Graphic Design Program)
	- Tammy
*/

/*text*/

h2 {
	font-family: "captain-comic", sans-serif;
	font-size: 50px;
	color: rgb(44, 44, 89);
	padding-left: 2%;
	position: relative;

}

/* tank and screen layout */

.container {
	padding: 0px 10px;

	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.card {
	display: flex;
	flex-direction: column;

	width: 1200px;
	min-width: 1200px;
	height: calc(768px + 120px);
	max-height: calc(768px + 120px);
}

.tank {
	height: 90%;
	width: 100%;

	overflow: hidden;

	display: grid;
	grid-template-rows: 20% 20% 20% 20% 20%;
	grid-template-columns: 20% 20% 20% 20% 20%;

	background-color: rgb(62, 62, 62);
	background-image: url(images/tank/tank.png);
	background-size: cover;

	image-rendering: pixelated;
}

/* fish */

.fishLocation {
	height: 100%;
	grid-column: 3;
	grid-row: 3;
	place-self: center;
	cursor: pointer; /* Make it clear it's clickable */
}

.fishEgg {
	height: 75%;
	animation: MoveUpDownEgg 3s linear infinite;
	position: relative;
	opacity: 1;
	z-index: 0;
	left: 127px;
}

@keyframes MoveUpDownEgg {
	0%,
	100% {
		bottom: 0;
	}
	50% {
		bottom: 100px;
	}
}

/* SHRIMP */
.shimpo {
	grid-column: 6;
	grid-row: 4;
}

.clean_animation {
	position: relative;
	animation: MoveShrimp 4s linear;
}

@keyframes MoveShrimp {
	from {
		right: -15px;
	}
	to {
		right: 1800px;
	}
}

/* Food */
.feed {
	display: grid;
	grid-row: 1;
	grid-column: 3;
}

.fishFood {
	position: absolute;
	top: -65%;
	height: 100%;
}

.feed_animation {
	position: relative;
	animation: moveFood 2.5s linear;
	animation-timing-function: ease-in-out;
}

@keyframes moveFood {
	from {
		top: -30%;
	}
	to {
		top: 250px;
	}
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* pet */
.pet {
	display: grid;
	grid-row: 1;
	grid-column: 3;
}

.hand {
	height: 100%;
	position: absolute;
	top: -190%;
}

.hand_animation {
	animation: moveHand 2.5s linear;
	position: relative;
}

@keyframes moveHand {
	0%,
	100% {
		top: -160%;
	}
	40%,
	50% {
		top: 20px;
	}
	45% {
		top: 5px;
	}
}

/* stat ui */

.uiPannel {
	width: 100%;
	height: 100%;
	background-size: contain;
	display: grid;
	grid-column: 1 / 6;
	grid-row: 2;
	z-index: 150;
	visibility: hidden;
}

.health {
	width: 100%;
	height: 75%;
	display: flex;
	background-image: url("images/ui/ui-bg.png");
}

.happiness {
	width: 100%;
	height: 75%;
	display: flex;
	grid-row: 3;
	background-image: url("images/ui/ui-bg2.png");
	transform: translate(0%, 60%);
}

.hunger {
	width: 100%;
	height: 75%;
	display: flex;
	grid-row: 3;
	background-image: url("images/ui/ui-bg3.png");
	transform: translate(0%, 120%);
}

.statIcon {
	height: 90%;
}

.ui-show {
	visibility: visible;
}

/* buttons */

.buttonInterface {
	height: 100%;
	width: 100%;
	margin-top: auto;
	display: flex;
	gap: 150px;
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row: 5;
	justify-content: center;
}

.button {
	width: 150px;
	height: 100%;
	min-height: 100px;
	visibility: hidden;
	transition: 0.01s;
}

.button:active {
	transform: translateY(5%);
	filter: brightness(0.5) saturate(3) hue-rotate(-20deg);
}

.button-hide{
	display: none;
}

.buttonbubble {
	height: 90%;
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	animation: MoveUpDownButton 5s linear infinite;
	position: relative;
	left: 0;
	bottom: 0;
}

.resetbutton {
	display: grid;
	grid-column: 3;
	grid-row: 5;
	justify-content: center;
}

.resetbubble {
	display: none;
	justify-content: center;
	width: 75%;
	margin-top: -4%;
	margin-left: 12%;
	animation: MoveUpDownButton 5s linear infinite;
	position: relative;
	left: 0;
	bottom: 0;
}

@keyframes MoveUpDownButton {
	0%,
	100% {
		bottom: 0;
	}
	50% {
		bottom: 25px;
	}
}