:root {
	--background-rgb: 2 6 23;
	--background-light-rgb: 30 41 59;
	
	--border-rgb: 255 255 255;
	--border: 1px solid rgb(var(--border-rgb) / 20%);
	
	--hyperplexed-main-rgb: 41 121 255;
	--hyperplexed-main-light-rgb: 56 182 255;
	--hyperplexed-secondary-rgb: 42 252 152;
	  
	--card-size: 480px;
	--font-size: 0.8rem;
	--logo-size: calc(var(--card-size) * 0.3);
  }
  
  body {
	background: rgb(var(--background-rgb));
	height: 100vh;
	display: flex;
	justify-content: center;
	font-family: 'Noto Sans', sans-serif;
	color: white;
	accent-color: rgb(var(--hyperplexed-main-rgb));
	margin: 5% 15%;
  }

  a {
	color: rgb(var(--hyperplexed-main-rgb));
	text-decoration: none;
  }
  
  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  .card-track {
	height: 100%;
	width: var(--card-size);
	display: flex;
	align-items: center;
	position: relative;
  }
  
  .card-wrapper {
	width: 100%;
	position: relative;
  }
  
  .card {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	position: relative;
	margin: 1rem;
	border-radius: 2rem;
	overflow: hidden;
	cursor: pointer;
  }
  
  .card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 4;
  }
  
  .card-image > img {
	width: var(--logo-size);
  }
  
  .card-gradient {
	height: 100%;
	width: 100%;
	position: absolute;
	background: radial-gradient(
	  rgb(var(--background-light-rgb)) 40%, 
	  rgb(var(--hyperplexed-main-rgb)) 50%, 
	  rgb(var(--hyperplexed-main-light-rgb)),
	  rgb(var(--hyperplexed-secondary-rgb))
	);
	mix-blend-mode: darken; 
	pointer-events: none;
	z-index: 3;
  }
  
  .card-letters {
	--x: 0px;
	--y: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	color: white;
	font-size: var(--font-size);
	font-weight: 500;
	word-wrap: break-word;
	opacity: 0;
	transition: opacity 400ms;
	-webkit-mask-image: radial-gradient(
	  calc(var(--card-size) * 0.8) circle at var(--x) var(--y), 
	  rgb(255 255 255) 20%, 
	  rgb(255 255 255 / 25%), 
	  transparent
	);
	scale: 1.03;
  }
  
  .card:hover .card-letters {
	opacity: 1;
  }
  
  @media(max-width: 600px) {
	:root {
	  --card-size: 340px;
	}
	
	.card {
	  border-radius: 1rem;
	}
  }
  
  /* -- Extra Styles -- */
  
  .card-track:before,
  .card-track:after {
	content: "";
	height: 100vh;
	width: 1px;
	position: absolute;
	top: 50%;
	translate: 0% -50%;
  }
  
  .card-track:before {
	left: -1px;
	border-left: var(--border);   
  }
  
  .card-track:after {
	right: -1px;
	border-right: var(--border);   
  }
  
  .card-wrapper:before,
  .card-wrapper:after {
	content: "";
	width: 100vw;
	position: absolute;
	left: 50%;
	translate: -50%;
  }
  
  .card-wrapper:before {
	top: -1px;
	border-top: var(--border);   
  }
  
  .card-wrapper:after {
	bottom: -1px;
	border-bottom: var(--border);   
  }
  
  .card-corners {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 3;
	pointer-events: none;
  }
  
  .card-corners > .card-corner {
	display: block;
	height: 9px;
	width: 1px;
	position: absolute;
	background-color: white;
  }
  
  .card-corners > .card-corner:after {
	content: "";
	width: 9px;
	height: 1px;
	position: absolute;
	left: -4px;
	top: 4px;
	background-color: white;
  }
  
  .card-corners > .card-corner:nth-child(1) {
	left: -1px;
	top: -5px;
  }
  
  .card-corners > .card-corner:nth-child(2) {
	right: -1px;
	top: -5px;
  }
  
  .card-corners > .card-corner:nth-child(3) {
	right: -1px;
	bottom: -5px;
  }
  
  .card-corners > .card-corner:nth-child(4) {
	left: -1px;
	bottom: -5px;
  }
  
  /* -- Links -- */
  
  #links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 100;
	padding: 1rem;
  }
  
  .meta-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
  }
  
  .meta-link > :is(span, a) {
	font-family: "Rubik", sans-serif;
	font-size: 1.25rem;
	color: white;
  }
  
  .meta-link > .label {
	text-align: right;
  }
  
  .meta-link > a {
	text-decoration: none;
	outline: none;
  }
  
  .meta-link > a.source {
	color: rgb(94, 106, 210);
  }
  
  .meta-link > a:is(:hover, :focus) > i {
	color: white;  
  }
  
  .meta-link > a.youtube {
	color: rgb(239, 83, 80);
  }
  
  .meta-link > a.youtube > i {
	padding-top: 0.2rem; 
  }
  
  .meta-link > a > i {
	height: 1rem;
	line-height: 1rem;
  }