@import url('https://fonts.googleapis.com/css2?family=Joti+One&display=swap');

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx/xxx
 */

:root
{
--color: 68, 68, 68; /* #444444 */
--background: 255, 255, 255; /* #FFFFFF */
--mono: 241, 241, 241; /* #F1F1F1 */
--mono-pop: 250, 250, 250; /* #FAFAFA */
--mono-extra: 254, 254, 254; /* #FEFEFE */
--black: 17, 17, 17; /* #111111 */
--white: 255, 255, 255;
--gray: 128, 128, 128;
--gray-pop: 102, 102, 102; /* #666666 */
--gray-soft: 253, 253, 254;
--gray-hard: 212, 213, 216;
--gray-sky: 204, 204, 204; /* #CCCCCC */
--red: 255, 0, 0; --red-pop: 224, 108, 117;
--green: 0, 128, 0; --green-pop: 152, 195, 121; --green-soft: 230, 246, 230; --green-hard: 0, 148, 0;
--blue: 0, 0, 255; --blue-pop: 97, 174, 239; --blue-soft: 238, 249, 253; --blue-hard: 76, 179, 212; --blue-ray: 66, 133, 244;
--yellow: 255, 255, 0; --yellow-pop: 229, 192, 123; --yellow-soft: 255, 248, 230; --yellow-hard: 230, 167, 0;
--orange: 255, 165, 0; --orange-pop: 210, 132, 69;
--purple: 128, 0, 128; --purple-pop: 198, 120, 221;
--pink: 255, 192, 203; --pink-pop: 255, 192, 203;
--cyan: 0, 255, 255; --cyan-pop: 117, 181, 170;
}

:root
{
--border-color: rgb(204, 204, 204);
--box-shadow: 60, 64, 67;
--box-shadow-pop: 11, 20, 26;
--header-color: rgb(var(--white));
}

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx/xxx
 */

:root
{
--background-color: rgb(var(--background));
--font-color: rgb(var(--color));
--font-anchor-color: rgb(var(--blue-ray));
--font-anchor-color-focus: rgb(var(--blue-ray));
--font-anchor-color-active: rgb(var(--blue-ray));
--font-anchor-color-visited: rgb(var(--blue-ray));
--font-anchor-color-hover: rgb(var(--blue-ray));
}

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx/xxx
 */

[theme="night"]
{
--mono: 34, 34, 34;
--mono-pop: 51, 51, 51;
--background-color: #121212;
--font-color: #cccccc;
--header-color: #101010;
--border-color: rgb(51, 51, 51);
--box-shadow: 34, 34, 34;
}

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

:root
{
--header-size: 65px;
--nav-size: 250px;
--navigation-size: 200px;
--menu-size: 250px;
--side-size: 200px;
--form-search-size: 50px;
}

[class*="font-family:logo"] { font-family: "Joti One"; }
.text-gradient { background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
[class*="background:color"] { background-color: rgb(var(--background)); }
[class*="header:size"] { min-height: var(--header-size); }
[class*="nav:size"] { width: var(--nav-size); }
[class*="padding:li"] { padding: 8px 18px; }
[class*="icon:margin"] { margin-top: 1px; }

.computer [phone] { display: none; }
.phone [computer] { display: none; }

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

[print] { display: none; }
[device="computer"] {}
[device="mobile"] {}
[device="tablet"] {}
[device="phone"] {}

@media only screen and (orientation: landscape) {
	[device="computer"] {}
	[device="mobile"] {}
	[device="tablet"] {}
	[device="phone"] {}
	}

@media print {
	#app { display: none !important; }
	[id="app:print"] { display: flex; }
	[no-print] { display: none !important; }
	[print] { display: flex !important; }
	* {}
	}

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

body > #container { display: flex; flex-direction: column; height: 100%; }
body > #container > section { display: flex; flex-grow: 1; position: relative; }
body > #container > section > nav { display: none; flex-direction: column; width: var(--menu-size); }
body > #container > section > main { flex-grow: 1; }
body.phone > #container > section > nav { display: none; height: 100%; position: absolute; background-color: var(--background-color); }

[component="header:fly"] { background-color: rgba(var(--background),0.98); z-index: 10; }
[component="footer:info"] {}

[class*="button:inline"] { position: relative; border: none; border-radius: 4px; background-color: transparent; }
[class*="button:icon"] { position: relative; padding: 5px; border: none; border-radius: 4px; background-color: transparent; }
[class*="button:icon"]:hover { background-color: transparent; }

/**
 * the end
 *
 * xxx://xxx.xxx.xxx/xxx
 */