/* Hide info banner - to unhide comment this out */
#importantinfobanner {
	display: none;
}

body, h1, h2, h3, h4, h5, h6 {
	font-family: "Geist";
	font-weight: 600;
}

.w3-xlarge {
	font-weight: 700;
	letter-spacing: 2px;
}

.w3-xxlarge, .w3-xxxlarge {
	font-weight: 800;
	letter-spacing: 6px;
}

body, html {
	height: 100%;
	color: #ffffff;
	line-height: 1.6;
	scroll-behavior: smooth;
}

.w3-wide {
	letter-spacing: 10px;
}

.w3-hover-opacity {
	cursor: pointer;
}

.opacity-transition {
	transition: opacity 150ms;
}

.backdrop-filter-blur-transition {
	transition: backdrop-filter 150ms;
	backdrop-filter: blur(4px);
}

.text-gradient-blue-pink {
	background-image: linear-gradient(90deg, #737dea 0%, #de00a6 100%);
	color: transparent;
	background-clip: text;
}

.text-gradient-blue-pink-2 {
	background-image: linear-gradient(110deg, #5670f5 0%, #463be9 40%, #6b00ca 100%);
	color: transparent;
	background-clip: text;
}

.w3-btn {
	border-radius: 3px;
}

.img-border {
	border-radius: 5px;
}

.btn-gradient-blue-pink {
	background-image: linear-gradient(110deg, #5670f5 0%, #737dea 30%, #6b00ca 80%, #de00a6 100%);
	background-size: 200% 100%;
	background-position: 0% 0%;
}

.btn-gradient-blue-pink:hover {
	background-position: 100% 0%;
	color: rgb(237, 237, 237);
}

.btn-hover-transition {
	transition: background-position 500ms, color 150ms, box-shadow 200ms;
}

.text-mono {
  font-family: "Geist Mono";
  font-weight: 600;
}

.text-shadow-glow {
	text-shadow: 0 0 3px #000000;
}

.box-shadow-glow {
	box-shadow: 0px 0px 6px #000000;
}

.box-border-radius {
	border-radius: 5px;
}

.bgimg-top {
	/* background-image: url("/images/parallax/parallax_main_wide.jpg"); */
	min-height: 60%;

	animation-name: bg-top-fade-in;
	animation-duration: 5s;
	animation-timing-function: cubic-bezier(0, 0, 0, 1);
	animation-iteration-count: 1;
	animation-fill-mode: both;

	/* Create a Parallax Effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;

	background-color: rgba(0,0,0,1.0);
	background-blend-mode: overlay;
	background-size: auto 130%; /* Need to fix borders (image does not always cover whole screen) */
}
@keyframes bg-top-fade-in {
	to {
		background-color: rgba(0,0,0,0.0);
		background-size: auto 110%;
	}
}

/* Turn off parallax scrolling for tablets and phones */
/*
@media only screen and (max-device-width: 1024px) {
	.bgimg-top {
		background-attachment: scroll;
	}
}
*/

.bg-gradient-blue-pink {
  background-image: linear-gradient(110deg, #5670f5 0%, #737dea 30%, #6b00ca 80%, #de00a6 100%);
  color: rgb(237, 237, 237);
}

/* Fancy background for info banner */
.bg-diagonal-warning-pattern {
	/* Created with the help of: https://css-tricks.com/books/fundamental-css-tactics/striped-barberpole-animation/ */
	/* background-image: repeating-linear-gradient(-45deg, rgba(20,20,20,0.7) 0px, rgba(20,20,20,0.7) 40px, rgba(242,141,0,0.7) 40px, rgba(242,141,0,0.7) 80px); */
	background-image: repeating-linear-gradient(-45deg, rgba(20,20,20,0.7) 0px, rgba(20,20,20,0.7) 40px, rgba(156,39,176,0.7) 40px, rgba(156,39,176,0.7) 80px);

	/* Animation? No, thats too much...
	background-size: 200% 100%;
	background-position-x: -225px;

	animation-name: bg-pos-x;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	*/
}
/*
@keyframes bg-pos-x {
	to { background-position-x: 0px }
}
*/

.color-day {
	color: rgb(46, 46, 46);
	--rgb: 46,46,46;
}

.background-color-day {
	background-color: rgb(237, 237, 237);
	--rgb: 237,237,237;
}

.navbar-color-day {
	color: rgb(46, 46, 46);
	background-color: rgb(237, 237, 237);
}

.color-night {
	color: rgb(237, 237, 237);
	--rgb: 237,237,237;
}

.background-color-night {
	background-color: rgb(20, 14, 24);
	--rgb: 20,14,24;
}

.navbar-color-night {
	color: rgb(237, 237, 237);
	background-color: rgb(0, 0, 0);
}

/* One time animations */
.animation-from-top-2s {
	animation: from-top, fade-in;
	animation-duration: 2s, 2s;
	animation-timing-function: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0, 1);
	animation-iteration-count: 1, 1;
	animation-fill-mode: both, both;

	position: relative;
	top: -50px;
	opacity: 0;
}
.animation-fade-in-1s {
	animation-name: fade-in;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0, 0, 0, 1);
	animation-iteration-count: 1;
	animation-fill-mode: both;

	opacity: 0;
}
.animation-bg-fade-in-2s {
	animation-name: bg-fade-in;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0, 0, 0, 1);
	animation-iteration-count: 1;
	animation-fill-mode: both;

	background-color: rgba(var(--rgb),0.0);
	backdrop-filter: blur(0px)
}
.animation-gradient-shift-2s {
	animation-name: gradient-shift;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
	animation-iteration-count: 1;
	animation-fill-mode: both;

	background-image: linear-gradient(140deg, #abb2f5 0%, #737dea 20%, #de00a6 60%, #737dea 80%, #abb2f5 100%);
	color: transparent;
	background-clip: text;
	background-size: 200% 100%;
	background-position-x: 0%;
}
@keyframes from-top {
	to { top: 0px }
}
@keyframes fade-in {
	to { opacity: 1 }
}
@keyframes bg-fade-in {
	to {
		background-color: rgba(var(--rgb),0.4);
		backdrop-filter: blur(8px);
	}
}
@keyframes gradient-shift {
	to { background-position-x: 200% }
}

/* Repeating animations */
.animation-fading-3s {
	animation-name: fade-out-in;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0, 0, 0, 1);
	animation-iteration-count: infinite;
	animation-fill-mode: none;

	opacity: 1;
}
@keyframes fade-out-in {
	/* The timing function (cubic-bezier(0, 0, 0, 1)) will apply for each step (from 0% to 50% and again from 50% to 100%) */
	0% { opacity: 1 }
	50% { opacity: 0 }
	100% { opacity: 1 }
}