/*
*       |\____/| github.com/CiupagaPL/Przecinek
*       |      | original {,} wiki
*  __   | >  < |
* /  \__\ =, = / copyright 2026
* \__         /
*    \ \____\ \
*    {,{,} {,},}
*/

:root{
	--body-margin: 2vw;
	--body-outside: 3vw;
	--body-between: 1vw;
	--body-border: 0.35vmin;

	--nav-padding: 2vmin;
	--nav-width: calc(16vw - var(--nav-padding) * 2);

	--main-padding: 4vmin;
	--main-width: calc(78vw - var(--main-padding) * 2);
}

body{
	margin-left: -8px;
	margin-top: -8px;
	width: calc(100% + 8px);

	font-family: "Fira Mono", monospace;
	font-style: normal;
}

@keyframes navBack{
	0%{ background-position: 0 0; }
	100%{ background-position: 25vmin -25vmin; }
}
#navBack{
	left: 0;
	top: 0;
	width:
		calc(var(--nav-width) + var(--nav-padding) * 2 -
		var(--body-border) + var(--body-outside) * 2);
	height: 100vh;

	position: fixed;

	background-size: 25vmin;
	background-repeat: repeat;
	background-position: 0 0;
	background-image: url(local/background_light.png);
	background-color: #e1e1eb;

	animation: navBack 2s infinite linear;
}
#navBack.off{ animation: 0; }
#navBack.dark{
	background-image: url(local/background_dark.png);
	background-color: #464650;
}

#navFront{
	top: var(--body-between);
	left: calc(var(--body-outside) - var(--body-border) * 2);
	width: var(--nav-width);
	height: calc(100vh - var(--body-between) * 2 - var(--nav-padding) * 2 - var(--body-border) * 2);
	padding: var(--nav-padding);

	position: absolute;

	border: var(--body-border) dashed #32323c;
	border-radius: 12px;

    overflow-x: hidden;
    overflow-y: auto;

	background-color: #ffffff;
	color: #32323c;
}

#navFront>details>a,
#navFront>i,
#navFront>details>summary{
	max-width: 100%;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#navFront>details>a,
#navFront>i{ display: inline-block; }

#navFront>button{
	padding: 0;

	border: 0;
	background: 0;
}
#navFront>details>a{
	font-size: 1.75vmin;

	text-decoration: none;
	color: #7d7dff;
}
#navFront>i{ font-size: 3vmin; }

#navFront>button,
#navFront>details>summary{ font-size: 2.25vmin; }
#navFront>details>a:hover,
#navFront>button:hover,
#navFront>details>summary:hover{
	text-decoration: underline;
}

#navFront.dark{
	border-color: #ffffff;
	background-color: #32323c;
	color: #ffffff;
}
#navFront.dark>button{ color: #ffffff; }

@keyframes logo{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}
@keyframes logo-red-green{
	0%{ background-image: url(local/icon_red.png); }
	100%{ background-image: url(local/icon_green.png); }
}
@keyframes logo-green-blue{
	0%{ background-image: url(local/icon_green.png); }
	100%{ background-image: url(local/icon_blue.png); }
}
@keyframes logo-blue-red{
	0%{ background-image: url(local/icon_blue.png); }
	100%{ background-image: url(local/icon_red.png); }
}
#logo{
	width: var(--nav-width);
	height: var(--nav-width);
	padding-bottom: var(--body-outside);

	float: left;

	background-image: url(local/icon_red.png);
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}
#logo:hover{ background-size: 90%; }
#logo.red-green-on{
	animation: logo 7s infinite linear, logo-red-green 0s forwards;
}
#logo.green-blue-on{
	animation: logo 7s infinite linear, logo-green-blue 0s forwards;
}
#logo.blue-red-on{
	animation: logo 7s infinite linear, logo-blue-red 0s forwards;
}
#logo.red-green-off{ animation: logo-red-green 0s forwards; }
#logo.green-blue-off{ animation: logo-green-blue 0s forwards; }
#logo.blue-red-off{ animation: logo-blue-red 0s forwards; }

#sub{
	position: fixed;
	transform: translate(-50%, -50%) rotate(-20deg);

	pointer-events: none;

	color: #ffcd00;
}

#main{
	top: 0;
	right: 0;
	width: var(--main-width);
	height: 100vh;
	padding-left: var(--main-padding);
	padding-right: var(--main-padding);
	font-size: 2.5vmin;

	position: absolute;
	overflow-x: auto;
	text-align: center;

	border-left: var(--body-border) dashed #32323c;

	background-color: #ffffff;
	color: #32323c;
}
#main.dark{
	border-color: #ffffff;
	background-color: #32323c;
	color: #ffffff;
}
#main.scale2{ font-size: 3.25vmin }
#main.scale3{ font-size: 4vmin }

#main>b{ font-size: 7vmin; }
#main>i{
	font-size: 4vmin;

	text-decoration: underline;
}
#main>p{ text-align: left; }

hr{
	height: var(--body-border);

	border: 0;
	border-top: var(--body-border) dashed;
}

ul{
	text-align: left;
	list-style-type: square;
	margin: 0;
	padding-left: var(--main-padding);
}


pre{
	width: content;
	max-width: calc(100% - 2vw);
	padding: var(--main-padding);

	text-align: left;
	overflow-x: auto;

	font-size: 2.75vmin;

	border-radius: 12px;

	background-color: #7d7d91;
	color: #ffffff;
}