/*
Theme Name: 4RRAY WordPress Theme v2 
Theme URI: https://4rray.com
Author: Gruu Family
Author URI: https://4rray.com 
Description: Theme for websites from Gruu Family
Version: 250618
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4rray 
*/

:root {
	--c-skyblue: 		#44eeff; /* #08c6fd; */
	--c-skyblue-dim: 	#44eeff22; /* #08c6fd; */
	--c-gray: 			#e8e8e8;
	--c-gray-dark: 		#cccccc;
	--c-yellow: 		#f7e17b;
	--c-purple: 		#ff66aa;
	--c-purple-dim: 	#ff66aa44;
	
	--c-link: 		var(--c-skyblue);
	--c-link-dim: 	var(--c-skyblue-dim);
	--c-strong: 	var(--c-yellow);
	--c-text: 		var(--c-gray);
	--c-text-dark: 	var(--c-gray-dark);
	--c-border: 	var(--c-purple);
	--c-border-dim: var(--c-purple-dim);
	
	--width: 		728px;
	
	--ff-mso: 	'Material Symbols Sharp';
}

*, ::before, ::after 	{ box-sizing: border-box; margin: 0; padding: 0; } 

html 		{ font-size: 100%; font-family: "IBM Plex Sans KR", Sans-Serif; position: relative; background-color: black; color: var(--c-text); width: 100%; height: 100%; font-weight: 400; }
body 		{ display: block; position: absolute; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; font-size: 100%;  }
a 			{ text-decoration: none; color: var(--c-link); }
a:hover 	{ text-shadow: -2px -2px 8px white; opacity: 1; }
ul 			{ padding-left: 1.1rem; line-height: 1.5; }
ul ::marker { font-size: x-small; color: var(--c-strong); }
ul ul 		{ list-style-type: disc; }
strong 		{ font-weight: 500; color: var(--c-strong); }
sup 		{ margin: 0 .25em; }

/* preset */
	.ff_mso { font-family: 'Material Symbols Sharp'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }
	/* glass */
		.glass 			{ background: #ffffff18; padding: 1rem; border-radius: 1rem; box-shadow: inset 0 0 10px -8px #ffffff; backdrop-filter: blur(8px); }
		.glass.small 	{ padding: .25rem .5rem; border-radius: .25rem; }

/* wrapper */
	.wrapper 	{ display: grid; grid-template-rows: 4rem auto; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
	/* site */
		.site 	{ padding: .5rem; }
		/* header */
			.site.header 		{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; line-height: 1; box-shadow: inset 0 0 10px -5px #ffffff; }
			.site.header .child	{ max-width: 45%; }
			/* left */
				.custom-logo 	{ width: auto; height: auto; max-width: 100px; max-height: 50px; }
			/* right */
				/* searchform */
					.searchform 		{ display: grid; grid-template-columns: auto 2rem; width: 100%; }
					.searchform input 	{ border: 0; background: transparent; padding: 0 .33rem; outline: none; color: var(--c-link); width: 100%; }
					.searchform button 	{ border: 0; background: transparent; color: var(--c-link); padding: .33rem; cursor: pointer; font-size: 1rem; }
		/* main */
			.site.main 	{ display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; scrollbar-color: var(--c-link) transparent; }
				/* main */
					main 	{ margin: 0 auto; padding: 1rem 0; width: 100%; max-width: var(--width); }
					/* menu */
						.site.main nav ul 						{ list-style: none; display: flex; overflow-x: auto; font-size: .9rem; gap: 0; width: fit-content; margin: 0 auto; padding: 0; }
						.site.main nav .menu-item a 			{ display: inline-block; padding: .5em; color: var(--c-text-dark); }
						.site.main nav .current-menu-item a		{ font-weight: 500; color: var(--c-link);}
						.site.main nav .current-post-ancestor a	{ font-weight: 500; color: var(--c-link); }
					/* article */
						article 	{ display: flex; flex-direction: column; gap: 1rem; }
						/* header */
							article h1 					{ text-align: center; font-weight: 400; font-size: x-large; color: var(--c-strong); line-height: 1.33; }
							article .meta 				{ text-align: right; color: var(--c-text-dark); }
							article .meta small 		{ display: inline-flex; align-items: center; gap: .25em; }
							article .updated:before 	{ font-family: var(--ff-mso); content: '\f232'; }
							article .pv:before 			{ font-family: var(--ff-mso); content: '\ea03'; }
						/* content */
							/* heading */
								article h2 	{ margin: 1em 0; font-weight: 400; color: white; }
								article h3 	{ margin: 1em 0; font-weight: 400; color: white; }
							/* table */
								article table 		{ display: block; font-size: .95rem; border-spacing: .5em; line-height: 1.5; }
								article th 			{ font-weight: 500; }
								article td 			{ vertical-align: top; }
								article td strong	{ white-space: nowrap; }
							/* paragraph */
								article .content > p 	{ margin: 1em 0; }
							/* footnotes */
								article .footnotes 		{ margin: 1rem 0; font-size: 90%; }
								article .footnotes hr	{ border: 1px solid var(--c-link-dim); margin: 1rem 0; }
								article .footnotes ol	{ padding-left: 2rem; }
							/* image */
								.wp-caption 		{ max-width: 100%; }
								.wp-caption-text 	{ font-size: small; color: var(--c-text-dark); }
								.alignright 		{ max-width: 300px; margin: 1.5rem auto; }
						/* footer */
							/* tags */
								footer .tags 			{ display: flex; flex-wrap: wrap; align-items: center; gap: .25em; color: var(--c-text-dark); }
								footer .tags:before 	{ font-family: var(--ff-mso); content: '\e9ef'; color: var(--c-strong); }
					/* entry */
						.entry 				{ padding: .75rem; line-height: 1.5; backdrop-filter: blur(8px); }
						.entry ul 			{ display: flex; flex-direction: column; gap: 1rem; list-style: none; padding-left: 0; }
						.entry li.item 		{ padding: 0 .75rem; border-left: 3px solid var(--c-border-dim); }
						.entry .item:hover 	{ border-color: var(--c-border); }
						.entry .excerpt 	{ display: block; color: var(--c-text-dark); }
					/* nav */
						main nav 			{ padding: 1rem; line-height: 1; }
						nav .nav-links 		{ display: flex; align-items: center; justify-contentsd: space-between; gap: .5em; }
						nav .page-numbers 	{ display: inline-block; }
					/* widget */
						.widget-title 	{ display: flex; align-items: center; gap: .33em; }
						/* article bottom */
							aside.ab 	{ width: 100%; max-width: var(--width); margin: 0 auto; }
					/* footer */
						.site.main > footer 	{ font-size: small; text-align: center; }

@media screen and (min-width: 800px) {
	/* image */
		.alignright 	{ float: right; margin: 1rem; margin-right: 0; }
}