@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @font-face {
	font-family: "Monaspace Argon";
	src: url("/src/font/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2"),
		url("/src/font/MonaspaceArgonVarVF[wght,wdth,slnt].woff") format("woff");
	font-weight: normal;
	font-style: normal;
} */
@font-face {
	font-family: "Monaspace Neon";
	src: url("/src/font/MonaspaceNeonVarVF[wght,wdth,slnt].woff2") format("woff2"),
		url("/src/font/MonaspaceNeonVarVF[wght,wdth,slnt].woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #0d1117;
	color: white;
	font-family: "Monaspace Neon", monospace;
	/* font-family: "Fira Sans", monospace; */
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}
::-webkit-scrollbar-thumb {
	background: var(--rose);
	border: 0px none #ffffff;
	border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
	background: var(--rose);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
	background: rgba(11, 11, 11, 0.1);
	border: 0px none #ffffff;
	/* border-radius: 10px; */
}
::-webkit-scrollbar-corner {
	background: transparent;
}

a:any-link {
	color: var(--text);
	text-decoration: wavy underline var(--rose);
	transition: color 0.35s ease;
}
a:any-link:hover {
	color: var(--syntax-comment);
}
a:any-link:active {
	color: var(--text);
}

:root {
	--syntax-foreground: #252931;
	--syntax-background: #282c34;
	--syntax-gutter: #1d2025;
	--syntax-comment: #5c6370;
	--syntax-guide: #cccccc;
	--syntax-accent: #528bff;
	--text: #abb2bf;
	--cyan: #56b6c2;
	--blue: #61afef;
	--purple: #c678dd;
	--green: #98c379;
	--rose: #e06c75;
	--orange: #d19a66;
	--red: #be5046;
	--gold: #e5c07b;
}

.screen-warning {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(13, 17, 23, 0.6);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1001;
	text-align: center;
	pointer-events: none;
	opacity: 0;
}

.screen-warning .corners,
.screen-warning .text {
	position: absolute;
	width: 90%;
	height: 90%;
}

.screen-warning .text {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 2.5em;
}

.corners::before,
.corners::after {
	content: "";
	position: absolute;
	width: 2em;
	height: 2em;
	border: 2px solid #abb2bf;
}

/* top left */
.corners::before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
}

/* bottom right */
.corners::after {
	bottom: 0;
	right: 0;
	border-width: 0 2px 2px 0;
}

@media screen and (max-width: 700px) {
	body {
		overflow: hidden;
		height: 100vh;
	}
	.screen-warning {
		opacity: 1;
	}
}