body {
	background-color: #56a9e9;
}
main {
	gap: 27px;
}
#tea-and-cookies {
	position: relative;
	display: flex;
	flex-direction: column;
  	align-items: center;
}
#tea-and-cookies > p {
	text-align: center;
}
.third {
	justify-content: center;
	flex: 1 0 auto;
}
#cookie {
	margin: 64px 0px 64px 0px;
	position: relative;
	background-color: #ffffff;
	width: 250px;
	height: 250px;
}
#cookie #cookie-txt-container {
	overflow: hidden;
	height: 100%;
}
#cookie #cookie-txt {
	position: relative;
	left: 50%;
    transform: translate(-50%, 0px);
	height: 100%;
	width: 500px;
	text-align: center;
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
}
#cookie #l-cookie {
	position:absolute;
	width: 217px;
	top:50%;
	left: 0px;
	transform: translate(-65px, calc(-50% - 0px));
}
#cookie #r-cookie {
	position:absolute;
	width: 217px;
	top:50%;
	right: 0px;
	transform: translate(65px, calc(-50% - 1px));
}
#cookie.open {
	animation: cookie-open 666ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cookie-open {
	from {
		width: 250px;
	}
	to {
		width: 800px;
	}
}
@media (max-width : 1746px) {
	#cookie {
		margin: 64px 0px 64px 0px;
		position: relative;
		background-color: #ffffff;
		width: 150px;
		height: 150px;
	}
	#cookie #cookie-txt {
		width: 620px;
	}
	#cookie #l-cookie {
		width: 150px;
		transform: translate(-57px, calc(-50% - 0px));
	}
	#cookie #r-cookie {
		width: 150px;
		transform: translate(57px, calc(-50% - 1px));
	}
}
@media (max-width : 734px) {
	#banner {
		font-size: 18px;
	}
}
@media (max-width: 660px) {
	#cookie {
		margin: 64px 0px 64px 0px;
		width: 100px;
		height: 100px;
	}
	#cookie #cookie-txt {
		width: 280px;
	}
	#cookie #l-cookie {
		width: 100px;
		transform: translate(-38px, calc(-50% - 0px));
	}
	#cookie #r-cookie {
		width: 100px;
		transform: translate(38px, calc(-50% - 1px));
	}
	@keyframes cookie-open {
		from {
			width: 100px;
		}
		to {
			width: 400px;
		}
	}
	.spacing {
		height: 80px;
	}
}