/* ################################################## */
/* Schike Neocities Page CSS File */

/* ################################################## */
/* Fonts */

/* Text */
/* ShareTech Mono */
@font-face {
	font-family: 'sharetec-mono';
	src: url('/media/fonts/ShareTechMono-Regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* Playwrite BR */
@font-face {
	font-family: 'playwrite';
	src: url('/media/fonts/PlaywriteBR-VariableFont.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* OpenSans */
@font-face {
	font-family: 'opensans';
	src: url('/media/fonts/OpenSans-VariableFont.ttf');
	font-display: swap;
	font-weight: 450 1000;
}

/* Headers */
/* Eater */
@font-face {
	font-family: 'eater';
	src: url('/media/fonts/Eater-Regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* Saira Stencil One */
@font-face {
	font-family: 'saira-stencil';
	src: url('/media/fonts/SairaStencilOne-Regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* Monoton */
@font-face {
	font-family: 'monoton';
	src: url('/media/fonts/Monoton-Regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* PermanentMarker */
@font-face {
	font-family: 'permanent-marker';
	src: url('/media/fonts/PermanentMarker-Regular.ttf');
	font-display: swap;
	font-weight: 100 1000;
}

/* ################################################## */
/* Root Variables */
:root {
	/* ------------------------------ */
	/* Colors */
	
	/* Background Colors */
	--cb1: rgb(10,10,10);
	--cb2: rgb(30,30,30);
	--cb3: rgb(50,50,50);
	--cb4: rgb(130,130,130);
	
	/* Color Colors */
	--green1: rgb(0,160,0);
	--green2: rgb(0,200,0);
	--green3: rgb(0,250,0);
	
	--red1: rgb(160,0,0);
	--red2: rgb(200,0,0);
	--red3: rgb(250,0,0);
	
	--cyan1: rgb(0,100,160);
	--cyan2: rgb(0,130,200);
	--cyan3: rgb(0,180,250);
	
	--yllw1: rgb(180,120,0);
	--yllw2: rgb(220,150,0);
	--yllw3: rgb(250,220,0);
	
	--purple1: rgb(100,0,160);
	--purple2: rgb(130,0,200);
	--purple3: rgb(180,0,250);
	
	/* Text Colors */
	--ctxt: rgb(240,240,240);
	
	/* ------------------------------ */
	/* Distances */
	--d1: 3px;
	--d2: 6px;
	--d3: 12px;
	--d4: 24px;
	--d5: 48px;
	--d6: 96px;
}

/* Basic Markup */
body {
	margin: 0; padding: 0;
	background: var(--cb1);
}
*, *:before, *:after {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
	
	color: var(--ctxt);
	font-family: 'sharetec-mono';
	font-weight: 300;
	margin: 0; padding: 0;
	hyphens: none;
}


b, b * {
	font-weight: bold;
}
i, i * {
	font-style: oblique;
}
em, em * {
	font-variant: small-caps;
}
x, x * {
	text-decoration: line-through;
}
c, c * {
	color: transparent !important;
	background-image: linear-gradient(to left, var(--green3), var(--red3));
	background-clip: text;
}

ul li {
	list-style: "*  ";
	margin-left: 35px;
}
ol li {
	margin-left: 35px;
}

img {
	display: block;
	image-rendering: pixelated;
}

/* ################################################## */
/* z-indexes */
#cat-boxing {
	z-index: 99;
}

/* ################################################## */
/* Main structural entities */

section {
	position: relative;
	padding: var(--d6) var(--d3);
}

/* ################################################## */
/* Different sections */

/* ---------------------------------------- */
/* GREETINGS section */
section#greetings {}

/* ---------------------------------------- */
/* PERSONAL section: Cluster of strips and blocks */
section#personal {
	background: url("/media/gifs/space.gif");
}
section#personal::before {
	/* Green border */
	content: "";
	position: absolute;
	top: var(--d2);
	left: var(--d2);
	width: calc(100% - 2*var(--d2));
	height: calc(100% - 2*var(--d2));
	
	border: 1px dotted var(--green1);
	
	pointer-events: none;
}

/* Cluster */
.cluster {
	display: flex;
	flex-direction: column;
	gap: var(--d2);
}
.cluster-row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--d2);
}
.cluster-row:first-child {
	align-items: end;
}
.cluster-row:last-child {
	align-items: start;
}
.cluster-strip {
	display: flex;
	flex-direction: column;
	gap: var(--d2);
	
	max-height: 800px;
}
.cluster-strip:first-child {
	align-items: end;
}
.cluster-strip:last-child {
	align-items: start;
}
.cluster-strip:only-child {
	align-items: center;
}

/* Image containers */
.img-cont {
	
}
.img-cont img {
	width: 100%;
	
	min-width: 0;
	min-height: 0;
}

/* Blocks */
.block {
	flex: 1 1 auto;
	min-height: 0;
	
	display: flex;
	flex-direction: column;
	
	padding: var(--d1);
	
	background: var(--cb1);
	border: 3px double;
}
.block img {
	padding: 1px;
	margin: var(--d3) auto;
	border: 1px solid var(--ctxt);
}
.block-head {
	padding: var(--d2);
}
.block-head * {
	font-weight: bold;
	color: var(--cb1);
}
.block-body {
	flex-grow: 1;
	padding: var(--d2);
	overflow-y: scroll;
}
.block-body h3,
.block-body h4,
.block-body h5 {
	text-decoration: underline;
	margin-top: var(--d4);
	margin-bottom: var(--d3);
}
.block-body p {
	margin-bottom: var(--d3);
}

/* Block Colors */
.block.red {
	border-color: var(--red3);
}
.block.red .block-head {
	background: linear-gradient(var(--red3), var(--red1));
}
.block.red li::marker {
	color: var(--red3);
}
.block.red img {
	border-color: var(--red3);
}

.block.yllw {
	border-color: var(--yllw3);
}
.block.yllw .block-head {
	background: linear-gradient(var(--yllw3), var(--yllw1));
}
.block.yllw li::marker {
	color: var(--yllw3);
}
.block.yllw img {
	border-color: var(--yllw3);
}

.block.cyan {
	border-color: var(--cyan3);
}
.block.cyan .block-head {
	background: linear-gradient(var(--cyan3), var(--cyan1));
}
.block.cyan li::marker {
	color: var(--cyan3);
}
.block.cyan img {
	border-color: var(--cyan3);
}

.block.green {
	border-color: var(--green3);
}
.block.green .block-head {
	background: linear-gradient(var(--green3), var(--green1));
}
.block.green li::marker {
	color: var(--green3);
}
.block.green img {
	border-color: var(--green3);
}

.block.purple {
	border-color: var(--purple3);
}
.block.purple .block-head {
	background: linear-gradient(var(--purple3), var(--purple1));
}
.block.purple li::marker {
	color: var(--purple3);
}
.block.purple img {
	border-color: var(--purple3);
}

.block.white {
	border-color: var(--ctxt);
}
.block.white .block-head {
	background: var(--ctxt);
}

/* Block Types */
/* Dotted */
.block.dotted {
	border-width: 2px;
	border-style: dotted;
	gap: var(--d1);
}
.block.dotted .block-head,
.block.dotted .block-body {
	background: transparent;
	
	border-width: 2px;
	border-style: dotted;
	border-color: inherit;
}
.block.dotted .block-head * {
	color: var(--ctxt);
}

/* Transparent */
.block.transparent {
	border: 1px solid var(--cb3);
	background: rgba(0,0,0,0.6);
}
.block.transparent .block-head {
	background: transparent;
}
.block.transparent .block-head * {
	color: var(--ctxt);
}

/* Letter */
.block.letter {
	padding: 0;
	border: 0;
	background: rgb(250,250,255);
}
.block.letter * {
	color: var(--cb1);
}
.block.letter .block-head,
.block.letter .block-body {
	border: 3px dashed var(--red3);
	padding: var(--d4)
}
.block.letter .block-body {
	border-top: 0;
}

/* Sticky Note */
:root { /* Sticky note variables */
	--sticky-bg: rgb(240,240,100); /* Background */
	--sticky-txt: rgb(0,0,255); /* Text Color */
	
	/* Corner Height */
	--sticky-ch: 40px; 
	
	/* Box Shadow */
	--sticky-bs: 
		var(--d2) var(--d2) 0 rgb(100,100,20); 
}
.block.stickynote {
	position: relative;
	
	margin: 0 var(--d2) var(--d2) 0;
	
	padding: 0;
	padding-top: var(--sticky-ch);
	border: none;
	
	box-shadow: var(--sticky-bs);
	
	z-index: 0;
}
.block.stickynote::before {
	/* Corner */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	
	width: 0; height: 0;

	border-top: var(--sticky-ch) solid transparent;
	border-right: var(--sticky-ch) solid var(--sticky-bg);
	
	box-shadow: 1px 1px 0 black;
	
	z-index: 1;
}
.block.stickynote::after {
	/* Rest of note page (next to corner) */
	
	content: "";
	position: absolute;
	top: 0;
	left: var(--sticky-ch);
	width: calc(100% - var(--sticky-ch)); 
	height: var(--sticky-ch);
	
	background: var(--sticky-bg);
	
	z-index: -1
}
.block.stickynote * {
	color: var(--sticky-txt);
	font-family: "playwrite";
	line-height: 2em;
}
.block.stickynote .block-head,
.block.stickynote .block-body {
	border: none;
	padding: var(--d3);
	background: var(--sticky-bg);
}
.block.stickynote .block-head {
	padding-bottom: 0;
}
.block.stickynote .block-head * {
	text-decoration: underline 2px;
}
.block.stickynote .block-body {
	padding-top: 0;
}

/* ++++++++++++++++++++++++++++++ */
/* IDs of special elements */

/* schike (my name) */
#schike {
	display: flex;
	justify-content: center;
	gap: var(--d1);
}
#schike img {
	flex: 1 0 0;
	min-width: 0;
	object-fit: contain;
}

/* Carousel */
#carousel {
	mask-image: linear-gradient(
		to right,
		transparent,
		black 20%,
		black 80%,
		transparent
	);
	
	padding: var(--d3) 0;
	background: rgba(0,0,0,0.8);
	border: groove var(--ctxt);
	border-width: 2px 0;
}
#carousel .carousel {
	gap: var(--d3);
}
#carousel * {
	color: var(--cb4);
}

/* Lava lamps */
#lava-lamps {
	max-width: 450px;
	display: flex;
}
#lava-lamps img {
	flex: 1 0 0;
	min-width: 0;
}

/* Download a car */
#download-a-car {
	max-width: 250px;
	
	border: 1px solid var(--cb4);
	padding: var(--d1);
	
	background: var(--cb3);
	cursor: pointer;
}
#download-a-car img {
	width: 100%;
	border: 1px solid var(--cb4);
}

/* blinkies */
#blinkies {
	display: flex;
	flex-direction: column;
	gap: var(--d1);
	
	padding: var(--d1);
	
	border-radius: var(--d1);
	border: 1px solid rgb(200,200,200);
	background: linear-gradient(40deg, red, blue);
}

/* movie-quote */
#movie-quotes {
	max-width: 500px;
}
.movie-quote {
	display: none;
}
.movie-quote [name="quote"] {
	font-family: "monoton";
	font-size: 32pt;
	line-height: 1em;
	
	color: transparent;
	background-image: linear-gradient(135deg, var(--yllw3), var(--purple3));
	background-clip: text;
}
.movie-quote [name="movie"] {
	margin-top: var(--d2);
}
.movie-quote [name="movie"]::before {
	content: "— ";
}

/* Guillotine */
#guillotine {}
#guillotine [name="guillotine"] {
	width: 100%;
}
#guillotine [name="message"] {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#guillotine [name="message"] div {
	display: flex;
}

/* Cat Boxing */
#cat-boxing {
	display: none;

	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100dvh;
	
	padding: var(--d5);
}
#cat-boxing.active {
	display: block;
}
#cat-boxing-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--d3);
	
	width: 100%;
	height: 100%;
	padding: var(--d3);
	
	border-radius: var(--d2);
	border: 1px solid var(--ctxt);
	background: linear-gradient(to left, var(--green3), var(--red3));
	
	overflow: hidden;
}
#cat-boxing-block p {
	font-family: "eater";
	font-size: 48pt;
}
#cat-boxing-block img {
	flex: 1 0 0;
	object-fit: contain;
}

/* ++++++++++++++++++++++++++++++ */
/* IDs of block elements */
#about {
	max-width: 600px;
}
#links {
	max-width: 450px;
}
#likes {
	max-width: 300px;
}
#hates {
	max-width: 300px;
}
#thoughts {
	max-width: 550px;
}
#movies {
	max-width: 350px;
}
#bands {
	max-width: 350px;
}
#albums {
	max-width: 350px;
}
#albums img {
	margin: 0;
	padding: 0;
	border: 0;
}
#song-lyrics {
	max-width: 800px;
}
#song-lyrics .block-body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--d2);
}

/* ++++++++++++++++++++++++++++++ */
/* IDs of image-containers */
#moth {
	margin-left: auto;
	width: 40px;
}
#hot-air-balloon {
}
#cat-running {
	max-width: 250px;
}
#cat-running img {
	cursor: pointer;
}
#clippy {
	flex: 1 0 0;
	min-height: 0;
	max-width: 250px;
}
#clippy img {
	min-width: 0;
	min-height: 0;
	border-radius: 50%;
}
#kingfisher {
	max-width: 250px;
}
#music-notes {
	width: 100%;
}
#music-notes img {
	filter: drop-shadow(0 0 10px white);
}
#jukebox {
	max-height: 200px;
	width: auto;
	object-fit: contain;
	
	filter: drop-shadow(0 0 3px red);
}
#skyline {}

/* Song lyrics */
:root {
	--clyric1: rgba(60,20,0,0.4);
	--clyric2: rgb(200,100,0);
}

.song-lyric {
	flex: 1 0 0;
	min-width: 240px;
	
	padding: var(--d2);
	border: 1px solid var(--clyric2);
	background: var(--clyric1);
}
.song-lyric * {
	margin: 0 !important;
}
.song-lyric [name="title"] {
	font-size: 1.2em;
}
.song-lyric [name="year"] {
	font-style: oblique;
	opacity: 0.8;
}
.song-lyric [name="artist"] {
	padding-bottom: var(--d2);
	color: var(--clyric2);
}
.song-lyric [name="lyric"] {
	border-top: 1px solid var(--clyric2);
	padding-top: var(--d2);
}
.song-lyric [name="lyric"]::before,
.song-lyric [name="lyric"]::after {
	content: '"';
}


/* ---------------------------------------- */
/* PROJECTS section */
section#projects {}

/* ################################################## */
/* Styling of Sub-Pages */
#jail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--d3);

	width: 100%;
	padding: var(--d6) 0;
}

/* ################################################## */
/* Special elements */

/* ################################################## */
/* Universal stylings */

/* carousel */
.carousel-cont {
	width: 100%;
	overflow: hidden;
}
.carousel {
	display: flex;
	align-items: center;
	width: max-content;
	/* Speed of animation is set in javascript */
	animation: scroll linear infinite;
}
@keyframes scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}


/* Image Grid */
.img-grid {
	display: flex;
	align-content: start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
}

/* ################################################## */
/* Media queries */
@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: none;
	}
}
@media only screen and (max-width: 800px) {
	section {
		padding: var(--d3);
	}
	
	/* Cluster */
	.cluster {
		width: 100%;
	}
	.cluster-row {
		flex-direction: column;
		align-items: center;
	}
	.cluster-strip {
		width: 100%;
		align-items: center !important;
	}
	.cluster-strip > * {
		min-width: 0;
		max-width: 100% !important;
	}
	
	/* Block elements */
	.block {
		width: 100%;
	}
	
	/* Special elements */
	#movie-quote * {
		text-align: center;
	}
}

/* ################################################## */
/* The end */