/*links*/
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Orbitron:wght@500&family=Press+Start+2P&display=swap');

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

main> :not(nav) {
	margin: 5vh 8vw 5vh 8vw;
}

@media screen and (min-width: 500px) {
	main> :not(nav) {
		margin: 5vh 9vw 5vh 9vw;
	}
}

@media screen and (min-width: 1000px) {
	main> :not(nav) {
		margin: 6vh 10vw 6vh 10vw;
	}
}

img {
	max-width: 100%;
	display: block;
}

.iframe-wrapper {
	width: 80vw;
	max-width: 600px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}

.iframe-wrapper iframe {
	width: 80%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: none;
	display: block;
	margin: 1rem auto;
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 2vw 2vw 0 2vw;
}

/*a No-Scroll, Screen-Fitting Website, got from ChatGPT, prompt: how can I create a website that does not scroll (adapt to phone screen)*/

html,
body {
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	height: 100%;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*no up and down arrows in the number input field, from GPT*/
input[type="number"] {
	appearance: none;
	-moz-appearance: textfield;
	-webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

button {
	padding: 0.2rem 1rem;
	border: 1px solid #333;
	border-radius: 5px;
	cursor: pointer;
	background-color: #e9e9e9;
}

button:hover {
	background-color: #3b3b3b;
	color: #ffffff;
}

button:active {
	transform: scale(0.95);
}

/*typography*/
.chat-robot p,
.chat-robot-reveal p {
	font-family: "Press Start 2P", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.55rem;
	line-height: 1.5;
}

h1 {
	font-family: "Bungee", sans-serif;
	font-size: 1rem;
}

.web-title {
	font-family: "Bungee", sans-serif;
	font-size: 1.5rem;
}

h2 {
	font-family: "Bungee", sans-serif;
	font-size: 0.8rem;
}

nav,
button,
.hidden-link,
.generate-mystery-recipe-button,
.time-up-popup p,
::placeholder {
	font-family: "Orbitron", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.8rem;
	text-transform: lowercase;
}

nav a {
	text-decoration: none;
	color: black;
	transition: transform 0.2s ease;
}

nav a:hover {
	transform: scale(1.1);
}

input[type="number"] {
	font-family: "Orbitron", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	text-transform: lowercase;
}

.toolkit-item p,
.volume-convert-container p {
	font-family: "Orbitron", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.75rem;
	text-align: center;
	max-width: 75px;
}

@media screen and (min-width: 500px) {

	.chat-robot p,
	.chat-robot-reveal p {
		font-size: 0.65rem;
	}

	h1 {
		font-size: 1.25rem;
	}

	h2 {
		font-size: 1rem;
	}

	.web-title {
		font-size: 1.75rem;
	}

	nav,
	button,
	.hidden-link,
	.generate-mystery-recipe-button,
	.time-up-popup p,
	::placeholder {
		font-size: 0.85rem;
	}


	.toolkit-item p,
	.volume-convert-container p {
		font-size: 0.7rem;
	}
}

@media screen and (min-width: 1000px) {

	.chat-robot p,
	.chat-robot-reveal p {
		font-size: 0.75rem;
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.2rem;
	}

	.web-title {
		font-size: 2rem;
	}

	nav,
	button,
	.hidden-link,
	.generate-mystery-recipe-button,
	.time-up-popup p,
	::placeholder {
		font-size: 1rem;
	}

	.toolkit-item p,
	.volume-convert-container p {
		font-size: 0.8rem;
	}
}


/*Homepage*/
/*make the credit appear when info icon is clicked, GPT prompt:I want to be able to click an img icon "info icon" in the navigation, and then the right side of navigation saying "made by: me" appears with an animation that makes the sentence appear from left to right*/
.nav-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0 1vw 0 1vw;
	height: 8vh;
}

.info-icon {
	cursor: pointer;
}

.credit-text.hidden {
	opacity: 0;
	width: 0;
	overflow: hidden;
}

.credit-text {
	font-size: 0.7rem;
	white-space: nowrap;
	transition: all 0.5s ease;
	opacity: 1;
	width: 190px;
}

/*resize for credit text*/
@media screen and (min-width: 500px) {
	.credit-text {
		font-size: 0.8rem;
		width: 200px
	}
}

@media screen and (min-width: 1000px) {
	.credit-text {
		font-size: 1rem;
		width: 250px
	}
}

/*here is the layout*/
.home-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.menu-container {
	display: flex;
	flex-direction: row;
	height: 30vh;
	display: flex;
	gap: 5vw;
	justify-content: center;
	align-items: center;
	margin: 2vh 0 2vh 0;
	width: 100vw;
}

.menu-container a {
	width: 50vw;
	height: auto;
}

/*making the menu align up and down*/
.menu-recipe {
	align-self: flex-start;
}

.menu-toolkit {
	align-self: flex-end;
}

/*menu hover effect, got from GPT: hover zoom in effect*/
.menu-recipe,
.menu-toolkit {
	transition: transform 0.2s ease;
}

.menu-recipe:hover {
	transform: scale(1.1);
}

.menu-toolkit:hover {
	transform: scale(1.1);
}

/*menu click effect, GPT: click flicker effect*/
@keyframes flicker {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}

.menu-recipe:active {
	animation: flicker 0.15s ease;
}

.menu-toolkit:active {
	animation: flicker 0.15s ease;
}

/*prepare the menu container to appear after clicking, method from ChatGPT, prompt: how to make a html container to appear when I click on an img, I use class tags*/
.home-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.menu-container {
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.5s ease;
	width: 100vw;
	max-height: 100vh;
	gap: 5vw;
	padding: 0 5vw 0 5vw;
}

.menu-container.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.intro-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	gap: 0.5rem;
}

.intro-container img {
	max-width: 100%;
	height: auto;
}

.web-name {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	flex: 1;
}

.thought-bubble-container {
	position: absolute;
	width: 25vw;
	max-width: 75px;
	top: 0px;
	right: 150px;
	text-align: center;
}

/*robot jump on hover, GPT: recommend some hover effects for my robot to show the menu*/
.robot-click {
	transition: transform 0.2s ease, filter 0.2s ease;
}

.intro-container:hover .robot-click {
	transform: translateY(-8px);
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
	cursor: pointer;
}

/*a click feedback on the robot, from GPT too*/
.intro-container:active .robot-click {
	transform: translateY(-3px) scale(0.97);
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}


.thought-bubble {
	width: 100%;
	max-width: 75px;
	height: auto;
}

@media screen and (min-width: 500px) {
	.intro-container {
		flex-direction: row;
		flex-direction: row-reverse;
		align-items: center;
	}

	.thought-bubble-container {
		right: 150px;
	}

	.web-name {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: left;
	}

	.menu-container {
		max-width: 500px;
	}
}

@media screen and (min-width: 1000px) {
	.menu-container {
		max-width: 600px;
	}
}

/*AI Recipe Generator PAGE, with help of Claude.ai for aligning items*/
.ai-recipe-generator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.content-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}

.chat-robot,
.chat-robot-reveal {
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	justify-content: center;
	margin-top: 5vh;
	width: 100%;
}

/*background bubble for the chat robot*/
.chat-robot p {
	background-color: #d9d9d9;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

@media screen and (min-width: 500px) {
	.chat-robot {
		flex-direction: row;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: flex-end;
	}

}

/*chat box for user input, with help of GPT*/
.chat-log {
	width: 100%;
	height: auto;
	max-height: 40vh;
	overflow-y: auto;
	padding-bottom: 1rem;
	font-size: 0.75rem;
	padding: 1rem;
	box-sizing: border-box;
	margin-top: auto;
	margin-bottom: 5vh;
}

.user-message,
.bot-message {
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	font-family: "Orbitron", sans-serif;
	font-size: 0.75rem;
	border-radius: 1rem;
}

.user-message {
	background-color: #e9e9e9;
	text-align: right;
}

.bot-message {
	font-family: "Orbitron", sans-serif;
	text-align: left;
	font-size: 0.7rem;
	line-height: 1.5;
	background-color: #d9d9d9;
	border-radius: 1rem;

	/*to make sure the chat box does not change size when the text is too long*/
	word-wrap: break-word;
	/* crucial to prevent overflow */
	max-width: 100%;
	/* prevents overflow of chat-log container */
}

.recipe-text {
	line-height: 1.6;
}

.generate-mystery-recipe-button {
	cursor: pointer;
	padding: 0.2rem 1rem;
	border-radius: 5px;
	text-align: center;
	text-transform: lowercase;
	text-decoration: none;
	color: #000;

	background-color: #e0e0e0;
	border: 2px solid #000;
	box-shadow: 2px 2px 0px #000;
	letter-spacing: 2px;
	/*to make the mystery button more fun*/
	animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}


.generate-mystery-recipe-button:hover {
	border: 2px solid #3b3b3b;
	background-color: #3b3b3b;
	color: #FFFFFF;
}

.generate-mystery-recipe-button:active {
	transform: scale(0.95);
}

/*to style the ai recipe and create a copy button, 2 codes from GPT*/
.bot-message p {
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.copy-recipe-button {
	margin-top: 1rem;
	padding: 0.4rem 1rem;
	font-family: 'Orbitron', sans-serif;
	font-size: 0.7rem;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	background-color: #ffffff;
	color: #000;
	transition: background-color 0.2s ease;
}

.copy-recipe-button:hover {
	background-color: #3b3b3b;
	color: #FFFFFF;
}

.copy-recipe-button:active {
	transform: scale(0.95);
}

.hidden-link {
	display: none;
	border: #000;
}

.bot-message strong {
	font-weight: 700;
	font-size: 0.8rem;
}

.response-box {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.chat-user {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

::placeholder {
	padding: 0rem 0.5rem;
}

.user-input {
	padding: 0.2rem 0.5rem;
	background-color: #ffffff;
	box-shadow: 2px 2px 0px #888;
	border: 2px solid #000;
	font-size: 16px;
	border-radius: 4px;
	outline: none;
	width: clamp(100px, 60vw, 400px);
}

input[type="text"] {
	font-family: "Orbitron", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.75rem;
	text-transform: lowercase;
}

/*for chatting functions*/
.send-btn {
	cursor: pointer;
	background: #e0e0e0;
	border: 2px solid #000;
	box-shadow: 2px 2px 0px #000;
}


/*Mystery Box PAGE*/
.mystery-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

.mystery-box {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	margin-bottom: 15vh;
	align-items: center;
	justify-content: center;
}

/*to clear the page after clicking the box*/
.hidden-on-click {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/*to animate the box shaking, GPT: how to make an image shake when clicked*/
@keyframes shake {
	0% {
		transform: rotate(0deg) scale(1);
	}

	10% {
		transform: rotate(-4deg) scale(1.02);
	}

	20% {
		transform: rotate(4deg) scale(1.04);
	}

	30% {
		transform: rotate(-6deg) scale(1.06);
	}

	40% {
		transform: rotate(6deg) scale(1.04);
	}

	50% {
		transform: rotate(-8deg) scale(1.08);
		transform: scale(1.2);
	}

	60% {
		transform: rotate(8deg) scale(1.05);
	}

	70% {
		transform: rotate(-4deg) scale(1.02);
	}

	80% {
		transform: rotate(4deg) scale(1.01);
	}

	90% {
		transform: rotate(-2deg) scale(1.00);
	}

	100% {
		transform: rotate(0deg) scale(5);
	}
}

.shake {
	animation: shake 2.5s ease-in-out;
}


/*Your Mystery Recipe PAGE*/
.reveal-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.recipe-reveal-box p {
	line-height: 1rem;
	height: auto;
	padding: 0.5rem;
}

.recipe-buttons {
	display: flex;
	flex-direction: row;
	margin-top: auto;
	margin-bottom: 10vh;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

@media screen and (min-width: 500px) {
	.chat-robot-reveal {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 20px;
	}

}

/*reveal page "go to source" button*/
.hidden-link {
	cursor: pointer;
	padding: 0.2rem 1rem;
	border-radius: 5px;
	background-color: #E9E9E9;
	color: #000;
	border: 1px solid #000;
	text-align: center;
	text-transform: lowercase;
	text-decoration: none;
	display: inline-block;
}

.hidden-link:hover {
	background-color: #3b3b3b;
	border: 1px solid #3b3b3b;
	color: #FFFFFF;
}

.hidden-link:active {
	transform: scale(0.95);
}

/*Cooking Toolkit PAGE*/
.toolkit-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.toolkit-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
	align-items: center;
	justify-items: center;
	margin-top: auto;
	margin-bottom: 10vh;
}

.toolkit-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(100px, 100%, 250px);
}

.toolkit-item p {
	width: 100%;
	max-width: 200px;
}

/*make the first item start on 2nd column, with help of Claude.ai*/
.toolkit-list .toolkit-item:first-child {
	grid-column: 2;
	grid-row: 1;
}

.toolkit-list .toolkit-item:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}

.toolkit-list .toolkit-item:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

/*toolkit items hover and click feedback*/
.toolkit-item img {
	transition: transform 0.2s ease;
}

.toolkit-item img:hover {
	transform: scale(1.1);
}

.toolkit-item img:active {
	animation: flicker 0.15s ease;
}

@media screen and (min-width: 500px) {
	.toolkit-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10vw;
		margin-top: 15vh;
	}
}


/*Temperature Converter PAGE*/
.temperature-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.temp-convert-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 8vh;
}

.number-container img {
	width: clamp(25px, 10vw, 50px);
}

.thermometer-icon {
	width: clamp(45px, 20vw, 100px);
}

.number-container {
	display: flex;
	margin: auto;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.convert-item {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0 10px 0 10px;
}

.convert-item input {
	width: 35vw;
	max-width: 150px;
	height: 2rem;
	border-radius: 5px;
	padding: 0rem 0.3rem;
}

/*convert hover effect*/
.convert-click {
	transition: transform 0.2s ease;
}

.convert-click:hover {
	transform: scale(1.1);
}

/*convert click effect*/
.convert-click:active {
	transform: scale(0.95);
}

/*Cooking Timer PAGE*/
.cooking-timer-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.timer-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: auto;
	margin-bottom: 5vh;
	width: 100%;
}

.timer-button {
	display: flex;
	flex-direction: row;
	gap: 10vw;
	align-items: center;
	justify-content: center;
	max-width: 300px;
}

.timer-button button {
	padding: 0.2rem 1rem 0.2rem 1rem;
	border-radius: 8px;
	width: clamp(50px, 20vw, 100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1.2;
}

/*to prevent button from showing weird width when stretching*/
@media screen and (min-width: 500px) {
	.timer-button button {
		padding: 0.2rem 0.5rem 0.2rem 0.5rem;
	}

	.timer-button button {
		font-size: 1.2rem;
	}

}

.timer-display {
	display: flex;
	background-color: #d9d9d9;
	padding: 1rem 1rem;
	border-radius: 10px;
	margin: auto;
	font-family: 'orbitron', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	height: 100%;
	min-width: 200px;
}

/*to fix number spacing in timer*/
.timer-text {
	font-family: 'Orbitron', sans-serif;
	font-size: 2rem;
	text-align: center;
}

.timer-text .digit {
	display: inline-block;
	width: 1ch;
	/* Equal visual width */
	text-align: center;
}

.function-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	justify-content: space-between;
	padding: 0 10px 0 10px;
	max-width: 300px;
}

.start-and-pause-buttons {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

/*timer button hover and click effect*/
.timer-button button {
	transition: transform 0.2s ease;
}

.timer-button button:hover {
	transform: scale(1.1);
}

.timer-button button:active {
	transform: scale(0.95);
}

/*different button hover effects by GPT*/
.start-and-pause-buttons img {
	transition: transform 0.2s ease;
}

.start-and-pause-buttons img:hover {
	transform: scale(1.1);
}

.reset-button:hover {
	transform: rotate(180deg);
	transition: transform 0.3s ease;
}

/*function button click effects*/
.function-buttons img:active {
	transform: scale(0.95);
}

@media screen and (min-width: 500px) {
	.timer-button {
		max-width: 500px;
	}

	.timer-display {
		font-size: 4rem;
	}

	.function-buttons {
		max-width: 500px;
	}
}

/*time's up effect, from GPT!*/
/* Popup Base */

.time-up-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	background: hsl(0, 0%, 100%);
	border: 1px solid #000;
	padding: 2rem 1rem;
	text-align: center;
	border-radius: 10px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
	box-sizing: border-box;
	width: 250px;
	max-width: 80vw;
}

/* Popup When Shown */
.time-up-popup.show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}

/* Hidden State */
.hidden-popup {
	display: none;
}

/* Inside Popup */
.time-up-popup h2 {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	animation: popup-bounce 1s ease forwards, robot-jump 2s infinite ease-in-out;
}

/*animation from GPT*/
@keyframes popup-bounce {
	0% {
		transform: translateY(-50px) scale(0.8);
		opacity: 0;
	}

	50% {
		transform: translateY(10px) scale(1.2);
		opacity: 1;
	}

	70% {
		transform: translateY(-5px) scale(1);
	}

	100% {
		transform: translateY(0px) scale(1);
	}
}

/* slow continuous jump while showing */
@keyframes robot-jump {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

.time-up-popup p {
	font-family: "Orbitron", sans-serif;
	margin-top: 0;
	margin-bottom: 1rem;
}

.popup-done-btn {
	padding: 0.3rem 1rem;
	font-family: "Orbitron", sans-serif;
	border-radius: 5px;
	border: 1px solid #000;
	cursor: pointer;
	background-color: #e0e0e0;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.popup-done-btn:hover {
	background-color: #3b3b3b;
	color: #ffffff;
	transform: scale(1.05);
}


/*Voumne Converter PAGE*/
.volume-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.volume-convert-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: auto;
	margin-bottom: 3vh;
}

.volume-convert-unit {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 70vw;
	max-width: 300px;
	gap: 20px;
}

/*make the selected button have a different background color, GPT:can I make the selected units to have darken background
*/
.unit-btn.selected {
	background-color: #333;
	color: white;
	border: 1px solid #000;
	transition: background-color 0.2s ease;
	border-radius: 5px;
}

.volume-convert-number {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 500px) {
	.volume-convert-number {
		gap: 1rem;
	}
}

.volume-convert-input {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	width: 90vw;
	max-width: 300px;
	margin: 0.5rem 0;
}

.volume-convert-input input {
	width: 40vw;
	max-width: 150px;
	height: 2rem;
	padding: 0 0.25rem;
	border-radius: 0.25rem;
}

.volume-convert-input p {
	background-color: #d9d9d9;
	width: 40vw;
	max-width: 120px;
	height: 1.5rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*convert button hover effect*/
.convert-volume-btn {
	width: clamp(30px, 15vw, 50px);
	transition: transform 0.2s ease;
}

.convert-volume-btn:hover {
	transform: scale(1.1);
}

/*convert click effect*/
.convert-volume-btn:active {
	transform: scale(0.95);
}

/*
CSS doesn't allow variables to be used in media
queries just yet, but you can use these values
to help you out.

	--size-xs: 320px;
	--size-sm: 480px;
	--size-md: 768px;
	--size-lg: 1024px;
	--size-xl: 1200px;
*/

/* This uses the same value as --size-xs.
@media screen and (width >=320px) {
	.content-container {
		margin: 0 auto;
		max-width: 768px;
	}
}
	*/

/* for scrolling area inside of the page
	.scroll-box {
		overflow-y: auto;
		max-height: 60vh;
	 }
	 /*