/*------------------------
--pixyc.cc v3 stylesheet--
------------------------*/



/* -------- all the fonts -------- */

@font-face {
  font-family: prologik; /* Brainreactor's PROLOGIK */
  src: url(prologik.woff2);
}

@font-face {
  font-family: schengen-mono; /* ABC Dinamo's Schengen (monospace version) */
  src: url(schengen-mono.woff2);
}



/* -------- global rules -------- */

p {
	margin: 0px; /* Remove distance from site elements */
	overflow-wrap: break-word; /* Stop text from making site overflow */
	word-break: break-word; /* ^^^ */
}

h1,h2,h3,h4,h5,h6 {
	margin: 0px; /* Remove distance from site elements */
}

a { /* Archaic link stylings */
	text-decoration: none;
	color: inherit;
}

h2 {
	font-weight:400;
	font-size: 28 px;
	
}

/* -------- body rules -------- */

body {
	
	color: #000;
	background-color: #fff;
	
	background-image: url("/assets/bg/light.png"); /* Fallback just in case. */
	background-image: image-set(
		url("/assets/bg/light.jxl") type("image/jxl"), /* JXL fall-forward */
		url("/assets/bg/light.png")  type("image/png")
	);
	
	background-attachment: fixed; /* so it fits the viewport instead of the page */
	background-size: cover; /* so it covers the whole viewport */
	background-position: top center; /* so you see the middle of it */
	
	font-family: schengen-mono; /* Body typeface */
	font-size: 18px;
	font-weight: 250;
	
}


/* -------- sections -------- */


#header { /* BIG text at the top of the site. */
	
	font-family: prologik; /* Header logotype */
	text-align: center;
	
	font-size: 40px;
	
	padding: 180px 0px; /* Big space between the header text and the rest of the site */
	
}



#nav { /* Small text just above the main page leading to different points of interest. */
	
	max-width: 800px; /* Width of the whole site. */
	margin: auto; /* Center the main site content */
	
	font-weight: 300;
	font-size: 18px;
	color: #000000cc;
	
}



#main { /* The main site content. */
	
	max-width: 800px; /* Width of the whole site. */
	margin: auto; /* Center the main site content */

	background-color: #ffffff40; /* Fancy blurred panel background */
	backdrop-filter: blur(20px);
	
	border: 1.5px solid #00000030; /* Highlight the borders */
	border-radius: 8px;
	
}



#footer { /* The small text below the main page */
	
	max-width: 800px; /* Width of the whole site. */
	
	margin: auto; /* Center the main site content */
	
	text-align: center;
	font-size: 14px;
	font-weight: 200;
	color: #00000070;
	
}


/* -------- Special Rules --------- */

.inlineimage { /* Mostly for release covers, and maybe other images in articles */
	max-width: 200px;
	border: 1.5px solid #00000030;
	border-radius: 6px;
	margin: 4px;
}

.imagewrapper { /* Box containing both an image and text */
	display: flex;
}

.textwrapper {width: 100%}
audio {
	width: 97.5%;
	align-items: center;
	justify-content: center;
	
}

.webbuttons { /* Old-school web buttons in a horizontal array */
	image-rendering: pixelated;
	flex-wrap: wrap;
    display: flex;
	align-items: center;
	justify-content: center;
	gap: 0px; /* Just for now, becuase with the number of icons there are currently, it leaves only one extra on a second line. Will change once I add more. */
}

/* -------- Width Rules --------- */

@media (max-width: 715px) {
	#header {font-size: 24px} /* Make header text not exceed screen */
}

@media (max-width: 520px) {
	.imagewrapper {
		display: block;
	}
	.inlineimage {
		display: block; 
		max-width: 97.5%;
	}
}

/*------------------------
--DARK MODE FALL-FORWARD--
------------------------*/

@media (prefers-color-scheme: dark) {
	body {
		color: #fff;
		background-color: #000;
		background-image: url("/assets/bg/dark.png");
		background-image: image-set(
			url("/assets/bg/dark.jxl") type("image/jxl"),
			url("/assets/bg/dark.png")  type("image/png")
		)
	}
	#nav {color: #000000cc;}
	#main { /* The main site content. */
		background-color: #00000050;
		border: 1.5px solid #ffffff45;
	}
	#footer {color: #ffffff70;}
	.inlineimage {border: 1.5px solid #ffffff45;}
}