:root {
	
	/* QUICK CUSTOMIZATION ZONE */
	/* changing these variables will update the style of mutiple elements at once */
	
	--pagewidth: 100vw;			/* sets the width of the container in units of viewport width */
	--pageheight: 90vh;			/* sets the height of the container in units of viewport height */
	--sidebarwidth: 150px;		/* width of the icon and navigation on the side */
	
	--outerborder: 4px double;	/* width and style borders between sections */
	--innerborder: 4px solid;	/* width and style of decorative border within sections + between nav links */
	
	--text-color: white;
	--colour-1: #fff4b8;
	--colour-2: #fe7b6a;
	--colour-3: #fb1e57;
	--colour-4: #420b40;
	--colour-5: #2c0735;
	--colour-6: #110228;
	--colour-7: #110217;
	
	--headingfont: "HopeGold";
	--bodyfont: "Courier";
     
}

body { 
	font-family: var(--bodyfont), serif; 
	color: var(--text-color);
	background-image: linear-gradient(
						to bottom,
						rgb(17, 2, 40, 0),
						rgb(17, 2, 40, 0.3)
							),
						url("../assets/bgdark.png")
}

main { 
	grid-area: main;
	background: var(--colour-7);
	border: var(--innerborder) var(--colour-6);
	outline: var(--outerborder) var(--colour-2);
	overflow-Y: scroll;
	max-height: 100%;
}

header { 
	grid-area: head; 
	background: var(--colour-6);
	outline: var(--outerborder) var(--colour-2);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	font-family: var(--headingfont), sans-serif;
	font-size: 200%;
	color: var(--colour-3);
	text-align: left;
	align-content: center;
	justify-content: center;
	text-wrap: balance;
	overflow: hidden;
	letter-spacing: 0.5px;
}

.container > figure img { 
	width: 100%; 
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: 0 var(--border-radius-2) 0 0;
	border: var(--innerborder) var(--colour-7);
	outline: var(--outerborder) var(--colour-2);
}

footer { 
	font-family: var(--headingfont);
	grid-area: foot;
    color: var(--colour-4);
	background: var(--colour-6);
	outline: var(--outerborder) var(--colour-2);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	padding:2px;
}

nav {
	grid-area: nav;
	overflow: auto;
	border: var(--innerborder) var(--colour-6);
	outline: var(--outerborder) var(--colour-2);
	border-radius: 0 0 var(--border-radius-2) 0;
	background: var(--colour-7);
	align-self:start;
	max-height: 100%;
	line-height: 1;
	scrollbar-color: var(--colour-5) var(--colour-6);
	scrollbar-width: thin;
}
nav p { 
	font-family: var(--headingfont);
    font-size: 150%;
    color: var(--colour-1);
	margin: 0;
	padding: 8px 8px;
	background: var(--colour-5);
	border-bottom: var(--innerborder) var(--colour-6);
	line-height: 0.5;
}
nav p:not(:first-child) { border-top: var(--innerborder) var(--colour-6); }
nav ul { display: grid; list-style-type: none; margin: 0; padding: 0; overflow: visible; }
nav li:not(:first-child) { border-top: var(--innerborder) var(--colour-6); }
nav a { display: block; padding: 5px 8px; text-decoration: none; line-height: 1; }
nav a:hover, nav a:focus { background: var(--colour-4);  color: var(--colour-1);}


button {
	font-family: var(--bodyfont), sans-serif;
    background: var(--colour-7);
    border: none;
    color: var(--colour-3);
    cursor: pointer;
    display: block;
    padding: 8px 8px;
    text-decoration: none;
    line-height: 1; 
    font-size: 100%;
	width:100%;
	text-align:left
}

button:hover {
  background: var(--colour-4);
  color: var(--colour-1);
}

table { 
	border: 1px solid var(--colour-3);
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	display: block;
}
th, td { 
	padding: 3px 5px;
}
th { 
	color: var(--colour-2);
	background: var(--colour-5);
}
td { 
	background: var(--colour-6);
}

code { 
	display: inline-block;
	border-radius: var(--border-radius);
	padding: 2px 5px;
	background: var(--colour-6);
}

details {
	border: var(--outerborder) var(--colour-5);
	border-radius: var(--border-radius);
}

blockquote {
	border-left: var(--innerborder) var(--colour-5);
	border-radius: var(--border-radius);
	padding: 0.25rem 0.5rem;
}