/*CSS by JinxCade - You may reuse file for your own purposes*/
/*This file is under the 'Unlicense License', feel free to reuse files!*/

/*Theme name: 'Stary Grey Magica', theme may be reused*/

/*Every theme name in code: 'Stary Grey Magica' (css.css), 'Iced Up Purple' (purple.css), 'Cored Down Orange' (orange.css), 'Bright Sunny White' (white.css), 'Magical Palaced Blue' (blue.css)*/

/*Body before/after*/

body:before {
	content:"";
	text-align:center;
	display:block;
	padding:8px;
	background-color:#9A9E9B;
	font-family:Yusei Magic,Arial,sans-serif;
	font-weight:normal;
	font-style:normal;
}

body:after {
	content:"";
	text-align:center;
	display:block;
	padding:8px;
	background-color:#9A9E9B;
	font-family:Yusei Magic,Arial,sans-serif;
	font-weight:normal;
	font-style:normal;
}

/*Aligning*/  

.text_center {
	text-align:center;
}
.align_center {
	margin:auto;
}

/*Old Stuff*/

.og_hover {
	width:100%;
	height:100%;
	transition:0.5s;
}
.og_hover:hover {
	width:125%;
	height:125%;
	transition:0.5s;
}
.og_smooth {
	width:80%;
	margin:0 auto;
	padding:5px 20px;
	-webkit-border-radius:12px;
	background-color:rgba(128,128,128,0.25);
}
.og_smooth > div {
	margin:10px;
}

/*Animations*/

.jc_anim {
	background-color: white;
    animation-name: jc_anim;
	animation-duration: 4s;
	text-align: center;
	animation-iteration-count: infinite;
}

@keyframes jc_anim {0% {
		background-color: white;
        color:black;
	}
	50%  {
		background-color: black;
        color:white;
	}
	100% {
		background-color: white;
        color:black;
	}
}

/*Smooth Stuff*/

/*-----------Oval-----------*/
.oval {
	width:85%;
	margin:0 auto;
	padding:3px 20px;
	-webkit-border-radius:64px;
	background-color:rgba(128,128,128,0.7);
	transition:0.5s;
	filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));
	background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));
    background-repeat:repeat-x;
}
.oval_loose {
	margin:0 auto;
	-webkit-border-radius:64px;
	background-color:rgba(128,128,128,0.7);
	transition:0.5s;
	filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));
	background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));
	background-repeat:repeat-x;
}
.oval > div {
	margin:10px;
}
/*-----------Smooth-----------*/
.smooth {
	width:85%;
	margin:0 auto;
	padding:3px 20px;
	-webkit-border-radius:8px;
	background-color:rgba(128,128,128,0.7);
	transition:0.5s;
	filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));
	background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));
	background-repeat:repeat-x;
}
.smooth_loose {
	margin:0 auto;
	-webkit-border-radius:8px;
	background-color:rgba(128,128,128,0.7);
	transition:0.5s;
	filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));
	background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));
	background-repeat:repeat-x;
}
.smooth > div {
	margin:10px;
}
/*-----------Rough-----------*/
.rough {width:85%;margin:0 auto;padding:3px 20px;-webkit-border-radius:4px;background-color:rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));background-repeat:repeat-x;}
.rough_loose {margin:0 auto;-webkit-border-radius:4px;background-color:rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));background-repeat:repeat-x;}
.rough > div {margin:10px;}
/*-----------Rect-----------*/
.rect {width:85%;margin:0 auto;padding:3px 20px;-webkit-border-radius:0px;background-color:rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));background-repeat:repeat-x;}
.rect_loose {margin:0 auto;-webkit-border-radius:0px;background-color:rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));background-image:url(div_bg.png),linear-gradient(rgba(165,165,165,0.7),rgba(128,128,128,0.7));background-repeat:repeat-x;}
.rect > div {margin:10px;}

/*Sizing*/

.smaller_size {
	width:60%;
}
.size10 {
	width:10%;
}
.size20 {
	width:20%;
}
.size30 {
	width:30%;
}
.size40 {
	width:40%;
}
.size50 {
	width:50%;
}
.size60 {
	width:60%;
}
.size70 {
	width:70%;
}
.size80 {
	width:80%;
}
.size90 {
	width:90%;
}
.size100 {
	width:100%;
}

/*Hovering*/

.hover {width:85%;height:100%;transition:0.5s;}
.hover:hover {width:87.5%;height:100%;transition:0.1s;}
.hover_small {width:60%;height:100%;transition:0.5s;}
.hover_small:hover {width:62.5%;height:100%;transition:0.1s;}

/*General stuff*/

h1 {cursor:url('cursor_text.png'), auto;font-family:Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;}
p {cursor:url('cursor_text.png'), auto;font-family:Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;}
a {transition:0.5s;cursor:url('cursor_link.png'), auto;font-family: Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;color:#000088;border:0px solid #301934;-webkit-border-radius:4px;}
a:hover {transition:0.5s;border:4px solid #301934;}
div {cursor:url('cursor.png'), auto;font-family: Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;}
body {
	cursor:url('cursor.png'), auto;
	background-color:#000000;
    background-image:url(bg.png),linear-gradient(black,#121613,#454946,#121613,black);
    margin:0;
    height:100%;
}
html {
	height:100%;
}

/*Interactive*/

input {width:88%;cursor:url('cursor_text.png'), auto;font-family:AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;background-color:rgba(128,128,128,0.5);transition:0.5s;border:2px solid #100712;-webkit-border-radius:4px;color:#10034f;}
input:hover {background-color:#9A9E9B;transition:0.5s;border:2px solid #301934;}
button {width:90%;cursor:url('cursor_click.png'), auto;font-family:AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;background-color:rgba(128,128,128,0.5);transition:0.5s;border:2px solid #100712;-webkit-border-radius:4px;color:#10034f;}
button:hover {background-color:#9A9E9B;transition:0.5s;border:2px solid #301934;}

/*Media*/

audio {-webkit-border-radius:30px;cursor:url('cursor_audio.png'), auto;font-family:Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;border:2px solid rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(156,156,156,0.7));}
img {-webkit-border-radius:12px;font-family:Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;border:2px solid rgba(128,128,128,0.7);transition:0.5s;filter:blur(0px) drop-shadow(8px 8px 10px rgba(156,156,156,0.7));cursor:url('cursor_image.png'), auto;}
video {-webkit-border-radius:12px;font-family:Audiowide,AudiowideJPN,Arial,sans-serif;font-weight:normal;font-style:normal;border:2px solid rgba(128,128,128,0.7);transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(156,156,156,0.7));cursor:url('cursor_video.png'), auto;}
audio:hover {border:2px solid #9A9E9B;transition:0.5s;filter:drop-shadow(8px 8px 10px #9A9E9B);}
img:hover {
	border:2px solid #9A9E9B;
	transition:0.5s;
	filter:blur(0.5px) drop-shadow(8px 8px 10px #9A9E9B);
}
video:hover {border:2px solid #9A9E9B;transition:0.5s;filter:drop-shadow(8px 8px 10px #9A9E9B);}

/*Basic Fonts*/

.cursive_font {font-family:Sofia,Arial,sans-serif;font-weight:normal;font-style:normal;}
.cool_font {font-family:Teko,Arial,sans-serif;font-weight:normal;font-style:normal;}
.pixel_font {font-family:DotGothic16,Arial,sans-serif;font-weight:normal;font-style:normal;}
.soft_font {font-family:Yusei Magic,Arial,sans-serif;font-weight:normal;font-style:normal;}
.d_font {font-family:D,Arial,sans-serif;font-weight:normal;font-style:normal;}
.fn_font {font-family:Burbank,Arial,sans-serif;font-weight:normal;font-style:normal;}
.heading_font {font-family:Heading Now,Yusei Magic,Arial,sans-serif;font-weight:normal;font-style:normal;}
.densit_font {font-family:Densit,Arial,sans-serif;font-weight:normal;font-style:normal;}
.ds_font {font-family:DS,Arial,sans-serif;font-weight:normal;font-style:normal;}

/*Borders and Positioning*/

.sticky {border:2px solid #301934;}
.fixed {position:fixed;bottom:0;right:0;border:2px solid #301934;}
.border {border:2px solid #301934;}

/*Selections*/

.selection {margin:5px;border:1px solid #343835;float:left;width:180px;height:250px;transition:0.5s;filter:drop-shadow(8px 8px 10px rgba(128,128,128,0.7));}
.selection:hover {cursor:url('cursor_click.png'), auto;border:1px solid #9A9E9B;transition:0.5s;background-color:#454946;filter:drop-shadow(8px 8px 8px #9A9E9B);}
.selection img {width:100%;height:auto;border:0px solid #9A9E9B;filter:drop-shadow(0px 0px 0px #9A9E9B);}
.selection_text {padding:15px;text-align:center;}
.selection_text:hover {cursor:url('cursor_click.png'), auto;}

/*Tooltips*/

.tooltip {position:relative;display:inline-block;border-bottom:1px dotted black;}
.tooltip .tooltiptext {width:180px;background-color:black;color:rgba(128,128,128,0);text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;margin-left:-60px;left:33.333%;top:30%;background-color:rgba(128,128,128,0);transition:1s;}
.tooltip:hover .tooltiptext {transition:1s;background-color:rgba(128,128,128,0.8);color:rgba(0,0,0,1);}

/*Colors (inefficient on memory)*/

.color_red {color:red;}
.color_yellow {color:yellow;}
.color_green {color:green;}
.color_cyan {color:cyan;}
.color_blue {color:blue;}
.color_magenta {color:magenta;}
.color_white {color:white;}
.color_black {color:black;}
.color_accent1 {color:#10034f;}
.color_accent2 {color:#9A9E9B;}
.color_accent3 {color:#343835;}
.color_accent_bg {background-color:#10034f;}
.color_venith1 {color:#040;}
.color_venith2 {color:lime;}
.color_venith3 {color:rgb(19,235,170);}
.color_venith_bg {background-color:#040;}
.color_matt1 {color:blue;}
.color_matt2 {color:black;}
.color_matt3 {color:white;}
.color_matt_bg {background-color:gray;}
.color_dc1 {color:pink;}
.color_dc2 {color:orange;}
.color_dc3 {color:cyan;}
.color_dc_bg {background-color:black;}
.color_juliet1 {color:blue;}
.color_juliet2 {color:hotpink;}
.color_juliet3 {color:black;}
.color_juliet_bg {background-color:black;}
.color_discord1 {color:#7289da;}
.color_discord2 {color:#424549;}
.color_discord3 {color:#46493e;}
.color_discord_bg {background-color:#4056a7;}
.color_suyu1 {color:#4444FF;}
.color_suyu2 {color:#FF4444;}
.color_suyu3 {color:#gray;}
.color_suyu_bg {background-color:#4444FF;}

/*Navigation Bar*/

.topnav {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	overflow:hidden;
	background-color:#343835;
	transition:0.75s;
    z-index:5;
}
.topnav a {
	float:left;
	display:block;
	color:#9A9E9B;
	text-align:left;
	padding:5px 16px;
	text-decoration: none;
	transition:0.5s;
	border:0px solid #301934;
    z-index:6;
}
.topnav a:hover {
	background-color:#9A9E9B;
	color:black;
	cursor:url('cursor_click.png'), auto;
    
}
.topnav:hover {
	cursor:url('cursor.png');
}
.active {
	background-color:#565A57;
}

/*Fonts*/

@font-face {font-family:'Audiowide';src:url(https://jinxcade.github.io/jinxcade-media/fonts/Audiowide.ttf);}
@font-face {font-family:'AudiowideJPN';src:url(https://jinxcade.github.io/jinxcade-media/fonts/AudiowideJPN.ttf);}
@font-face {font-family:'Teko';src:url(https://jinxcade.github.io/jinxcade-media/fonts/Teko.ttf);}
@font-face {font-family:'Sofia';src:url(https://jinxcade.github.io/jinxcade-media/fonts/Sofia.ttf);}
@font-face {font-family:'DotGothic16';src:url(https://jinxcade.github.io/jinxcade-media/fonts/DotGothic16.ttf);}
@font-face {font-family:'Yusei Magic';src:url(https://jinxcade.github.io/jinxcade-media/fonts/Yusei+Magic.ttf);}
@font-face {font-family:'D';src:url(https://jinxcade.github.io/jinxcade-media/fonts/3D.ttf);}
@font-face {font-family:'DS';src:url(https://jinxcade.github.io/jinxcade-media/fonts/ds-lite.ttf);}
@font-face {
	font-family:'Burbank';
	src:url(https://jinxcade.github.io/jinxcade-media/fonts/Burbank.otf);
}
@font-face {
	font-family:'Heading Now';
	src:url(https://jinxcade.github.io/jinxcade-media/fonts/DelaGothicOne.ttf);
}
@font-face {
	font-family:'Densit';
	src:url(https://jinxcade.github.io/jinxcade-media/fonts/Densit.otf);
}

p.cool_font.rect_loose.color_venith1:after{content:" Made by JinxCade! 2023-2025";color:#10034f;display:true;font-family:Yusei Magic,Arial,sans-serif;}
p.soft_font.rect_loose.color_accent1{color:transparent;display:none;}