:root {
	--text:#8b49d9;
	--border:#8b49d9;
	--link:#f34fe8;
	--accent:#dcb3f8;
	--accent2:#ffe6ff;
	--h1-text:#c488ff;
	--h1-bg:#edc9ff;
	--body-color:#bcd9a4;
	--bg-color:#dbd9ff;
	--bg-gradient:linear-gradient(180deg,rgba(237, 201, 255, 1) 50%,rgba(189, 219, 228, 1) 70%,rgba(188, 217, 164, 1) 80%);
	--shadow:#cea3ea;
	--rainbow:linear-gradient(90deg, rgba(214,236,243,0) 0%, rgba(255,213,208,.7) 15%, rgba(252,255,196,.7) 30%, rgba(199,255,196,.7) 50%, rgba(196,255,251,.7) 70%, rgba(248,215,255,.7) 85%, rgba(214,236,243,0) 100%);
	--rainbow-wk:-webkit-linear-gradient(top, #ffb5cd 2%,#ffcca8 17%,#fff6b7 35%,#daffb7 55%,#aadeff 76%,#cebafc 97%);
	--transparent:#cea3ea80;
	--glowtext:#fff;
	
	--clouds:url("https://files.catbox.moe/vuywpx.png");
	--logo:url("https://files.catbox.moe/dxv0wr.png");
	--header-bg:url("https://files.catbox.moe/n35679.png");
	--brick:url("https://files.catbox.moe/n50718.png");
	--dagger:url("https://files.catbox.moe/vyfx5x.png");
	--dagger1:url("https://files.catbox.moe/rjrrp8.png");
	--dagger2:url("https://files.catbox.moe/monjw9.png");
	--vines:url("https://files.catbox.moe/r8ejhm.png");
			--vines1:url("https://files.catbox.moe/99pazx.png");
	--chains:url("https://files.catbox.moe/7f3hdp.png");
	--chains1:url("https://files.catbox.moe/jh13ey.png");
	--chains2:url("https://files.catbox.moe/n18sb3.png");
	--footer:url("https://files.catbox.moe/jwoowd.png");
	--heart:url("https://files.catbox.moe/gsezkc.gif");

}

[data-theme="dark"] {
	--text:#f1bdff;
	--border:#8b49d9;
	--link:#ff75f6;
	--accent:#5d42ba;
	--accent2:#302556;
	--h1-text:#c488ff;
	--h1-bg:#5a536e;
	--h1-bg:#413562;
	--body-color:#5c8051;
	--bg-color:#6a66b0;
	--bg-color:#534995;
	--bg-gradient:linear-gradient(180deg, rgba(100,69,167,1) 50%, rgba(82,113,144,1) 70%, rgba(93,130,77,1) 80%);
	--shadow:#3f326a;
	--rainbow:linear-gradient(90deg, rgba(235,100,131,0) 3%, rgba(235,100,131,.5) 9%, rgba(233,143,112,.5) 23%, rgba(204,154,126,.5) 33%, rgba(168,192,154,.5) 52%, rgba(178,155,219,.5) 69%, rgba(199,105,192,.5) 88%, rgba(202,152,130,0) 97%);
	--rainbow-wk:-webkit-linear-gradient(top, #eb6483 0%,#e98f70 10%,#cc9a7e 20%,#a8c09a 45%,#b29bdb 60%,#c769c0 80%);
	--transparent:#30255680;
	--glowtext:#fff;
	
	--clouds:url("https://files.catbox.moe/t8hl6m.png");
	--logo:url("https://files.catbox.moe/baeyg3.png");
	--header-bg:url("https://files.catbox.moe/vdlwjc.png");
	--brick:url("https://files.catbox.moe/w5omej.png");
	--dagger:url("https://files.catbox.moe/wmmazz.png");
	--dagger1:url("https://files.catbox.moe/n55cvq.png");
	--dagger2:url("https://files.catbox.moe/a4idda.png");
	--vines:url("https://files.catbox.moe/r8ejhm.png");
			--vines1:url("https://files.catbox.moe/99pazx.png");
	--chains:url("https://files.catbox.moe/7f3hdp.png");
	--chains1:url("https://files.catbox.moe/75hhqt.png");
	--chains2:url("https://files.catbox.moe/wf3c2a.png");
--footer:url("https://files.catbox.moe/jwoowd.png");
	--heart:url("https://files.catbox.moe/gsezkc.gif");

}

/*Universal Styling*/
*{
  box-sizing: border-box;
  padding:0;
  margin:0;
  font-size:inherit;
}

/*Fonts*/
@font-face {
  font-family: "basiic";
  src: url("https://cinni.net/fonts/basiic.ttf");
}
@font-face {
  font-family: "romance";
  src: url("https://cinni.net/fonts/RomanceA.ttf");
}

body {
  font-family: "basiic";
  max-width: 860px;
  height:100%;
  padding: 0;
  margin: 20px auto;
  color: var(--text);
  background: var(--clouds), /*radial-gradient(ellipse 60% 100% at 50% 60%,rgba(255,129,129,0) 37%, rgba(255,129,129,.5) 40%, rgba(255,208,125,.5) 43%, rgba(254,255,130,.5) 46%, rgba(198,254,139,.5) 49%, rgba(161,246,255,.5) 52%, rgba(226,196,255,.5) 55%, rgba(255,166,248,.5) 58%,rgba(255,166,248,0) 100%),*/ var(--bg-gradient);
  background-repeat:repeat-x;
  background-position:center top, center, center;
  /*scrollbar for firefox*/
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}


::selection{
	color:var(--text);
	background:var(--accent);
}
a{
	color:var(--link);
	font-weight:bold;
}
main a:hover{
	background:var(--rainbow);
}

hr{
	background:var(--chains);
	background-position:center;
	border:none;
	width:100%;
	margin:5px auto;
	height:21px;
}
/*sparkle variations*/
hr:nth-of-type(odd){
	background:var(--chains1);
}
hr:nth-of-type(even){
	background:var(--chains2);
}


/*HEADER*/
header{
	background:var(--header-bg);
	background-size:100%;
	background-position:bottom;
	background-repeat:no-repeat;
	text-align:center;
	/*margin:0 10px;*/
}

/*FOOTER*/
footer{
	background:var(--footer);
	background-position:center;
	height: 50px;
	margin-top: -40px;
	z-index:1;
	position:relative;
}

/*MAIN LAYOUT STRUCTURE*/
main{
	display:flex;
	height:600px;
	background:var(--brick);
	border-right:1px solid var(--border);
	border-left:1px solid var(--border);
	box-shadow: 5px 5px 10px var(--shadow);
}

/*styling for center div*/
.main{
	width:100%;
	overflow-y:auto;
	padding:10px;
}
.main section{
	margin-bottom:30px;
}
nav, aside{
  width: 250px;
  margin-left:-5px;
  margin-right:-5px;
  border:15px solid;
  border-image:var(--vines) 15 round;
  border-top:none;
  border-bottom:none;
  background-clip: content-box;
}

section{
	background:var(--bg-color);
	border-radius:10px;
}
aside section{
	padding:5px;
	margin:5px;
}
aside h1{
	margin:0 5px;
}
/*VINES*/
.vinesLeft,.vinesRight{
width:25px;
height:100%;
background:var(--vines1);
background-repeat:repeat-y;
position:relative;
}

.vinesLeft{
	left:-5px;
}
.vinesRight{
	right:-5px;
}
nav{
	border-left:none;
}
aside{
	border-right:none;
}


/*NAVIGATION*/
nav ul{
	list-style-type:none;
}
nav li{
	background:var(--dagger);
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	height:50px;
	width:140px;
	padding-top:16px;
	padding-right: 10px;
	text-align:center;
	font-family:'romance';
	margin-left:1px;
}
/*sparkle variations*/
nav li:nth-child(1),nav li:nth-child(5),nav li:nth-child(9){
	background-image:var(--dagger1);
}
nav li:nth-child(3),nav li:nth-child(7),nav li:nth-child(10){
	background-image:var(--dagger2);
}

nav a{
	color:var(--text);
}
nav a:hover{
	background:none;
	color:var(--link);
}

/*HEADERS*/
h1{
	background:var(--h1-bg);
	color:var(--h1-text);
	border-radius:10px;
	border-bottom:1px solid var(--accent);
	border-right:1px solid var(--accent);
	text-align:center;
	padding:2px;
	font-family:'romance';
}
h1:before,h1:after{
	content:var(--heart);
	padding:0 5px;
}
nav h1:before,nav h1:after,h2:before{
	content:var(--heart);
	padding:0 2px;
}

h2,h3,h4,h5,h6{
	padding:0 5px;
	margin:5px 0;
}
h2{
	border-bottom:1px dotted;
	letter-spacing:1px;
	font-family:'romance';
}
h2:before{
	content:var(--heart);
	padding-right:5px;
}
h3{
text-transform:uppercase;
font-style:italic;
letter-spacing:1px;
font-size:.9rem;
color:var(--h1-text);
}
h3:before{
content:'➜ ';	
}
h4{
	background:var(--rainbow);
	letter-spacing:1px;
	text-align:center;
	font-family:'romance';
}
h4:before,h4:after{
	content:'❀';
	padding:0 5px;
}

p{
	padding:5px 10px;
}
section ul,section ol{
	padding:5px 40px;
}
small{
	font-size:.9rem;
}
ul{
	list-style-type:'♡ ';
}

/*BUTTON STYLING*/
button{
	font-family:inherit;
	font-size:inherit;
	background:none;
	border:none;
	color:var(--text);
	text-decoration:underline;
}
button:hover{
	cursor:pointer;
	color:var(--link);
}

/*LOGO*/
.logo{
	max-width:100%;
	content:var(--logo);
}


/*blurbs*/
.blurb{
	max-width:400px;
	min-height:110px;
	margin:15px auto;
	/*border:1px solid;*/
	border-radius:10px;
	text-align:justify;
	padding-bottom:5px;
	box-shadow:4px 4px 8px var(--shadow);
	background:var(--accent2);
}
.blurb h1{
	border-radius:10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	border-bottom:1px dotted;
	margin-bottom:10px;
}
.blurb p{
	padding:0 10px;
}
.tags{
	font-style:italic;
	padding:1px 10px;
	font-size:.9rem;
	border-top:1px dotted;
	clear:both;
	color:var(--link);
}
.icon{
	height:100px;
	width:100px;
	margin:0 10px 5px 10px;
}
.icon img{
	max-width:100%;
}

.left{
	float:left;
}
.right{
	float:right;
}

/*RAINBOW FX*/
.rainbow{
	background:var(--rainbow);
}

/*typing fx div box*/
.quote{
	max-width:450px;
	margin:10px auto;
	display:flex;
}
.quoteIcon{
	width:100px;
	margin:0 10px;
	border-radius:10px;
}
.bannerContainer{
	width:100%;
	padding:10px;
	border-radius:10px;
	background:var(--transparent);
	color:var(--glowtext);
	text-shadow:0 0 5px var(--glowtext);
	font-size:1.1rem;
}
#banner:before{
	content:' > ';
}
.tip{
border-style: solid;
border-width: 10px 0 10px 13px;
border-color: transparent transparent transparent var(--transparent);
width: 20px;
height: 20px;
margin-top: 40px;
}



/*FALLING STAR FX*/
.falling-star {
  z-index: -1;
  width: 190px;
  height: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, white 33%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  border-radius: 50%;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: falling;
  animation-name: falling;
  -webkit-animation-timing-function: cubic-bezier(0.33, 0.19, 0.26, 1.3);
  animation-timing-function: cubic-bezier(0.33, 0.19, 0.26, 1.3);
  top: -70px;
  transform: rotate(-45deg) translate3d(0, 0, 0);
  will-change: transform, width, opacity;
  right: 10px;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.falling-star:nth-of-type(1){
	left:400px;
	-webkit-animation-delay: 2s;
  animation-delay: 2s;
}
@keyframes falling {
  20%,25%,30%,35%,40%,45%,50%,55%,60%,65%,70%,75%,80%,85%,90%,95%,100% {
    transform: rotate(-40deg) translate3d(-560px, 0, 0);
    opacity: 0.5;
    width: 0;
  }
}



/* Scrollbar styles */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--rainbow-wk);
border: 1px dotted var(--accent);
}
::-webkit-scrollbar-thumb {
background: var(--h1-bg);
border: 1px dotted var(--accent);
}





/*MOBILE STYLING*/
@media screen and (max-aspect-ratio: 16/9) {
	body{
		height:auto;
	}
	main{
		display:block;
		height:auto;
		border:15px solid;
		border-image:var(--vines) 15 round;
		border-top:none;
		border-bottom:none;
	}
	
	aside{
		display:none;
	}
	nav{
		width:100%;
		margin:0 auto;
		border:none;
	}
	nav ul{
		display:flex;
		flex-wrap:wrap;
		margin:0 auto;
	}
	nav li{
		margin:0 auto;
	}
	.vinesLeft,.vinesRight{
		display:none;
	}
	
}