/*!
* bl-css
* (c) 2026 __fg_xd
* Licensed under LGPLv2.1 License
* https://github.com/fg-xd/bl-CSS
* https://npmjs.com/package/bl-css
*/
@import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Cause:wght@700&display=swap);
@layer low{
:root{
	--_: rgb(138, 43, 226);
	--_4: rgba(138, 43, 226, 0.4);
	--_6: rgba(138, 43, 226, 0.6);
}
/* Cat hate clunky Scrollbar */
/* So here's a beautiful bl-css scrollbar!! (new) */
::-webkit-scrollbar{
	width: 10px;
}
::-webkit-scrollbar-track{
	background-color: transparent;
}
::-webkit-scrollbar-thumb{
	background-color: var(--_6);
	border-radius: 9999px;
	/* Browser is dumb. not allow transition 😿 */
}
::-webkit-scrollbar-thumb:hover{
	background-color: var(--_);
}
::-webkit-scrollbar-button{
	display: none;
}
::-webkit-scrollbar-corner{
	background-color: transparent;
}
/* 😸😸 */
body{
	background-color: black;
	color: white;
}
.purpl{
	font-family: "Cause";
	background: linear-gradient(
        to bottom,
        var(--_4),
        var(--_),
        var(--_4));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.h1{
	font-family: "Lilita One";
	display: table;
	padding: 10px; /* No more 2rem */
	border-bottom: 0.5px solid;
	border-bottom-color: rgba(255,255,255,0.3);
	transition: 0.4s ease;
}
.h1:hover{
	color: transparent;
	background: linear-gradient(to bottom, var(--_4), var(--_), var(--_4));
	background-clip: text;
	-webkit-background-clip: text;
	border-bottom-color: var(--_);
}
.normalp{
	display: table;
	font-family: "Cause";
}
.shadedp{
	display: table;
	font-family: "Cause";
	padding: 3px;
	background-color: rgba(128,128,128,0.4);
	border-left: rgba(128,128,128,1) 1px solid;
	border-right: transparent 1px solid;
	border-bottom: transparent 1px solid;
	border-top: transparent 1px solid;
	transition: 0.4s ease;
	border-radius: 5px;
}
.shadedp:hover{
	border: 1px solid rgba(128,128,128,1);
}
.clearp	{
	display: table;
	font-family: "Cause";
	color: white;
	padding: 3px;
	background-color: var(--_4);
	border-left: var(--_) 1px solid;
	border-right: transparent 1px solid;
	border-bottom: transparent 1px solid;
	border-top: transparent 1px solid;
	border-radius: 5px;
	transition: 0.4s ease;
}
.clearp:hover{
	border: var(--_) 1px solid;
	background-color: var(--_6);
}
.alertp{
	display: table;
	font-family: "Cause";
	padding: 3px;
	background-color: rgba(255,0,0,0.4);
	border-left: rgba(255,0,0,1) 1px solid;
	border-right: transparent 1px solid;
	border-bottom: transparent 1px solid;
	border-top: transparent 1px solid;
	border-radius: 5px;
	transition: 0.4s ease;
}
.alertp:hover{
	border: rgba(255,0,0,1) 1px solid;
}
.importantp{
	display: table;
	font-family: "Cause";
	background-color: rgba(255,255,255,0.4);
	border-left: rgb(255,255,255) 1px solid;
	padding: 3px;
	border-radius: 5px;
	transition: 0.4s ease;
}
.importantp:hover{
	background-color: black;
	border-left: rgba(255,255,255,0.5) 1px solid;
}
.link{
	display: table;
	font-family: "Cause";
	text-decoration: none;
	color: var(--_);
	transition: 0.1s ease;
	cursor: default;
}
.link:hover{
	color: var(--_);
	text-decoration-color: var(--_);
	text-decoration: underline;
}
.btn{
	display: table;
	font-family: "Cause";
	border-radius: 7px;
	border: 2px solid var(--_);
	background-color: var(--_);
	transform: translateY(0px);
	padding: 5px;
	transition: 0.4s ease;
}
.btn:hover{
	transform: translateY(2px);
	background-color: transparent;
	border: 2px solid var(--_);
}
.btn:active{
	transform: translateY(3px);
	background-color: transparent;
	border: 2px solid var(--_);
	transition: 0.1s ease;
}
.btn2{
	display: table;
	font-family: "Cause";
	border-radius: 7px;
	border: 2px solid var(--_);
	background-color: transparent;
	transform: translateY(0px);
	padding: 5px;
	transition: 0.4s ease;
}
.btn2:hover{
	transform: translateY(2px);
	background-color: var(--_);
}
.btn2:active{
	transform: translateY(3px);
	background-color: var(--_);
	transition: 0.1s ease;
}
.card{
	display: flex;
	flex-direction: column;
	width: fit-content;
	text-align: center;
	padding: 10px;
	box-shadow: 0 0 5px var(--_);
	background-color: black;
	border-radius: 5px;
	transition: 0.4s ease;
}
.card:hover{
	transform: translateY(-3px);
	box-shadow: 0 0 10px var(--_);
}
.card-row{
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.card-col{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.form{
	display: table;
	padding: 12px;
	border: var(--_4) 1px solid;
	border-radius: 5px;
	background-color: black;
	transition: 0.4s ease;
}
.form:hover{
	border: var(--_) 1px solid;
}
.form:focus-within{
	border: var(--_) 1px solid;
}
.in{
	display: table;
	color: white;
	font-family: "Cause";
	padding: 5px;
	background-color: black;
	border: rgba(128,128,128,0.6) 1px solid;
	border-radius: 5px;
	transition: 0.4s ease;
}
.in:hover{
	border: var(--_) 1px solid;
}
.in:focus{
	border: var(--_) 1px solid;
	outline: none;
}
.in::placeholder{
	color: rgb(128,128,128);
	font-family: "Cause";
}
.label{
	font-family: "Cause";
	padding: 4px 0;
	color: white;
	transition: 0.4s ease;
}
.label:focus-within{
	color: var(--_);
}
.hero{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	flex-direction: column;
	gap: 10px;
}
.navbar{
	height: auto;
	min-height: fit-content;
	display: grid;
	padding: 0 5px;
	grid-template-columns: auto 1fr;
	top: 15px;
	right: 15%;
	left: 15%;
	border-radius: 9999px;
	background-color: rgba(0,0,0,0.6);
	border: 2px solid rgb(50,50,50);
	position: fixed;
}
.navtitle{
	grid-column: 1;
	align-items: center;
	/* Use with h1 */
}
.navlinks{
	grid-column: 2;
	display: flex;
	gap: 5px;
	justify-content: end;
	align-items: center;
	/* add your links to the right */
}
.h1-hero{
	font-family: "Lilita One";
	display: table;
	padding: 10px;
	color: transparent;
	-webkit-text-stroke: 1px var(--_);
	text-stroke: 1px var(--_);
}
}