@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);
}

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;
	font-size: 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: underline;
	color: white;
	text-decoration-color: white;
	transition: 0.1s ease;
}
.link:hover{
	color: var(--_);
	text-decoration-color: var(--_);
}
.linkbtn{
	display: table;
	color: white;
	font-family: "Cause";
	padding: 5px;
	border: rgba(128,128,128,0.6) 2px solid;
	background-color: rgba(255,255,255,0.4);
	border-radius: 7px;
	transform: translateY(0px);
	transition: 0.4s ease;
}
.linkbtn:hover{
	color: white;
	transform: translateY(2px);
	border: var(--_6) 2px solid;
	background-color: transparent;
}
.linkbtn:active{
	transform: translateY(3px);
	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;
}
}