/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of CSS Reset */


/* Use border-box everywhere to keep sizing predictable */
*, *::before, *::after {
	box-sizing: border-box;
}



.comic-relief-regular {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-bold {
  font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}


.sekuya-regular {
  font-family: "Sekuya", system-ui;
  font-weight: 400;
  font-style: normal;
}

body {
	background-color: rgb(73, 162, 180);
	background-image: url('basic.png');

}

.LOGO {
	margin-right:50px;
	margin-left:450px;
}

.LOGO img {
	width:600px;
	height:200px;
	transition: transform .28s ease, box-shadow .28s ease;
}

.LOGO img:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

h2 {
	display: block;
	margin: 0 0 12px 0;
	padding: 10px 14px;
	background-color: rgb(8, 58, 78);
	border: 5px solid rgb(84, 228, 76);
	font-family: "Sekuya", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	color: rgb(99, 188, 81);
	text-align: left;
}

a {
	text-decoration: none;
	color: rgb(99, 188, 81);
	font-size: 20px;
	font-family: "Sekuya", system-ui;
	font-weight: 400;
	font-style: normal;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 6px;
	transition: background-color .22s ease, color .18s ease, transform .12s ease, box-shadow .22s ease;
}

a:hover,
a:focus {
    background-color: rgba(99,188,81,0.08);
    color: rgb(0, 234, 255);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    outline: none;
}

a:active {
    transform: translateY(0);
}

nav {
	background-color:rgb(8, 58, 78);
	padding:15px;
	border: 5px solid rgb(84, 228, 76);
}

.navlinks {
	display:flex;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
	justify-content:space-evenly;
}

h1 {
	text-align:center;
	font-size:60px;
	margin-top:20px;
	margin-bottom:20px;
  	font-family: "Sekuya", system-ui;
  	font-weight: 400;
  	font-style: normal;
	color: rgb(99, 188, 81);
	background-color:rgb(8, 58, 78);
	border: 5px solid rgb(119, 255, 0);
	padding:10px;
}

main {
	display: grid;
	grid-template-areas:
		"img1 img2"
		"grandpa BEN"
		"h2 h2"
		"para1 para1"
		"cursed cursed"
		"img3 img3"
		"para2 para2"
		"para3 para3";

	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	row-gap: 40px;
	column-gap: 50px;
	/* center grid items in their cells */
	justify-items: center;
	align-items: center;
}

section {
	background: linear-gradient(180deg, rgba(6,45,54,0.96), rgba(8,58,78,0.98));
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	/* match the H1 border for visual consistency */
	border: 5px solid rgb(119, 255, 0);
	max-width: 1200px;
	/* ensure the section is wide but leaves breathing room on the sides */
	width: min(1200px, calc(100% - 96px));
	margin: 36px auto;
	padding: 32px;
	/* span both grid columns so margin:auto centers the section in the viewport */
	grid-column: 1 / -1;
	transition: box-shadow .35s ease, transform .35s ease;
}

section:hover {
	box-shadow: 0 20px 50px rgba(0,0,0,0.32);
	transform: translateY(-4px);
}

.Snake img {
	width:300px;
	height:300px;
	margin:0;
	display:block;
	border: 10px solid rgb(62, 37, 5);
}

.Snake {
	grid-area: img1;
	justify-self: center;
}

.Lyra {
	grid-area: img2;
	justify-self: center;
}

.Lyra img {
	width:300px;
	height:300px;
	margin:0;
	display:block;
	border: 10px solid rgb(3, 39, 43);
}

.Grandpa img {
	width:300px;
	height:300px;
	margin:0;
	display:block;
	border: 10px solid rgb(43, 3, 39);
}

.Grandpa {
	grid-area: grandpa;
	justify-self: center;
}

.BEN img {
	width:300px;
	height:300px;
	margin:0;
	display:block;
	border: 10px solid rgb(6, 43, 3);
}

.BEN {
	grid-area: BEN;
	justify-self: center;
}

/* Flex row for character images */
.images-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	grid-column: 1 / -1; /* span full grid width */
}

.images-row .Snake,
.images-row .Lyra,
.images-row .Grandpa,
.images-row .BEN {
	justify-self: auto; /* flex controls alignment ! */
}

.images-row img {
	display: block;
	width: 300px;
	height: 300px;
}

/* Middle row: para1 | derp image | para2 */
.mid-row {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	justify-content: space-between;
	grid-column: 1 / -1; /* span full width of the grid */
	padding: 10px 20px;
}

.mid-row .para1,
.mid-row .para2 {
	flex: 1 1 280px;
	max-width: 480px;
}

.mid-row .para1 p,
.mid-row .para2 p {
	margin: 0;
}

.mid-row .para1 h2 {
	font-size: 24px;
	margin: 0 0 8px 0;
	font-family: "Sekuya", system-ui;
	color: rgb(99, 188, 81);
	text-align: left;
}

.Snake img,
.Lyra img,
.Grandpa img,
.BEN img,
.derp img,
.cursed img,
.images-row img {
	transition: transform .3s ease, box-shadow .3s ease;
	border-radius: 8px;
}

.Snake img:hover,
.Lyra img:hover,
.Grandpa img:hover,
.BEN img:hover,
.derp img:hover,
.cursed img:hover,
.images-row img:hover {
	transform: scale(1.03);
	box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.para1 {
	grid-area: para1;
}

.para1 p {
	font-size:20px;
	margin: 0 20px;
	font-family: "Comic Relief", system-ui;
	font-weight: 700;
	font-style: normal;
	color: rgb(99, 188, 81);
	background-color:rgb(8, 58, 78);
	border: 5px solid rgb(119, 255, 0);
	padding:15px;
	text-align: center;
}

.para2 {
	grid-area: para2;
}

.para2 p {
	font-size:20px;
	margin: 0 20px;
	font-family: "Comic Relief", system-ui;
	font-weight: 700;
	font-style: normal;
	color: rgb(99, 188, 81);
	background-color:rgb(8, 58, 78);
	border: 5px solid rgb(119, 255, 0);
	padding:15px;
	text-align: center;
}

.para3 {
	grid-area: para3;
	margin-top: 8px; /* tighten space above para3 */
}

.para3 p {
	font-size:20px;
	margin-left:20px;
	margin-right:100px;
	font-family: "Comic Relief", system-ui;
	font-weight: 700;
	font-style: normal;
	color: rgb(99, 188, 81);
	background-color:rgb(8, 58, 78);
	border: 5px solid rgb(119, 255, 0);
	padding:15px;
	text-align: center;
}

.derp img {
	width:300px;
	height:300px;
	margin:20px auto; /* center horizontally and give vertical spacing */
	display:block;
	border: 10px solid rgb(4, 56, 74);
}

.derp {
	grid-area: img3;
	justify-self: center; /* center across the spanned columns */
}

footer {
	font-family: "Comic Relief", system-ui;
	font-weight: 700;
	font-style: normal;
	position: fixed;
	right: 12px;
	bottom: 12px;
	text-align: right;
	color: rgb(119, 255, 0);
	background-color: rgba(8, 58, 78, 0.95);
	padding: 6px 10px;
	border: 3px solid rgb(84, 228, 76);
	border-radius: 4px;
}

/* Make all paragraphs right-aligned site-wide */
p {
    text-align: right;
}

/* Center the section row and all section content in the viewport */
.section-row {
	display: flex;
	align-items: center;
	justify-content: center; 
	gap: 20px;
	max-width: 1100px;
	margin: 32px auto; /* center horizontally */
	padding: 8px 12px;
	flex-wrap: nowrap;
}

.section-row > section {
	/* keep the section centered and prevent it from stretching to fill the row */
	flex: 0 1 auto;
	margin: 0 auto;
	align-self: center;
	max-width: 100%;
}


section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

section p, section h2, section h1 {
	text-align: center;
}

.cursed {
	grid-area: cursed;
	justify-self: center;
}

.cursed img {
	width:500px;
	height:500px;
	margin:0;
	display:block;
	border: 10px solid rgb(15, 110, 101);
}

@media (max-width: 700px) {
	.section-row {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 6px;
	}

	.section-row > section p {
		text-align: center;
	}
}

@media (max-width: 700px) {
	.section-row { margin: 16px auto; }
	.section-row .cursed img { width: 220px; }
	.section-row { flex-direction: column; }
}

/* Mobile specific: 640px and below */
@media (max-width: 640px) {
	/* tighter page padding */
	body { padding: 0 10px; }

	/* logo smaller and centered */
	.LOGO { margin-left: 0; margin-right: 0; text-align: center; }
	.LOGO img { width: 260px; height: auto; display: block; margin: 12px auto; }

	/* stack nav links vertically */
	.navlinks { flex-direction: column; gap: 8px; align-items: center; }

	/* headline smaller */
	h1 { font-size: 32px; padding: 8px; }

	/* switch main to a single column flow for simplicity on small screens */
	main { display: block; padding: 0; }

	/* character images — smaller and wrap */
	.images-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding: 6px 0; }
	.images-row img, .Snake img, .Lyra img, .Grandpa img, .BEN img { width: 140px; height: 140px; }

	/* mid-row stacks vertically */
	.mid-row { flex-direction: column; gap: 12px; padding: 8px 6px; }
	.mid-row .para1, .mid-row .para2 { max-width: 100%; }
	.derp img { width: 220px; height: auto; margin: 8px auto; }

	/* section-row and section centered + full width with breathing room */
	.section-row { flex-direction: column; align-items: center; padding: 8px; gap: 12px; }
	section { width: calc(100% - 24px); max-width: 740px; margin: 18px auto; padding: 18px; }

	/* para card adjustments */
	.para1 p, .para2 p, .para3 p { font-size: 18px; margin: 8px 10px; text-align: center; }

	/* reduce footer overlap risk */
	footer { right: 8px; left: 8px; text-align: center; }
}