:root {
	--main-border: 0.25em solid #397d96;
	--main-radius: 1.5em;
	--main-padding: 0.25em;
	--main-bg: #d5f1ff;
	--btn-gradient: linear-gradient(
		0deg,
		rgba(158, 203, 227, 1) 0%,
		rgba(158, 211, 233, 1) 20%,
		rgba(192, 231, 246, 1) 100%
	);
	--btn-solid: rgb(151, 192, 209);
}

.container {
	line-height: 1.2em;
	margin: 1em auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-template-areas:
		"banner banner banner banner"
		"side1 stuff stuff side2"
		"side1 stuff stuff side2"
		"side1 buttons buttons side2"
		"side1 footer footer side2";
}

.stuff {
	grid-area: stuff;
}

.contenty {
	border-radius: var(--main-radius);
	border: var(--main-border);
	background-color: var(--main-bg);
}

.contenty p {
	padding: 0.75em;
	text-align: left;
}
.giffy {
  margin: 0 1em 0 0;
  height: 8em;
  display: flex;
  justify-content: flex-end; /* for right alignment */
}


@media only screen and (max-width: 850px) {
	.container {
		align-self: start;
		width: 95% !important;
		margin: 0 auto;
		grid-template-columns: 0.5fr 1fr;
		grid-template-rows: repeat(9, auto);
		grid-template-areas:
			"banner banner"
			"side1 stuff"
			"side1 stuff"
			"side2 side2"
			"footer footer";
	}
	.side2 {
	  display: flex;
	  justify-content: space-around;
	  gap: 1em;
	  flex-wrap: wrap;
	  width: 100%;
	  margin: 0 auto;
	}

	.sidebarcont {
	  flex: 1 1 45%; /* adjusts width and allows wrapping */
	  min-width: 120px; /* optional, prevents it from getting too small */
	  text-align: center;
	}
	.main {
		margin-bottom: 1em;
	}

	.giffy {
		height: 9em !important;
		display: block;
		float: none;
		margin: 0 auto;
	}

	.piccont img {
		max-width: 100%;
		max-height: 20em !important;
	}

	.labeled p {
		font-size: 1em;
		font-family: 'Pixelon';
	}


	.favimg img {
		width: 50%;
	}

	.banimg {
		width: 100%;
	}

}