:root {
   --canvas-min-width: 300px;
   --canvas-min-aspect: 1.0;
   --cv-inactive-bg-width: 10rem;
   --cv-inner-offset: 2.5rem;
   /* --sidebar-width: 27rem; configured with font selection */
   --card-description-basis: 13rem;
   /* --font-size-main: 15pt; configured in index.js */ 
   --font-size-h2: 1.2rem;
   --size-normalsize: 1.0rem;
   --size-small: calc(var(--size-normalsize)*0.9);
   --size-large: calc(var(--size-normalsize)*1.1);
   --size-Large: calc(var(--size-normalsize)*1.25);
   --size-LARGE: calc(var(--size-normalsize)*1.4);
   --size-huge: calc(var(--size-normalsize)*1.6);
   --size-Huge: calc(var(--size-normalsize)*1.8);
   --font-families-const: /*Do Hyeon,*/ Tahoma, Geneva, Verdana;
   --font-families: var(--font-families-const);
   /* --color-theme-accent: #ffd966; */
   /* --color-theme-normal: #ffec63; */
   --color-theme-bold: #8b7e67;
   --color-theme-bold-shadow: #8b7e67FF;
   --color-theme-accent: #EBE3D5;
   --color-theme-normal: #F3EEEA;
   --color-theme-normal-alpha: #F3EEEA99;
   --color-font-main: #211515;
   --color-font-title: #4D4637;
   --color-font-title-light: #5A5A5A;
   --color-linkedin: #0077b5;
   --filter-linkedin: invert(30%) sepia(96%) saturate(3657%) hue-rotate(183deg) brightness(90%) contrast(101%);
   --color-telegram: #229ed9;
   --filter-telegram: invert(51%) sepia(82%) saturate(2002%) hue-rotate(167deg) brightness(96%) contrast(76%);
   --color-gmail: #c71610;
   --filter-gmail: invert(11%) sepia(61%) saturate(7443%) hue-rotate(357deg) brightness(99%) contrast(93%);
   --color-green: #03c04a;
   --color-github: #171515;
   --filter-github: brightness(0%);
;

   --pixel-bg: var(--color-theme-accent);
   --pixel-border: var(--color-theme-bold); /* Inner border color: */
	--pixel-border-2: var(--color-theme-accent); /* Middle border color: */
	--pixel-border-3: var(--pixel-border); /* Outer border color */
	--pixel: 3px; /* Pixel size */
}

* {
   margin: 0;
   /* box-sizing: border-box; */
   /* "Questrial" */
   font-family: var(--font-families);

   /* unselectable */
   /* user-select: none;
   -khtml-user-select: none;
   -o-user-select: none;
   -moz-user-select: -moz-none;
   -webkit-user-select: none; */
}

html {
   font-size: var(--font-size-main);
   color: var(--color-font-main);
}

body {
   /* height: 100vh; */
   display: flex;
   flex-direction: row;
   /* align-items: center;
   justify-content: center; */
   margin: 0;
   flex-wrap: nowrap;
   overflow: hidden;
}

button {
   color: inherit;
   font-weight: inherit;
}

a {
   text-decoration: underline;
}

a:hover {
   text-decoration: underline;
}

a:active, a:visited, a:link {
   color: var(--color-font-main);
}

.zmax {
   z-index: 100;
}

.retro-box-old {
   border: 3px solid var(--color-font-title);
   border-radius: 5px;
   box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

.retro-border {
   box-shadow:
		inset calc(var(--pixel) * -1) 0 0 0 var(--pixel-border),
		inset calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2),
		inset calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3),
		inset 0 0 calc(var(--pixel) * -1) 0 var(--pixel-border),
		inset 0 0 calc(var(--pixel) * -2) 0 var(--pixel-border-2),
		inset 0 0 calc(var(--pixel) * -3) 0 var(--pixel-border-3)
      ;
}
.retro-box {
   box-shadow:
	/* Inner Background Color */
		0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		
	/* Pixel Border Layer 1 */
		calc(var(--pixel) * -1) 0 0 0 var(--pixel-border),
		var(--pixel) 0 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * 2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		
	/* Pixel Border Layer 2 */
		calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2),
		calc(var(--pixel) * 2) 0 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -1) 0 var(--pixel) var(--pixel-border-2), 
		0 var(--pixel) 0 var(--pixel) var(--pixel-border-2),
		0 calc(var(--pixel) * -4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * 4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		
	/* Border Layer 3: --pixel-border-3 */
		calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3),
		calc(var(--pixel) * 3) 0 0 0 var(--pixel-border-3),
		0 0 0 calc(var(--pixel) * 2) var(--pixel-border-3),
		0 calc(var(--pixel) * -3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * 3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * -5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * 5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) var(--pixel-border-3), 
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) var(--pixel-border-3),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) var(--pixel-border-3), 
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) var(--pixel-border-3),
		0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) var(--pixel-border-3), 
		0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) var(--pixel-border-3);
}

.hidden {
   display: none !important;
}

.btn, .btn * {
   cursor: pointer;
}

.flex-row {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.flex-column {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.flex-center {
   align-items: center;
   justify-content: center;
   text-align: center;
}

.flex-spread {
   justify-content: space-between;
}

.flex-wrap {
   flex-wrap: wrap;
}


.paper-border {
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  display: inline-block;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.paper-border:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.paper-border:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

.round-border {
   border-radius: 30px;
}

.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.interactive {
   /* display: inline-flex; */
   align-items: center;
   /* appearance: none; */
   background-color: #FCFCFD;
   border-radius: 4px;
   border-width: 0;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.0) 0 7px 10px -3px,#D6D6E7 0 -3px 0 inset;
   box-sizing: border-box;
   justify-content: center;
   /* line-height: 1; */
   /* list-style: none; */
   /* overflow: hidden; */
   /* padding: 0 5px 0 5px; */
   /* position: relative; */
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow,transform;
   vertical-align: top;
}

.interactive:focus {
   box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.interactive:hover {
   box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   transform: translateY(-2px);
}

.interactive:active {
   box-shadow: #D6D6E7 0 3px 7px inset;
   transform: translateY(2px);
}

.btn-block {
   /* height: 2em; */
   /* font-size: var(--font-size-main); */
}

.btn-block:hover {
   
}

.btn-block:active {
   
}

.btn-block a {
   text-decoration: unset;
   text-align: center;
   vertical-align: middle;
   /* all: unset; */
}

select {
   font-family: inherit;
   font-size: inherit;
   padding: 0 1em 0 1em;
}
select option {
   padding: inherit;
}

.font-small {
   font-size: var(--size-small);
}

.font-normalsize {
   font-size: var(--size-normalsize);
}

.font-large {
   font-size: var(--size-large);
}

.font-Large {
   font-size: var(--size-Large);
}

.font-LARGE {
   font-size: var(--size-LARGE);
}

.font-huge {
   font-size: var(--size-huge);
}

.font-Huge {
   font-size: var(--size-Huge);
}

.missing {
   background-color: magenta;
}

.parallax {

}

.active.smooth {
   max-height:1000rem;
}

.inactive.smooth {
   /* max-height: 0rem; */
}

.smooth {
   transition: flex-grow 0.25s ease-out;
}

.inactive.smooth {
   /* max-height: auto; */
}

#sidebar {
   /* flex-grow: 0; */
   /* max-width: var(--sidebar-width); */
   /* min-width: var(--sidebar-width); */
}

#main-content {
   min-width: var(--canvas-min-width);
   height: 100vh;
   flex: 1000 1000 auto;
   /* flex-grow: 10; */
}

.demo-controls-container {
   position: relative;
   max-width: 26rem;
   height: 0;
   top: 1rem;
   left: 1rem;
   /* align-items: unset; */
   z-index: 50;
   /* align-items: center; */
}

.demo-controls {
   width: fit-content;
}

.demo-controls select, .demo-controls option {
   width: 100%;
   align-items: center;
   text-align: center;
}

.demo-controls .labeled {
   justify-content: center;
}

.demo-controls #demo-controls-right {
   flex: auto;
   align-items: flex-start;
   justify-content: space-between;
}

.demo-controls #demo-controls-left {
   flex-grow: 10;
   justify-content: flex-start;
} 

#demo-controls-left > *, #demo-controls-right > * {
   margin-top: 3px;
   padding-bottom: 2px;
   /* overflow: hidden; */
}

.demo-controls .labeled > * {
   padding-right: 0.5rem;
   padding-left: 0.5rem;
}

.demo-controls .flex-tight {
   justify-content: center;
}

.demo-controls > div {
   background-color: var(--color-theme-normal-alpha);
   border-radius: 5px;
   margin-top: 0.1rem;
}

.demo-description {
   /* background-color: var(--color-theme-normal); */
   background-color: var(--color-theme-normal-alpha);
   border-radius: 5px;
   margin-top: 0.3rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
}

.demo-description * {
   background-color: unset;
}

#main-canvas {
   width: 100%;
   height: 100%;
   z-index: 50;
   /* position: relative; */
    /*breaks help button and fullscreen button*/
}

#canvas-wrapper {
   width: 100%;
   height: 100%;
   position: relative;
}

.bold {
   font-weight: 600;
}

.italic {
   font-style: italic;
}

/* [lang] {
   display: none;
} */

.language-picker, .graphics-picker, .font-picker, .fps-limit-picker{
   justify-content: space-between;
}

.language-picker {
   gap: 1em;
}

.canvas-button {
   display: block;
   width: auto;
   height: auto;
   transition: scale 0.3s ease-in-out;
}

.fullscreen-button {
   position: absolute;
   left: calc(100% - 80px);
   top: 0%;
   z-index: 75;
}

.help-button {
   position: absolute;
   left: calc(100% - 80px);
   top: 100px;
   z-index: 75;
}

.loading-screen {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0;
   align-items: center;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 100%;
   height: 100%;
}

.loading-screen span {
   font-size: 3rem;
   color: var(--color-theme-accent);
   mix-blend-mode: difference;
   /* filter: invert(0.5); */
}

.loading-screen.hide {
   z-index: -100;
   width: 0;
}

.bar-container {
   width: 300px;
   background-color: var(--color-theme-bold);
}

.bar-cutout {
   height: 100%;
   overflow:hidden;
}

.bar-progress {
   background-color: var(--color-theme-normal);
   width: 300px;
   height: 100%;
   position:absolute;
   top:0; /* always declare both X & Y */
   left:0;
   filter: brightness(1.0);
}

.canvas-button img:hover {
   scale: 0.9;
}

.canvas-button img {
   mix-blend-mode: difference;
   /* -webkit-filter: grayscale(1) invert(1); */
   filter: invert(0.5);
   
   /* backdrop-filter: hue-rotate(30deg); */
}

.left-right-aligned > div {
   justify-content: space-evenly;
   align-items: center;
}

.wiggle-animation
{
    -webkit-animation: wiggle 1.5s ease infinite;
            animation: wiggle 1.5s ease infinite;
}

@keyframes wiggle
{
    from
    {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }

    10%,
    20%
    {
        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
    }

    30%,
    50%,
    70%,
    90%
    {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
    }

    40%,
    60%,
    80%
    {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
                transform: rotate3d(0, 0, 1, -10deg);
    }

    to
    {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}