@font-face {
  font-family: "ChakraPetch";
  src: url("ChakraPetch-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

:root {
  --item-width: 7.7em;
  --body-width: min(100vw, 50em);
  --items-width: var(--item-width);
  --main-width: calc(var(--body-width) - var(--items-width));

  
  --base-text-color: #fff;


  --main-background-color: #00170c;

  --item-color: #00513a;
  --mixture-item-color: #00513a;
  --mixture-effect-color: rgb(0, 0, 0, 0.4);

  --ineffective-color: rgba(255, 255, 255, 0.4);

  --base-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

  --main-height: 100vh;
  --item-height: calc(100vh / 16);

  --mixture-item-width: 7.7em;
  --mixture-items-width: var(--mixture-item-width);
  
  --mixture-effect-width: 10em;
  --mixture-effects-width: var(--mixture-effect-width);;
  --mixture-effect-height: 2em;


  --mixture-item-spacing: 0.2em;

  --base-font-size: min(1rem, max(0.5rem, 3.8vh));

  --inner-spacing: calc((var(--main-width) - (var(--mixture-items-width) + var(--mixture-effects-width))) / 3);

}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  text-shadow: inherit;
  font-size: inherit;
  text-align: inherit;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

html {
  font-size: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}


body {
  width: var(--body-width);
  height: 100%;
  margin: 0 auto;
  position: relative;
  line-height: 1.2;
  font-family: "ChakraPetch", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--base-font-size);
  color: var(--base-text-color);
  text-shadow: var(--base-text-shadow);
  text-align: left;
  overflow: hidden;
}



a {
  text-decoration: none;
}



header {
  display: none;
  /*
  height: 4rem;
  top: 0;
  background-image: url(kyle.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  */
}

main {
  width: var(--main-width);
  position: relative;
  margin-left: auto;
  outline: 2px solid #004c38;
  border-bottom: 0;
  height: var(--main-height);
  overflow: hidden;
  background: var(--main-background-color);
}

main > * {
  position: absolute;
}

#items {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: var(--item-width);
  overflow: hidden;
  z-index: 10;
  /* box-shadow: 0.2em 0 1em rgba(0, 0, 0, 0.2); */
}
#mixture-items,
#mixture-items-canvas
{
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}
#mixture-items {
  z-index: 10;
  box-shadow: inset 0 0 1em #000;
}
#mixture-items-canvas {
  z-index: 8;
  filter: invert(1);
}

#mixture-effects {
  top: 50%;
  width: var(--mixture-effect-width);
  right: calc((var(--main-width) / 4) - (var(--mixture-item-width) / 2));
  right: var(--inner-spacing);
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 9;
  backdrop-filter: blur(20px);
}


.item {
  display: block;
  width: 100%;
  height: var(--item-height);
  line-height: var(--item-height);
  text-align: center;
  background: var(--item-color);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent); 
}

.mixture-item
{
  --mixture-item-height: min(2.3em, calc(var(--main-height) / attr(data-count type(<number>)) - var(--mixture-item-spacing)));
  display: block;
  position: absolute;
  width: var(--mixture-item-width);
  height: var(--mixture-item-height);
  line-height: var(--mixture-item-height);
  text-align: center;
  background-color: var(--mixture-item-color);
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
  font-size: calc(var(--mixture-item-height) * 0.4);
  left: calc(var(--main-width) / 4 - var(--mixture-item-width) / 2);
  left: var(--inner-spacing);
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  z-index: calc(attr(data-index type(<number>)));
}

.mixture-effect
{
  display: block;
  width: 100%;
  height: var(--mixture-effect-height);
  line-height: var(--mixture-effect-height);
  background: var(--mixture-effect-color);
  text-align: center;
}



main:not(.dragging-item) .mixture-item:hover,
.mixture-item.dragging
{
  background: #00ca91 !important;
}

.mixture-item.dragging {
  transition-property: background-color;
  z-index: 100;
}

.dragging * {
  pointer-events: none;
}

.resizing * {
  transition-property: none;
}

.mixture-item[data-index] {
  
  --mixture-item-outer-height: calc(var(--mixture-item-height) + var(--mixture-item-spacing));
  top: calc((var(--mixture-item-outer-height) * attr(data-index type(<number>))) + (var(--main-height) / 2) - (attr(data-count type(<number>)) * var(--mixture-item-outer-height) / 2));
  
}













.ineffective {
  color: var(--ineffective-color);
  filter: grayscale(80%);
}

.effect-anti-gravity {
  color: rgb(39, 95, 207);
}
.effect-athletic {
  color: rgb(120, 203, 255);
}
.effect-balding {
  color: rgb(203, 151, 54);
}
.effect-bright-eyed {
  color: rgb(195, 249, 255);
}
.effect-calming {
  color: rgb(255, 209, 156);
}
.effect-calorie-dense {
  color: rgb(253, 136, 243);
}
.effect-cyclopean {
  color: rgb(255, 193, 118);
}
.effect-disorienting {
  color: rgb(255, 116, 81);
}
.effect-electrifying {
  color: rgb(86, 202, 255);
}
.effect-energizing {
  color: rgb(157, 255, 112);
}
.effect-euphoric {
  color: rgb(255, 234, 118);
}
.effect-explosive {
  color: rgb(254, 77, 67);
}
.effect-focused {
  color: rgb(121, 244, 255);
}
.effect-foggy {
  color: rgb(182, 182, 179);
}
.effect-gingeritis {
  color: rgb(255, 140, 46);
}
.effect-glowing {
  color: rgb(136, 231, 92);
}
.effect-jennerising {
  color: rgb(255, 145, 249);
}
.effect-laxative {
  color: rgb(123, 64, 40);
}
.effect-long-faced {
  color: rgb(255, 219, 101);
}
.effect-munchies {
  color: rgb(205, 113, 91);
}
.effect-paranoia {
  color: rgb(193, 96, 91);
}
.effect-refreshing {
  color: rgb(174, 250, 148);
}
.effect-schizophrenic {
  color: rgb(91, 81, 243);
}
.effect-sedating {
  color: rgb(111, 98, 219);
}
.effect-seizure-inducing {
  color: rgb(250, 229, 4);
}
.effect-shrinking {
  color: rgb(175, 247, 211);
}
.effect-slippery {
  color: rgb(156, 218, 249);
}
.effect-smelly {
  color: rgb(123, 185, 47);
}
.effect-sneaky {
  color: rgb(123, 123, 122);
}
.effect-spicy {
  color: rgb(248, 102, 73);
}
.effect-thought-provoking {
  color: rgb(246, 152, 194);
}
.effect-toxic {
  color: rgb(92, 151, 47);
}
.effect-tropic-thunder {
  color: rgb(247, 154, 66);
}
.effect-zombifying {
  color: rgb(112, 172, 92);
}