:root {
	--og-gradient: linear-gradient(
		132deg,
		#6bddf7bc,
		#104d86a8,
		#7c0034a4,
		#83200e9c,
		#7c1c41bb,
		#a06e76b2,
		#865e46b2,
		#43047096,
		#a80041ab
	);

	--default-radius: 19px;
}

@property --bgGradientColor1 {
	syntax: "<color>";
	inherits: false;
	initial-value: orange;
}

@property --bgGradientColor2 {
	syntax: "<color>";
	inherits: false;
	initial-value: blue;
}

@property --bgGradientColor3 {
	syntax: "<color>";
	inherits: false;
	initial-value: red;
}

@property --bgGradientColor4 {
	syntax: "<color>";
	inherits: false;
	initial-value: green;
}

@property --bgGradientColor5 {
	syntax: "<color>";
	inherits: false;
	initial-value: purple;
}

@property --gradientColor1 {
	syntax: "<color>";
	inherits: false;
	initial-value: white;
}

@property --gradientColor2 {
	syntax: "<color>";
	inherits: false;
	initial-value: purple;
}

body {
	--gradientColor2: var(--bgGradientColor1);
	--gradientColor1: var(--bgGradientColor2);
	background-image: linear-gradient(
		80deg,
		var(--gradientColor1),
		var(--gradientColor2)
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100%;
	-webkit-animation: gradient 25s infinite alternate ease-in-out;
	animation: gradient 25s infinite alternate ease-in-out;
	background-color: rgb(0, 0, 0);
	color: rgba(255, 255, 255, 0.877);
	font-size: 20px;
	font-family: "Comfortaa", sans-serif;
	transition: --bgGradientColor1 0.3s, --bgGradientColor2 0.3s,
		--bgGradientColor3 0.3s, --bgGradientColor4 0.3s, --bgGradientColor5 0.3s,
		all 0.3s;
}

@media (hover: hover) {
	body {
		-webkit-overscroll-behavior: none;
		overscroll-behavior: none;
	}
}

/* Doesn't Work on Firefox & Safari */
@keyframes gradient {
	0% {
		--gradientColor1: var(--bgGradientColor1);
		--gradientColor2: var(--bgGradientColor2);
	}
	25% {
		--gradientColor1: var(--bgGradientColor2);
		--gradientColor2: var(--bgGradientColor3);
	}
	50% {
		--gradientColor1: var(--bgGradientColor3);
		--gradientColor2: var(--bgGradientColor4);
	}
	100% {
		--gradientColor1: var(--bgGradientColor4);
		--gradientColor2: var(--bgGradientColor5);
	}
}

h1 {
	font-family: "Andika New Basic", sans-serif;
	font-size: 120px;
	text-align: center;
	font-weight: bolder;
}

h1.gradient-text {
	position: inline-block;
	font-weight: bolder;
	transition: 0.6s;
	opacity: 0.2;
	font-size: 6em;
	line-height: 100%;
	margin-top: 0.8em;
}

h1.gradient-text:hover {
	opacity: 1;
}

@media (hover: none) {
	h1.gradient-text:active {
		opacity: 1;
	}
}

hr {
	transition: 0.6s;
	border: 0;
	height: 3px;
}

.particle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.5;
	transition: 0.5s;
	-moz-filter: saturate(120%);
	filter: saturate(120%);
	pointer-events: none;
}

a {
	-webkit-tap-highlight-color: transparent;
	-moz-tap-highlight-color: transparent;
}

div.nav-bar {
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	height: 2.7em;
	position: fixed;
	font-size: 20px;
	font-family: "Comfortaa", sans-serif;
	padding-top: 0.5em;
	padding-left: 15px;
	padding-right: 15px;
	transition: 0.2s;
}

@media (max-width: 300px) {
	#navBarTitle {
		display: none;
	}
}

#overlayThin {
	background: rgba(0, 0, 0, 0.477);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(3px);
	transition: 0.25s;
	z-index: 999;
}

div.overflowMenu {
	visibility: hidden;
	position: fixed;
	right: 0;
	top: 3.5em;
	bottom: 0%;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	overflow: auto;
	font-size: 18px;
	z-index: 999;
	border-radius: var(--default-radius) 0px 0px var(--default-radius);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	transform: translateX(100%);
	transition: 0.3s;
}

a.overflowMenuButton {
	font-size: 20px;
	border-radius: var(--default-radius);
	cursor: pointer;
	/*display: flex;*/
	display: none;
	padding: 12px;
	padding-left: 25px;
	padding-right: 50px;
	margin: 15px;
	margin-bottom: 22px;
	text-decoration: none;
	transition: 0.2s;
}

@media (hover: hover) {
	a.overflowMenuButton:hover {
		transition: 0.15s;
	}

	a.overflowMenuButton:active {
		transition: 0.15s;
	}
}

@media (hover: none) {
	a.overflowMenuButton:active {
		transition: 0.15s;
	}
}

#overflowMenuToggleButton {
	display: none;
}

div.alert {
	position: fixed;
	display: inline-block;
	z-index: 999;
	top: 95%;
	left: 50%;
	opacity: 0;
	white-space: nowrap;
	-webkit-transform: scale(0) translate3d(0%, -100%, 0);
	transform: scale(0) translate3d(0%, -100%, 0);
	padding: 12px;
	border-radius: var(--default-radius);
	transition: 0.5s;
	transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

a.link-button {
	/* This is to vertically center the text */
	line-height: 25px;
	/* -- */
	-moz-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: transparent;
	font-family: "Comfortaa", sans-serif;
	font-size: 17px;
	border-radius: var(--default-radius);
	padding: 8px;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	cursor: pointer;
	transition: 0.2s;
}

a.disabled {
	pointer-events: none;
	opacity: 0.5;
}

@media (hover: hover) {
	a.link-button:hover {
		border-radius: 10px;
		transition: 0.2s;
		-webkit-transform: scale(1.06);
		transform: scale(0.95);
		cursor: pointer;
		opacity: 1;
	}

	a.link-button:active {
		transition: box-shadow 0.3s, transform 0.1s, opacity 0.25s, border 0.3s,
			border-radius 0.1s;
		-webkit-transform: scale(1);
		transform: scale(1.05);
		border-radius: var(--default-radius);
	}
}

@media (hover: none) {
	a.link-button:active {
		transition: box-shadow 0.4s, transform 0s, opacity 0.3s, border 0.1s;
		-webkit-transform: scale(0.93);
		transform: scale(0.93);
	}
}

button {
	/* This is to vertically center the text */
	line-height: 25px;
	/* -- */
	-webkit-tap-highlight-color: transparent;
	-moz-tap-highlight-color: transparent;
	font-family: "Comfortaa", sans-serif;
	font-size: 17px;
	border-radius: var(--default-radius);
	padding: 8px;
	text-align: center;
	text-decoration: none;
	display: flex;
	cursor: pointer;
	transition: 0.2s;
}

@media (hover: hover) {
	button:hover {
		border-radius: 10px;
		transition: 0.2s;
		-webkit-transform: scale(1.06);
		transform: scale(0.95);
		cursor: pointer;
		opacity: 1;
	}

	button:active {
		transition: box-shadow 0.3s, transform 0.1s, opacity 0.25s, border 0.3s,
			border-radius 0.1s;
		-webkit-transform: scale(1);
		transform: scale(1.05);
		border-radius: var(--default-radius);
	}
}

@media (hover: none) {
	button:active {
		transition: box-shadow 0.4s, transform 0s, opacity 0.3s, border 0.1s;
		-webkit-transform: scale(0.93);
		transform: scale(0.93);
	}
}

.material-icons-round.md-18 {
	font-size: 18px;
}

.material-icons-round.md-24 {
	font-size: 24px;
}

.material-icons-round.md-36 {
	font-size: 36px;
}

.material-icons-round.md-48 {
	font-size: 48px;
	-webkit-transform: scale(1);
	transform: scale(1);
	transition: 0.2s;
}

div.center-text {
	text-align: center;
	display: block;
}

img.squeeze {
	opacity: 0.7;
	transition: 0.4s;
	-webkit-transform: scale(1);
	transform: scale(1);
	padding-right: 0px;
	padding-bottom: 0px;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.315),
		0 17px 50px 0 rgba(0, 0, 0, 0.295);
	border-radius: 50%;
}

@media (hover: hover) {
	img.squeeze:hover {
		box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.336),
			0 17px 50px 0 rgba(0, 0, 0, 0.26);
		opacity: 1;
		transition: 0.2s;
		width: 50px;
		height: 50px;
	}
	img.squeeze:active {
		opacity: 0.4;
		transition: opacity 0.2s;
		height: 40px;
		width: 40px;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

@media (hover: none) {
	img.squeeze:active {
		transition: 0.2s;
		height: 40px;
		width: 40px;
		box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.18),
			0 3px 3px 3px rgba(0, 0, 0, 0.15);
	}
}

img.padded-InLine {
	opacity: 0.9;
	transition: 0.3s;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

img.padded-InLine:hover {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	transition: 0.2s;
}

img.blurred {
	width: 100%;
	transition: 0.7s;
	margin-bottom: -5px;
}

div.tooltip {
	position: relative;
	display: inline-block;
}

div.tooltip span.tooltiptext {
	font-size: 15px;
	visibility: hidden;
	width: 170px;
	height: 25px;
	text-align: center;
	border-radius: var(--default-radius);
	padding-top: 9px;
	padding-bottom: 2px;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0;
	transition: 0.5s;
	transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	margin-left: -100px;
	margin-top: -15px;
}

div.tooltip:hover span.tooltiptext {
	-webkit-transform: scale(1) translate3d(0px, -30px, 0px);
	transform: scale(1) translate3d(0px, -30px, 0px);
	transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transition: 0.35s;
	opacity: 1;
	visibility: visible;
}

div.tab {
	width: 45%;
	font-size: 1em;
	font-family: "Comfortaa", sans-serif;
	padding: 0;
	margin: 2%;
	border-radius: var(--default-radius);
	transition: 0.25s;
	position: relative;
	display: -ms-inline-grid;
	display: inline-grid;
}

div.tab img {
	height: 100%;
	width: 100%;
	border-radius: var(--default-radius);
}

div.tab:active {
	opacity: 0.5;
	transition: opacity 0.15s, box-shadow 0.2s;
	box-shadow: 0px 0px 0px 3px rgba(74, 74, 74, 0.18),
		0px 0px 0px 3 rgba(79, 79, 79, 0.15);
}

@media (hover: none) {
	div.tab:active {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		opacity: 0.4;
		transition: 0.25s;
		box-shadow: 0 2px 0px 2px rgba(0, 0, 0, 0.18),
			0 0px 0px 3px rgba(0, 0, 0, 0.15);
	}
}

div.tabTextContainer {
	background-image: url(/assets/noisy-texture-100x100-o3-d10-c-1a1a1a80-t1.png);
	background-color: #1a1a1a80;
	height: 20%;
	width: 100%;
	bottom: -1px;
	left: 0%;
	border-radius: 0px 0px var(--default-radius) var(--default-radius);
	transition: 0.25s;
	position: absolute;
	text-align: center;
}

div.tabTextContainer span {
	position: absolute;
	font-size: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: 0.25s;
}

@media (hover: hover) {
	div.tab:hover {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		transition: 0.2s;
	}

	div.tab:hover div.tabTextContainer {
		background-image: none;
		border-radius: var(--default-radius);
		opacity: 1;
		transition: 0.25s;
		height: 100%;
	}

	div.tab:hover img {
		transition: 0.25s;
	}

	div.tab:hover div.tabTextContainer span {
		opacity: 1;
		font-size: 200%;
		top: 50%;
		left: 50%;
		transition: 0.2s;
	}
}

@media (max-width: 1090px) {
	div.tab {
		width: 90%;
	}
}

@media (min-width: 2200px) {
	div.tab {
		width: 25%;
	}
}

/* Modal stuff */

div.overlay {
	z-index: 9;
	position: fixed;
	visibility: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: 0.7s;
}

div.modal {
	z-index: 99;
	visibility: hidden;
	overflow: auto;
	border-radius: var(--default-radius);
	position: fixed;
	width: 55%;
	height: 80%;
	left: 50%;
	margin-left: -30%;
	top: 10%;
	padding: 0px;
	opacity: 0;
	transition: all 0.4s, margin-left 0s;
	transition-timing-function: cubic-bezier(0.62, -0.9, 0.3, 1.35);
	transform: scale(1.1);
}

@media (max-width: 1000px) {
	div.modal {
		width: 70%;
	}
}

@media (max-width: 750px) {
	div.modal {
		width: 90%;
	}
}

div.modalHeader {
	z-index: 9;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 2.2em;
	margin: 0;
	width: calc(100% - 20px);
	background-color: rgba(52, 52, 52, 0.653);
	padding: 10px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

h3.modalHeading {
	display: flex;
	float: left;
	vertical-align: top;
	margin: 10px;
}

img.focused:hover {
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
	transition: 0.2s;
}

div.CloseIcon {
	display: flex;
	cursor: pointer;
	float: right;
	padding: 6px;
	transition: 0.2s;
	border-radius: var(--default-radius);
	-moz-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	div.CloseIcon:hover {
		opacity: 1;
		transition: 0.2s;
	}
}

div.CloseIcon:active {
	transition: box-shadow 0.2s, opacity 0s, transform 0.2s;
	transform: scale(0.9);
}

/* End of modal stuff */

#copyId {
	font-size: 16px;
	cursor: default;
	background-color: #ffffff23;
	display: inline-flex;
	padding: 4px;
	margin-top: 1px;
	border-radius: var(--default-radius);
	transition: 0.3s;
	transform: scale(1.25);
}

#copyId:hover {
	box-shadow: 0px 0px 0px 2px #ffffff38;
	transition: 0.3s;
}

#copyId:active {
	box-shadow: 0px 0px 0px 4px #9c9c9c72;
	transition: 0.3s;
}

#particleContainer {
	overflow: hidden;
	position: fixed;
	height: 100vh;
	width: 100vw;
}