* {
	margin: 0px;
	padding: 0px;
}

body {
	display: flex;
	justify-content: center;
	background-color: rgb(70, 102, 163);
	height: 100vh;
}

header {
	display: flex;
	align-items: center;
	margin: 20px 0px 0px 0px;
	font-size: clamp(1.2rem, 3vw, 4rem);
	font-family:  VT323, sans-serif,"Comic Sans MS";
	justify-content: center;
  flex-direction: column;
}

.main {
	display: flex;
	width: 90vw;
	height: 100%;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.responseContainer {
	display: flex;
	background-color: white;
	justify-content: center;
	align-items: center;
	border-radius: 80px;
	padding: 35px;
  margin-bottom: 1vh;
	width: 100%;
	max-width: 400px;
	position: relative;
	left: 70px;
	top: 30px;
	max-height: max-content;
}

#response {
	width: 100%;
	font-size: 1.2rem;
	/* max-height: 500px; */
	/* overflow: auto; */
}

#hotdogWade {
	width: 350px;
	height: auto;
}


#tacoBellDog {
	width: 75px;
	height: auto;
	position: relative;
	left: -155px;
	top: 130px;
}

.wadeContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px 0px 0px 50px;
}

.wadeContainer > a:hover {
	cursor: pointer;
}

#wain {
	width: 5vw;
	min-width: 50px;
	max-width: 75px;
	height: auto;
	position: fixed;
	bottom: 0;
	right: 0;
}

/* Hidden element animation for message */

.hidden-element {
	display: none;
	opacity: 0;
}

.fadeInAnimation {
	animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media screen and (max-width: 1000px), (max-height: 900px) {
	header {
		margin: 10px 0px 0px 0px;
	}
	.main {
		gap: 10px;
	}
	/* .responseContainer { */
	/* 	position: static; */
	/* 	/* max-width: 75%; */ */
	/* 	padding: 30px; */
	/* } */
	/* #response { */
	/* 	font-size: 1rem; */
	/* 	width: 100%; */
	/* } */
}

@media screen and (max-height: 900px) {
	/* #response { */
	/* 	max-height: 140px; */
	/* } */
}
@media screen and (max-height: 750px) {
	#hotdogWade {
		width: 250px;
	}
	.wadeContainer a:last-child {
		top: 90px;
		left: -100px;
	}
}

@media screen and (max-width: 500px) {
	#hotdogWade {
		width: 200px;
	}
	.wadeContainer a:last-child {
		top: 70px;
		left: -90px;
	}
	#tacoBellDog {
		width: 60px;
	}
}