/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ------------------ HIIIIIIIIIIIIIIII ------------------------ */
/* CURSORS START */
/* CURSORS END */

/* ROOT COLORS START */
:root {
	--main-black: black;
	--secondary-black: #1f1f1f;
	--main-gray: #535353;
	--secondary-gray: #4e4e4e;
	--main-white: white;
	--main-blue: #00b1ff;
}
/* ROOT COLORS END */

/* HIGHLIGHT START */
mark {
	background-image: linear-gradient(0deg, #2c8fff 21%, #00b1ff 61%, #5fd0ff 100%);
	color: black;
	font-weight: bolder;
}

::selection {
	color: var(--main-black);
	background: var(--main-blue);
}
/* HIGHLIGHT END */


/* SCROLLBARS START */
/* FIREFOX */
* {scrollbar-width: thin; scrollbar-color: var(--main-blue) var(--secondary-black);}

/* CHROME, EDGE, SAFARI */
*::-webkit-scrollbar {width: 8px;}
*::-webkit-scrollbar-track {background: var(--secondary-black);}
*::-webkit-scrollbar-thumb {background-color: var(--main-blue); border-radius: 4px; border: 3px solid var(--main-blue);}
/* SCROLLBARS END */


/* FONT START */
@font-face {
	font-family: Synkopy;
	src: url('https://file.garden/ZpMlZiOun08fNAbF/fonts/Synkopy/Synkopy-Regular.otf') format("opentype");
}

@font-face {
	font-family: Galmuri;
	src: url('https://file.garden/ZpMlZiOun08fNAbF/fonts/galmuri/Galmuri9.ttf') format("truetype");
}

@font-face {
	font-family: MilkyWell;
	src: url('https://file.garden/ZpMlZiOun08fNAbF/fonts/milky_well/MilkyWell.ttf') format("truetype");
}

@font-face {
    font-family: Distro2;
    src: url('https://file.garden/ZpMlZiOun08fNAbF/fonts/dingbats/distro_bats/Distro2%20Bats.ttf') format("truetype");
}
/* FONT END */


/* LINKS START */
a { color: var(--main-blue); }

a:hover { color: cyan; cursor: crosshair }

a:active { color: var(--main-white); }
/* LINKS END */


/* SKELETON START */
html {
	font-size: 11px;
	font-family:'Galmuri';
}

body {
	background: var(--main-black);
	color: var(--main-white);
}

#wrap {
	background: center url(https://file.garden/ZpMlZiOun08fNAbF/graphix/bgs/blucheck.gif);
	background-size: 86px;

	margin: 100px auto;
	width: 1000px;
	padding: 5px;
	border-radius: 100px 0 38px;

	border: 4px ridge var(--main-blue);
	filter: drop-shadow(0 0 10px #007affc2)
}

#box, #head, #foot {
	border: 5px ridge var(--main-blue);
}

#box {
	background: var(--main-black) url(https://file.garden/ZpMlZiOun08fNAbF/graphix/bgs/snow.png);
	background-size: 12px;
	padding: 10px;
}

#head, #foot {
	background: url(https://file.garden/ZpMlZiOun08fNAbF/graphix/bgs/metallic-dark.jpg);
	position: relative;
}

#head {
	border-radius: 160px 0 0 0;
	border-bottom: none;
	height: 80px;
	padding: 5px;
}

#logo {
	content: url(https://file.garden/ZpMlZiOun08fNAbF/art/branding/logo2025-BW.png);
	display: block;
	margin: auto;
	
	width: 360px;
	height: auto;
	position: absolute;
	transform: translate(85%, -50%);
	
	filter: drop-shadow(0 0 3px #378cffff);
}

#foot {
	padding: 0;
	margin-top: -5px;
	border-radius: 0 0 160px 0;
	border-top: none;
}
/* SKELETON END */

/* BG DECOR START */
.glitz, .glitz2 {
	position: absolute;
	content: url('https://file.garden/ZpMlZiOun08fNAbF/graphix/textures/glittz-1.png');
	z-index: -1;
	rotate: 180deg;
	filter: opacity(80%);
}

.glitz { left: 0; }

.glitz2 { right: 0; transform: scaleX(-1) }
/* BG DECOR END */

/* FLEX START */
#weird-flex {
	display: flex;
	justify-content: space-evenly;
	gap: 5px;
	margin-left: -1px;
}

.column { padding: 5px; overflow: hidden }

#left, #right {
	background: var(--secondary-black);
	border: 2px solid var(--main-blue);
}

#left {
	border-radius: 20px 0 0 20px;
	width: 300px;
}

#center {
	border: 2px solid var(--main-blue);
	background:	url(https://file.garden/ZpMlZiOun08fNAbF/graphix/textures/checker-gradient4.png),
	linear-gradient(180deg,#1f1f1f 50%, #4f4f4f 180%);
	background-blend-mode: overlay;
	background-size: 109px;
	background-position: top;
	background-repeat: repeat-x;
}

#right {
	width: 360px;
	justify-content: center;
	align-items: center;
	border-radius: 0 20px 20px 0;
}

#right p, #center p {
	align-content: center;
	text-align: center;
}
/* END OF FLEX */

/* MAIN SIDEBOXES START */
.sidebox {
	border: 1px solid var(--main-blue);
	margin: 5px auto;
	padding: 5px;
	background: var(--secondary-black);
}

.sidebox h3 {
	font-family: 'Synkopy';
	letter-spacing: 1px;
	font-size: 20px;
	font-weight: normal;
	font-style: italic;
	text-shadow: 1px 1px 7px #4479ff;

	margin: auto;
	padding: 5px;
	padding-bottom: 0;

	border: 1px solid var(--main-gray);
	background-image: url(https://file.garden/ZpMlZiOun08fNAbF/graphix/textures/checker-gradient2.png),
	linear-gradient(0deg,#000000 1%, #303030 49%, #4f4f4f 51%, #3d3d3d 90%);
	background-blend-mode: soft-light;
	background-size: 86px;
	background-position: 0% 9%;
	background-repeat: repeat-x;
}
/* MAIN SIDEBOXES END */

/* LEFT SIDEBOX START */
#left .sidebox.corner.top {
	border-radius: 15px 0 0 0;
}

#left .sidebox.corner.top h3 {
	border-radius: 10px 0 0 0;
}

#left .sidebox.corner.bottom {
	border-radius: 0 0 0 15px;
}
/* LEFT SIDEBOX END */

/* RIGHT SIDEBOX START */
#right .sidebox.corner.top {
	border-radius: 0 15px 0 0;
}

#right .sidebox.corner.top h3 {
	border-radius: 0 10px 0 0;
}

#right .sidebox.corner.bottom {
	border-radius: 0 0 15px 0;
}
/* RIGHT SIDEBOX END */

/* INNER SIDEBOX START */
.sidebox__inner ul {
	padding-inline-start: 1px;
	list-style-type: none;
	margin: auto;
}

.sidebox__inner li {
	background: var(--secondary-gray);
	margin: 5px auto;
	margin-left: -1px;
	padding: 2px;
	padding-left: 5px;
	background: #4e4e4e;
}

.sidebox__inner li:before {
	content: "↳   ";
}

.sidebox__inner li a { text-decoration: none; }

.sidebox__inner li a:hover {
	font-style: italic;
	text-decoration: underline;
}

li.xtnd { position: relative; }

li.xtnd:hover { cursor: cell; }

li.xtnd:hover ul.xtnd-content { display: block; }

ul.xtnd-content li:before { content: "↳ "; }

ul.xtnd-content {
	background: var(--secondary-gray);
	display: none;
	position: absolute !important;
    left: 0;
	z-index: 999;
    
    padding: 5px;
    padding-top: 0;
    padding-left: 15px;
    width: 85.6%;
    
    font-size: 10px;
}

/* INNER SIDEBOX END */

/* IFRAME START */
iframe { border: 1px solid var(--main-gray);  }

iframe#upd8 {
    display: block;
    width: 99%;
    height: 221px;
    border-top: none; border-radius: 0 0 0 10px;
}

#upd8_inner { height: 223px }
/* IFRAME END */

/* GALLERY / ODDBOX START */
#gallery, #oddbox {
	margin-top: 5px;
	padding: 3px;

	border: 1px solid var(--main-gray);
	border-radius: 5px 5px 0 0;

	background-image: url(https://file.garden/ZpMlZiOun08fNAbF/graphix/textures/checker-gradient.png),
	linear-gradient(0deg,#000000 10%, #303030 89%, #4f4f4f 19%, #5c5c5c 1%);
	background-size: 70px;
	background-position: 0% -20%;
	background-repeat: repeat-x;

	filter: drop-shadow(0 0 3px var(--main-black))
}

#gallery h3, #oddbox h3 {
	font-family: 'MilkyWell';
	font-size: 15px;
	letter-spacing: 1.5px;
	font-style: italic;
	text-transform: uppercase;
	margin: 5px;
	text-shadow: 2px 2px 10px #000000;
}

#gallery__inner, #oddbox__inner {
	justify-content: center;
	border: 1px solid var(--main-gray);
	padding: 4px;
	background-color: var(--main-black);
	height: 89px;
}

#gallery__inner { display: flex; gap: 5px }

#oddbox {
	overflow-y: hidden;
	overflow-x: hidden;
	width: 279px;
}

#oddbox__inner { overflow-y: auto; text-align: center; }
/* GALLERY / ODDBOX END */

/* WELCOME START */
#welcome { display: flex; justify-content: center; }

#welcome .img { filter: drop-shadow(0 0 6px #0074ff); }

#welcome-text {
	content: url('https://file.garden/ZpMlZiOun08fNAbF/graphix/txt/WELCOME.gif');
	height: 63px; margin-top: 32px;
}

.angel { height: 80px; }

#a1 {
	content: url('https://file.garden/ZpMlZiOun08fNAbF/graphix/characters/azure-angel2.gif');
}

#a2 {
	content: url('https://file.garden/ZpMlZiOun08fNAbF/graphix/characters/azure-angel.gif');
}
/* WELCOME END */

/* UPDATES START */
#updoots {
	height: 220px; overflow-y: auto;
}

#updoots li:before {
	content: url('https://file.garden/ZpMlZiOun08fNAbF/assets/crosshair.png') '  ';
}

/* UPDATES END */

/* MARQUEES START */
.markee {
	display: flex;
	gap: 5px;
	padding: 2px;
	margin: 5px 0;
	justify-content: center;
}

.markontainer { width: 100%; overflow: hidden; }

.scroller {
	gap: 5px;
	width: fit-content;
	height: 20px;
	padding-left: 100%;
	display: flex;
	flex-direction: row;
	animation: horizMarquee 30s linear infinite;
}

.scroller:hover { animation-play-state: paused; }

@keyframes horizMarquee {
	100% {
	transform: translate(-100%, 0);
	}
}

#foot .markontainer {
	margin: 0; margin-bottom: -5px; border-radius: 0 0 16px 0
}
/* MARQUEES END */

/* DIVIDERS START */
.slime {
	display: flex;
	overflow: hidden;
	width: 100%;
	position: absolute;
	transform: translate(-0.48%, 84px)
}

.slime img { height: 30px; }

.flames {
	display: flex;
	overflow: hidden;
	width: 100%;
	position: absolute;
	transform: translate(-0.51%, -30px);
}

.flames img {
	height: 28px;
	filter: hue-rotate(-11deg) brightness(1.1);
}

.chains {
	background-image: url('https://toribytez.neocities.org/graphix/dividers/chains.gif');
	height: 20px;
	background-repeat: repeat-x;
	background-size: 485px;
	padding-bottom: 0;
}

hr {
	border-style: dashed none none none;
	border-color: var(--main-gray);
	width: 100%;
}
/* DIVIDERS END*/

/* LINKBOXES START (for resources and coolsites) */
#center__inner {
	display: grid;
	gap: 10px;
	grid-template-columns: 48% 50.7%;
}

.linkbox {
	padding: 5px;
	border: 1px solid var(--main-blue);
	overflow-y: auto;
	height: 171px;
}

.linkbox ul {
	font-family: 'MilkyWell';
	font-size: 24px;
	text-shadow: 1px 1px 7px #4479ff;
	margin: 0;
	padding-left: 0;
}

.linkbox li:before { content: "↳   " }

.linkbox li {
	font-family: 'Galmuri';
	font-size: 11px;
	text-shadow: none;
	margin: 5px 0;
	padding-inline-start: 12px;
	list-style-type: none;
}

.linkbox p { margin: 0; padding-left: 15px; }

.linkbox li a:hover { font-style: italic; text-decoration: underline; }

.first { margin-top: 10px !important; }

/* LINKBOXES END */

/* XTRAS START */
#statuscafe {
	padding: .5em;
	background-color: black;
	border: 1px solid var(--main-gray);
	border-top: none;
	overflow-y: auto;
	color: var(--main-white);
	height: 72px;
}

#statuscafe-username { margin-bottom: .5em; }

#statuscafe-content { margin: 0 1em 0.5em 1em; overflow-y: auto;}

textarea {
    background: black;
    color: white;
    font-family: 'Galmuri';
    font-size: 10px;
    border: 1px solid #535353;
    scrollbar-width: none;
}
/* XTRAS END */