@import 'fonts.css';

:root {
	--border-width: 16px;
	--common-shadow: 2px 2px 8px -2px #000000;
	--common-inset-shadow: 2px 2px 8px -4px #000000 inset;
	--sub-shadow: 2px 2px 4px -4px #000000;
	--frosted-glass:contrast(0.3) brightness(1.6) blur(16px);
}

body, html {
	height: 100%;
	margin: 0;
	font-family: "Work Sans", sans-serif;
	background-color: var(--bg-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1 {
	position: relative;
	top: 1em;
	width: 100%;
	margin: 0;
	text-align: center;
	letter-spacing: 9px;
	font-size: 2em;
	font-weight: 700;
	color: var(--headertext-color);
	z-index: 1;
}


p {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.8em;
	letter-spacing: .04em;
	color: var(--maintext-color);
	z-index: 1;
	}
	p a:any-link {
		/* color: var(--link-color); */
		color: var(--embedded-link-color);
		text-decoration: none;
		border-bottom: 1px dashed;
		border-bottom-color: var(--embedded-link-color);
		transition: color .09s, border-bottom-color .09s;
		}
		p a:hover {
			color: var(--embedded-link-hover-color);
			border-bottom-color: var(--embedded-link-hover-color);
		}
		p a:active {
			color: var(--embedded-link-active-color);
			border-bottom-color: var(--embedded-link-active-color);
}

.text p {
	margin-bottom: 1.6em;
}

.text {
	padding: 2em;
}

.subtext {
	font-size: 0.825em;
	color: var(--subtext-color);
}

::selection {
	background: var(--select-bg-color);
	color: var(--select-text-color);
}
.noselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}

.header {
	margin: auto;
	/* width: 66%; */
	text-align: center;
	padding: 3em;
	border-bottom: 1px solid;
	z-index: 1;
	color: var(--headertext-color);
	border-bottom-color: var(--divider-color);
}
.header p {
	/* position: relative;
	left: 25%;
	top: 2em; */
	margin-top: 2em;
	text-align: center;
}

main {
	width: 66.666666%;
	max-width: 110vh;
	min-width: 50vh;
	margin-left: auto;
	margin-right: auto;
	padding: var(--border-width);
	background: none;
}



.backgroundshape {
	position: fixed;
	top: 75%;
	left: 75%;
	margin: auto;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 800px;
	fill: var(--border-color);
	pointer-events: none;
	z-index: -1;
}

.border {
	position: fixed;
	fill: #999;
	z-index: 3;
	top: 0;
	left: 0;
	margin: auto;
	width: 100vw;
	height: 100vh;
}


#socials.theme.light {--social-fill-color: #000;}
#socials.theme.dark {--social-fill-color: #fff;}
#socials {
	position: fixed;
	top: 50px;
	left: 50%;
	font-size: 0;
	transform: translate(-50%, 0%);
	white-space: nowrap;
	opacity: 30%;
	transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	z-index: 3;
	max-width: 100%;
	}
	#socials:hover, #socials:focus-within {
		opacity: 100%;
		transition-duration: 0.2s;
	}
	#socials a { outline: none; }
	.social {
		display: inline-block;
		width: 3.25em;
		height: 3.25em;
		font-size: 1rem;
		fill: var(--social-fill-color);
		--backing-fill-color: #fff;
		transition: fill 1.5s cubic-bezier(0.19, 1, 0.22, 1);
		z-index: 3;
		}
		#socials a:hover .social, #socials a:focus-visible .social {
			fill: var(--brand-fill-color);
			transition-duration: 0.1s;
		}
		.social::before {
			content: ' ';
			position: absolute;
			top: 0; left: 0;
			width: 3.25em;
			height: 3.25em;
			background-color: #000;
			opacity: 0%;
			transform: scale(0.25, 0.25);
			transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
			z-index: 2;
			pointer-events: none;
		}
		a:focus-visible .social::before {
			opacity: 100%;
			transform: scale(1.0, 1.0);
			transition-duration: 0.1s;
}
.social.appicon {--backing-fill-color:#000;}
.social.twitter{--brand-fill-color:#1DA1F2;}
.social.soundcloud{--brand-fill-color:#FE5000;}
.social.youtube{--brand-fill-color:#ff0000;}
	a .social.youtube::after {
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		opacity: 0%;
		transform: scale(0.2, 0.2);
		transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
		z-index: 2;
		pointer-events: none;
	}
	a:focus-visible .social.youtube::after {
		opacity: 100%;
		transition-duration: 0.1s;
}
.social.instagram{--brand-fill-color:#E1306C;}
.social.spotify{--brand-fill-color:#1DB954;--backing-fill-color:#000;}
.social.github{--brand-fill-color:#333;}
.social.github.theme.dark{--brand-fill-color:#333;}
.social.github.theme.light{--brand-fill-color:#fff;}
.social.applemusic{--brand-fill-color:url(#applemusic);--backing-fill-color:#fff;}
.social.itunes{--brand-fill-color:#EA4CC0;}
.social.bandcamp{--brand-fill-color:#1da0c3;}
.social.tidal{--brand-fill-color:#00FFFF;}
.social.twitch{--brand-fill-color:#9146FF;}
a:not(:hover):not(:focus-visible) .social.deezer {
	--deezer-fill-color-0: var(--social-fill-color);
	--deezer-fill-color-1: var(--social-fill-color);
	--deezer-fill-color-2: var(--social-fill-color);
	--deezer-fill-color-3: var(--social-fill-color);
	--deezer-fill-color-4: var(--social-fill-color);
	--deezer-fill-color-5: var(--social-fill-color);
	--deezer-fill-color-6: var(--social-fill-color);
	--deezer-fill-color-7: var(--social-fill-color);
	--deezer-fill-color-8: var(--social-fill-color);
	--deezer-fill-color-9: var(--social-fill-color);
}
a:hover .social.deezer, a:focus-visible .social.deezer {
	--deezer-fill-color-0: rgb(249, 133, 21);
	--deezer-fill-color-1: rgb(240, 179, 28);
	--deezer-fill-color-2: rgb(236, 96, 51);
	--deezer-fill-color-3: rgb(207, 64, 78);
	--deezer-fill-color-4: rgb(112, 28, 146);
	--deezer-fill-color-5: rgb(155, 12, 142);
	--deezer-fill-color-6: rgb(23, 171, 94);
	--deezer-fill-color-7: rgb(19, 157, 135);
	--deezer-fill-color-8: rgb(16, 128, 181);
	--deezer-fill-color-9: rgb(21, 98, 204);
}
.social.other{--brand-fill-color:#5fa2cc;}
.social .backing{fill:transparent;transition:fill 0.5s cubic-bezier(0.19, 1, 0.22, 1)}
a:hover .social .backing, a:focus-visible .social .backing{fill:var(--backing-fill-color)}



div.footer {
	position: fixed;
		bottom: 50px;
		width: 100%;
	margin: 0;
		text-align: center;
		letter-spacing: 0.15em;
		font-family: "Work Sans", sans-serif;
	 font-size: large;
		font-weight: 400;
		color: var(--headertext-color);
		user-select: none;
}
div.endofpage {
		margin-bottom: 12em;
		user-select: none;
}

.button {
	font-size: 22px;
	font-weight: 400;
	}
	.button:link, .button:visited {
		color: var(--link-color);
		transition: color .1s;
		text-decoration: none;
	}
	.button:hover {
		color: var(--link-hover-color);
		text-decoration: none;
	}
	.button:active{
		color: var(--link-active-color);
		text-decoration: none;
		}

.button2 {
	font-size: 1.3em;
		font-weight: 200;
		border: 1px solid;
		padding: .2em 2em;
	}
	.button2:link, .button2:visited {
				text-decoration: none;
				background: none;
				color: var(--btn2-color);
				border-color: var(--btn2-border-color);
		transition: color .1s, background-color .1s;
	}
	.button2:hover {
				text-decoration: none;
				background: var(--btn2-hover-bg-color);
				color: var(--btn2-hover-color);
	}
	.button2:active{
				text-decoration: none;
		background: var(--btn2-active-bg-color);
				color: var(--btn2-active-color);
	}

div.b3d {
		background-color: transparent;
		margin: auto;
		margin-top: 2.6em;
		width: 10%;
		height: 10%;
		/* padding-top: 100%; */
		perspective: 1000px;
		}
		div.b3d .b3d-inner {
				position: relative;
				width: 100%;
				height: 100%;
				text-align: center;
				transform-style: preserve-3d;
				/* transform: rotateY(0deg); */
				transition: transform .25s;
				
		}
		div.b3d:hover .b3d-inner {
				transform: rotateY(180deg);
				}
				div.b3d .b3d-inner .front, div.b3d .b3d-inner .back {
						position: absolute;
						width: 100%;
						height: 100%;
						backface-visibility: hidden;
						-webkit-backface-visibility: hidden;
				}
				div.b3d .b3d-inner .back { transform: rotateY(180deg); }
div.b3d .b3d-inner .front {
		background: var(--border-color);
		color: rgb(211, 211, 211);
}
div.b3d .b3d-inner .back {
		background: rgb(190, 190, 190);
		color: rgb(53, 53, 53);
}
div.b3d:active .b3d-inner .back {
		background: rgb(211, 211, 211);
}
button.inactive {
		cursor: default;
}

button.var1 {
		padding: 0.3em 0.75em 0.3em 0.75em;
		background-color: #dcdcdc;
		color: var(--maintext-color);
		border: none;
		outline: none;
		font: 400 1.15em "Work Sans";
		letter-spacing: 0.15em;
		cursor: pointer;
		}
		button.var1:hover {
				position: relative;
		}
		button.var1:hover:after {
				content: '';
				width: 60px;
				height: 4px;
				background-color: #000000;
				position: absolute;
				bottom: -4px;
}

.btnctn {
		position: static;
		display: table-cell;
		width: fit-content;
		height: fit-content;
		white-space: nowrap;
		border-collapse: separate;
		background: none;
		cursor: pointer;
		--bprsamt: 4px;
		}
		.btnctn .btn {
				width: fit-content;
				position: relative;
				top: 0px;
				left: 0px;
				padding: 0.3em 0.75em 0.3em 0.75em;
				font: 400 1.15em "Work Sans";
				letter-spacing: 0.15em;
				background-color: var(--bg-color);
				color: var(--maintext-color);
				outline: 1px solid var(--maintext-color);
				box-shadow: var(--bprsamt) var(--bprsamt) 0px var(--maintext-color);
				transition: 0.125s;
				user-select: none;
		}
		.btnctn:hover .btn {
				top: var(--bprsamt);
				left: var(--bprsamt);
				box-shadow: none;
		}
		.btnctn:active .btn {
				background-color: var(--maintext-color);
				color: var(--border-color);
}
.btnctn.inactive {
		cursor: default;
		}
		.btnctn.inactive .btn {
				outline: 1px solid var(--subtext-color);
				box-shadow: var(--bprsamt) var(--bprsamt) 0px var(--subtext-color);
}

.squarebuttoncontainer {
		display: inline-block;
		width: 13em;
		height: 15em;
		min-width: 13em;
		min-height: 15em;
		margin: 1.5em;
		}
		.squarebuttoncontainer .squarebutton {
				position: relative;
				top: 0;
				filter: brightness(100%);
				transition: top 0.07s, filter 0.3s, box-shadow 0.1s;
				}
				.squarebuttoncontainer .squarebutton .name {
						/* color: rgba(0, 0, 0, 0);
						-webkit-text-stroke: 1px var(--maintext-color); */
						transition: color 0.07s, -webkit-text-stroke 0.07s;
		}
		.squarebuttoncontainer a {
				text-decoration: none;
				color: var(--subtext-color);
				transition: color 0.1s;
		}
		.squarebuttoncontainer:hover .squarebutton {
				top: -2px;
				filter: brightness(110%);
				box-shadow: var(--sub-shadow);
				transition: top 0.07s, filter 0.07s, box-shadow 0.07s;
				}
				.squarebuttoncontainer:active .squarebutton .name {
						color: #ffffff;
						-webkit-text-stroke: 1px #00000000;
		}
		.squarebuttoncontainer:active .squarebutton {
				top: -2px;
		}
		.squarebuttoncontainer:active a {
				color: var(--maintext-color);
}
.squarebutton {
		width: 100%;
		height: 100%;
		border: 1px solid var(--panel-border-color);
		border-radius: 4px;
		font-family: 'Open Sans', sans-serif;
		font-size: 1.1em;
		box-shadow: none;
		overflow: hidden;
		}
		.squarebutton .preview {
				z-index: 0;
				width: 100%;
				height: 100%;
				filter: blur(4px);
		}
		.squarebutton .name {
				position: absolute;
				top: 0;
				width: 100%;
				height: 15%;
				margin: 26% 0 32.5% 0;
				text-align: center;
				font-weight: 800;
				font-size: 1.8em;
				z-index: 1;
				color: rgba(0, 0, 0, 0);
				-webkit-text-stroke: 1px var(--maintext-color);
				user-select: none;
		}
		.squarebutton .description {
				position: relative;
				bottom: calc(20% + 2em);
				height: 20%;
				width: 100%;
				max-width: calc(100% - 2em);
				overflow: clip;
				background-color: var(--panel-bg-color);
				border-top: 1px solid var(--panel-border-color);
				padding: 1em;
				z-index: 1;
				font-size: 0.85em;
				user-select: none;
}

/* div {
		width: 350px;
		height: 100px;
		background: lightgray;
		position: relative;
		margin: 20px;
		}
		div:after {
				content: '';
				width: 60px;
				height: 4px;
				background: gray;
				position: absolute;
				bottom: -4px;
}

h1 {
		display: table;
		margin-left: auto;
		margin-right: auto;
}

h1:after {
		border-bottom: 1px solid #f00;
		content: '';
		display: block;
		width: 50%;
} */

#top, #bottom, #left, #right {
	background: var(--border-color);
	transition: background-color 0.3s;
	z-index: 10;
	position: fixed;
	pointer-events: none;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: var(--border-width);
		}
		#left { left: 0; }
		#right { right: 0; }	
	#top, #bottom {
		left: 0; right: 0;
		height: var(--border-width);
		}
		#top { top: 0; }
				#bottom { bottom: 0; }

/* possibly make the fade in/out animations move the 
borders in to the center and then back out again */
#fdout {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--bg-color);
		transition: background-color 0.3s;
		position: fixed;
		z-index: 9;
		pointer-events: none;
		animation-duration: 400ms;
		animation-timing-function: ease-in-out;
		}
		#fdout.in {
				opacity: 0;
				animation-name: fadeIn;
				}
				@keyframes fadeIn {
						from { opacity: 1 }
							to { opacity: 0 }
				}
		#fdout.out {
				opacity: 1;
				animation-name: fadeOut;
				}
				@keyframes fadeOut {
						from { opacity: 0 }
							to { opacity: 1 }
}

::-webkit-scrollbar {
		width: 12px;
		height: 10px;
		}
		::-webkit-scrollbar-track { background: var(--border-color); }
		::-webkit-scrollbar-thumb {
				background: var(--sb-handle-idle-color);
				transition: background-color 0.1s;    
				}
				::-webkit-scrollbar-thumb:hover { background: var(--sb-handle-hover-color); }
				::-webkit-scrollbar-thumb:active { background: var(--sb-handle-active-color); }
::-webkit-scrollbar-corner { background: var(--border-color); }