/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
@import url("https://fonts.googleapis.com/css2?family=Sixtyfour&family=Staatliches&display=swap");

.main-content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

@font-face {
	font-family: "Unispace";
	font-style: normal;
	font-weight: normal;
	src: local("Unispace-Bold"), url("/assets/fonts/unispace.woff") format("woff");
}

body {
	background: url("/assets/img/background.gif") no-repeat top center fixed;
	background-size: cover;
	cursor: url("/assets/img/cursor/cursor.png") 32 0, auto;
	margin: 0;
	overflow: hidden;
	animation: fadeInAnimation ease 1.7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: -1;
	pointer-events: none;
}

html {
	--scrollbarBG: black;
	--thumbBG: blue;
}

a:link {
	color: blue;
	text-decoration: none;
	font-weight: bold;
}

/* visited link */
a:visited {
	color: blue;
}

/* mouse over link */
a:hover {
	color: white;
	text-decoration: line-through;
}

/* selected link */
a:active {
	color: grey;
}

.hilite {
	background-color: #051396;
}

::selection {
	background: #000000;
	color: white;

	/* WebKit/Blink Browsers */
}

::-moz-selection {
	background: #000000;
	/* Gecko Browsers */
	color: white;
}

.divtext {
	color: white;
	font-family: monospace;
	font-size: 14px;

	line-height: 30px;
	background: transparent;
	padding: 1px;
}

.divtext1 {
	color: white;
	font-size: 17px;

	font-family: "Unispace", monospace;
	line-height: 30px;
	background: transparent;
	padding: 1px;
}

.qrows {
	color: blue;
	font-family: "Unispace", monospace;
	font-size: 50px;
	margin: 10px 0 0 10px;
	white-space: nowrap;
	overflow: hidden;

	animation: type 4s steps(60, end);
	font-style: italic;
	font-weight: bold;
	text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em blue;
	letter-spacing: 7px;
	text-decoration: line-through;
}

.qrows:hover {
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

.cant {
	color: white;
	font-family: "Unispace", monospace;
	font-size: 17px;
	margin: 10px 0 0 0px;
	white-space: nowrap;
	overflow: hidden;
	width: 30em;
	font-style: italic;
	font-weight: bold;

	text-align: right;
	text-shadow: 0 0 2px blue;
	line-height: 90%;
}

.divheader {
	color: white;
	font-family: "Unispace", monospace;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px blue;

	padding-left: 3px;
	padding-right: 3px;

	background: transparent;

	display: inline;
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	text-decoration: 2px underline;
	text-decoration-color: blue;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.main {
	width: 1000px;
	height: 600px;
	background-color: transparent;
	margin: auto;
	border-radius: 10px;
}

.sections2 {
	height: 149px;
	margin-top: 0px;
	margin-bottom: 10px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
	scrollbar-width: thin;
	overflow: auto;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);

	background-size: 2em 2em;
	background: transparent;
	opacity: 1;
}

.sections2:hover {
	box-shadow: 0 0 5px blue;
}

.sections3 {
	width: 100%;
	height: 149px;
	margin-top: 10px;
	margin-bottom: 0px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
	scrollbar-width: thin;
	overflow: auto;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);

	background: radial-gradient(circle, transparent 25%, #000000 26%),
		linear-gradient(45deg,
			transparent 46%,
			#000000 47%,
			#000000 52%,
			transparent 53%),
		linear-gradient(135deg,
			transparent 46%,
			#000000 47%,
			#000000 52%,
			transparent 53%);
	background-size: 2em 2em;
	background-color: #000000;
	opacity: 1;
}

.sections3:hover {
	box-shadow: 0 0 5px blue;
}

.main2 {
	width: 990px;
	height: 590px;

	border: 1.5px solid white;
	border-radius: 10px;

	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.main3 {
	scrollbar-width: thin;
	overflow: auto;
	padding: 10px;
	width: 300px;
	height: 480px;
	float: right;
	margin-left: 9px;
	border: 1px solid blue;
	margin-right: 9px;
	border-radius: 10px;
	background: transparent;
}

.innersec {
	padding: 4px;
}

.innermain {
	width: 100%;
	height: 99%;
	scrollbar-width: thin;
	overflow: auto;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;

	background-size: 2em 2em;
	opacity: 1;
}

.main3:hover {
	box-shadow: 0 0 7px blue;
}

.main3_1 {
	padding: 10px;
	width: 270px;
	height: 224px;
	float: left;
	margin-left: 9px;
	margin-bottom: 10px;
	margin-right: 9px;

	border: 1px solid blue;
	border-radius: 10px;

	background: transparent;
}

.main3_1:hover {
	border: 1px solid blue;
	box-shadow: 0 0 7px blue;
}

.scrolling-banner {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
	background-color: black;
	color: blue;
	font-family: "Unispace", monospace;
	font-size: 50px;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

.scrolling-banner-content {
	display: inline-block;
	animation: scrollBanner 15s linear infinite;
}

.scrolling-banner img {
	vertical-align: middle;
	height: 50px;
	margin: 0 69px;
}

@keyframes scrollBanner {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

a,
button {
	cursor: url("/assets/img/cursor/pointer.png") 32 0, pointer;
}

/* initial screen styles */
#initial-screen {
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 69;
	overflow: hidden;
}

#background-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: column;
}

#enter-button,
#tips-button {
	font-family: "Sixtyfour", sans-serif;
	font-size: 69px;
	/* haha so funny */
	color: rgb(30, 101, 255);
	cursor: pointer;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	animation: glow-animation 1.5s infinite alternate;
}

#enter-button:hover,
#tips-button:hover {
	transform: scale(1.1);
}

@keyframes glow-animation {
	0% {
		text-shadow: 0 0 5px rgb(42, 42, 255), 0 0 10px rgb(40, 40, 255),
			0 0 15px rgb(36, 32, 255);
	}

	100% {
		text-shadow: 0 0 10px rgb(0, 56, 209), 0 0 20px rgb(0, 0, 184),
			rgb(43, 43, 255) 30px rgb(19, 42, 255);
	}
}

#welcome-video {
	display: none;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	top: 0;
	left: 0;
	overflow: hidden;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.divheader {
	color: white;
	font-family: "Unispace", monospace;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px blue;

	padding-left: 3px;
	padding-right: 3px;

	display: inline;
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	text-decoration: 2px underline;
	text-decoration-color: blue;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.divtext {
	color: white;
	font-family: monospace;
	font-size: 14px;

	line-height: 30px;
	background: transparent;
	padding: 3px;
}

.qrows {
	color: blue;
	font-family: "Unispace", monospace;
	font-size: 50px;
	margin: 10px 0 0 10px;
	white-space: nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 4s steps(60, end);
	font-style: italic;
	font-weight: bold;
	text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em blue;
	letter-spacing: 7px;
	text-decoration: line-through;
}

.qrows:hover {
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
	from {
		text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em blue;
	}

	to {
		text-shadow: 1px 1px 5px blue, 0 0 1em blue, 0 0 0.2em blue;
	}
}

@keyframes glow {
	from {
		text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em blue;
	}

	to {
		text-shadow: 1px 1px 5px blue, 0 0 1em blue, 0 0 0.2em blue;
	}
}

.socmedlinks {
	float: right;
	width: 50%;
	height: 33px;
	background-color: transparent;
	color: blue;
	font-family: "Unispace", monospace;
	text-align: center;
	margin: auto;
	padding: 3px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
	border-left: 1px solid blue;
	border-right: 1px solid blue;
	font-size: 20px;
	margin-top: 3px;
	margin-bottom: 3px;
	border-radius: 7px;
	font-weight: bold;
	font-style: italic;
}

.socmedlinks:hover {
	background-color: #000000;
	color: white;
	text-decoration: line-through;
	background-image: linear-gradient(to bottom right, blue, blue, #000000);
}

.socmedlinks:active {
	background-color: blue;
	box-shadow: 2px 2px 5px blue;
	background-image: none;
}

.cant {
	color: blue;
	font-family: "Unispace", monospace;
	font-size: 17px;
	margin: 10px 0 0 0px;
	white-space: nowrap;
	overflow: hidden;
	width: 30em;
	font-style: italic;
	font-weight: bold;
	float: right;
	text-align: right;

	line-height: 90%;
}

@keyframes type {
	from {
		width: 0;
	}
}

.sections {
	width: 100%;
	height: 150px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
	scrollbar-width: thin;
	overflow: auto;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);

	background-size: 2em 2em;
	background: transparent;
	opacity: 1;
	color: white;
}

.sections:hover {
	box-shadow: 0 0 5px blue;
}

.animated-border-box,
.animated-border-box-glow {
	height: 600px;
	width: 1000px;

	position: absolute;
	overflow: hidden;
	z-index: 0;
	/* border Radius */
	border-radius: 10px;
}

.animated-border-box-glow {
	overflow: hidden;
	/* glow Blur */
	filter: blur(20px);
}

.animated-border-box:before,
.animated-border-box-glow:before {
	content: "";
	z-index: -2;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	position: absolute;
	width: 99999px;
	height: 99999px;
	background-repeat: no-repeat;
	background-position: 0 0;
	/*border color, change middle color*/
	background-image: conic-gradient(rgba(0, 0, 0, 0),
			blue,
			#00ff26,
			blue,
			rgba(0, 0, 0, 0) 25%);
	/* change speed here */
	animation: rotate 4s linear infinite;
}

.animated-border-box:after {
	content: "";
	position: absolute;
	z-index: -1;
	/* border width */
	left: 5px;
	top: 5px;
	/* double the px from the border width left */
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	/*bg color*/
	background: transparent;
	/*box border radius*/
	border-radius: 7px;
}

@keyframes rotate {
	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.button {
	--blue-700: rgb(25, 25, 25);
	--border_radius: 9999px;
	--transtion: 0.3s ease-in-out;
	--offset: 2px;

	cursor: pointer;
	position: relative;

	display: flex;
	align-items: center;
	gap: 0.5rem;

	transform-origin: center;

	padding: 0.5rem 1.2rem;
	background-color: transparent;

	border: none;
	border-radius: var(--border_radius);
	transform: scale(calc(1 + (var(--active, 0) * 0.1)));

	transition: transform var(--transtion);
}

.button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 100%;
	height: 100%;
	background-color: var(--blue-700);

	border-radius: var(--border_radius);
	box-shadow: inset 0 0.5px blue, inset 0 -1px 2px 0 hsl(0, 0%, 0%),
		0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
		0 0 0 calc(var(--active, 0) * 0.375rem) blue;

	transition: all var(--transtion);
	z-index: 0;
}

.button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 100%;
	height: 100%;
	background-color: hsla(240, 100%, 16%, 0.75);
	background-image: radial-gradient(at 51% 89%,
			rgb(74, 88, 167) 0px,
			transparent 50%),
		radial-gradient(at 100% 100%, rgb(0, 105, 100) 0px, transparent 50%),
		radial-gradient(at 22% 91%, rgb(0, 87, 109) 0px, transparent 50%);
	background-position: top;

	opacity: var(--active, 0);
	border-radius: var(--border_radius);
	transition: opacity var(--transtion);
	z-index: 2;
}

.button:is(:hover, :focus-visible) {
	--active: 1;
}

.button:active {
	transform: scale(1);
}

.button .dots_border {
	--size_border: calc(100% + 2px);

	overflow: hidden;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: var(--size_border);
	height: var(--size_border);
	background-color: transparent;

	border-radius: var(--border_radius);
	z-index: -10;
}

.button .dots_border::before {
	content: "";
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: left;
	transform: rotate(0deg);

	width: 100%;
	height: 2rem;
	background-color: rgb(16, 13, 179);

	mask: linear-gradient(transparent 0%, white 120%);
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

.button .sparkle {
	position: relative;
	z-index: 10;

	width: 1.75rem;
}

.button .sparkle .path {
	fill: currentColor;
	stroke: currentColor;

	transform-origin: center;

	color: hsl(0, 0%, 100%);
}

.button:is(:hover, :focus) .sparkle .path {
	animation: path 1.5s linear 0.5s infinite;
}

.button .sparkle .path:nth-child(1) {
	--scale_path_1: 1.2;
}

.button .sparkle .path:nth-child(2) {
	--scale_path_2: 1.2;
}

.button .sparkle .path:nth-child(3) {
	--scale_path_3: 1.2;
}

@keyframes path {

	0%,
	34%,
	71%,
	100% {
		transform: scale(1);
	}

	17% {
		transform: scale(var(--scale_path_1, 1));
	}

	49% {
		transform: scale(var(--scale_path_2, 1));
	}

	83% {
		transform: scale(var(--scale_path_3, 1));
	}
}

.button .text_button {
	position: relative;
	z-index: 10;

	background-image: linear-gradient(90deg,
			rgb(48 69 255) 0%,
			rgb(71, 88, 241) 120%);
	background-clip: text;

	font-size: 1rem;
	color: transparent;
}

@media only screen and (max-width: 768px) {
	.main {
		width: 100%;
		height: auto;
		padding: 10px;
	}

	.main2 {
		width: 95%;
		height: auto;
		position: relative;
		transform: none;
		top: 0;
		left: 0;
		margin: 10px auto;
	}

	.main3,
	.main3_1 {
		width: 90%;
		height: auto;
		float: none;
		margin: 10px auto;
	}

	.animated-border-box,
	.animated-border-box-glow {
		width: 100%;
		height: auto;
		position: relative;
	}

	.qrows {
		font-size: 30px;
		width: 100%;
		margin: 10px;
		letter-spacing: 3px;
	}

	.cant {
		width: 100%;
		font-size: 14px;
		text-align: center;
		float: none;
	}

	.socmedlinks {
		width: 100%;
		float: none;
		margin: 5px auto;
	}

	.sections,
	.sections2,
	.sections3 {
		height: auto;
	}

	.divheader {
		font-size: 18px;
	}

	.divtext,
	.divtext1 {
		font-size: 12px;
		line-height: 24px;
	}

	#initial-screen {
		height: 100svh;
	}

	#button-container {
		bottom: 10%;
	}

	#enter-button,
	#tips-button {
		font-size: 40px;
	}

	.scrolling-banner {
		display: none;
	}

	body {
		overflow-y: auto;
	}

	#background-image {
		width: 120%;
		/* slightly wider than viewport to allow for some overflow */
		height: 120%;
		/* slightly taller... */
		object-fit: cover;
		object-position: center;
	}
}

/* add viewport height support for modern mobile browsers */
@media only screen and (max-width: 768px) {
	.main-content {
		height: auto;
		min-height: 100svh;
		padding: 20px 0;
	}
}

/* quick fix for extremely small screens, i want to go to sleep already */
@media only screen and (max-width: 320px) {
	.qrows {
		font-size: 24px;
	}

	.divheader {
		font-size: 16px;
	}

	#enter-button,
	#tips-button {
		font-size: 32px;
	}
}


@media only screen and (max-width: 480px) {
	#background-image {
		width: 130%;
		height: 130%;
	}
}

#logo-container {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-top: 80px;
}

#logo-image {
	width: 100%;
	/* width for smaller screens */
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

@media (min-width: 1280px) {
	#logo-image {
		width: calc(100% - 500px);
		/* spacing for larger screens */
	}
}