:root {
  --lineThickness: 0.333;
  --angleSize: 0.2;
  --anglesSize: 100 * var(--angleSize);
  --negativeAnglesSize: -100 * var(--angleSize);
  
  --angle3deg: 60;
  --angle2deg: 60;
  --angle1deg: 60;
  
  --triangleWidth: 30%;
  
  --panelHeight: 20vh;
  --panelNavHeight: 4vh;
  --panelAnimTime: 20s;
  /* Values? (If needed)*/
  --boxShadowSize: 3px;
  --boxShadowSizeN: -3px;
  --boxShadowFade: 10px;
  
  --textShadowFade: 1px;
  
  /* Color Palette Fast Config */
  --value: 62%;
  --saturation: 100%;
  --darkValue: 44%;
  --darkSaturation: 62%;
  /* Colors */
  --mainBgColor: rgba(21, 21, 21, 0.8);
  --secondaryBgColor: rgba(21, 21, 21, 0.2);
  --transparentColor: rgba(0, 0, 0, 0);
  --textColor: rgba(245, 245, 245, 1);
  --secondaryColor: rgba(31, 31, 31, 1);
  /* Colors (Palette Basic [RGB]) */
  --red: hsl(0, var(--saturation), var(--value));
  --darkRed: hsl(0, var(--darkSaturation), var(--darkValue));
  --green: hsl(117, var(--saturation), var(--value));
  --darkGreen: hsl(117, var(--darkSaturation), var(--darkValue));
  --blue: hsl(224, var(--saturation), var(--value));
  --darkBlue: hsl(224, var(--darkSaturation), var(--darkValue));
  /* More Colors (Palette Extra) */
  --white: hsl(0, 0%, var(--value));
  --darkWhite: hsl(0, 0%, var(--darkValue));
  --orange: hsl(30, var(--saturation), var(--value));
  --darkOrange: hsl(30, var(--darkSaturation), var(--darkValue));
  --yellow: hsl(52, var(--saturation), var(--value));
  --darkYellow: hsl(52, var(--darkSaturation), var(--darkValue));
  --cyan: hsl(170, var(--saturation), var(--value));
  --darkCyan: hsl(170, var(--darkSaturation), var(--darkValue));
  --purple: hsl(270, var(--saturation), var(--value));
  --darkPurple: hsl(270, var(--darkSaturation), var(--darkValue));
  --pink: hsl(300, var(--saturation), var(--value));
  --darkPink: hsl(300, var(--darkSaturation), var(--darkValue));
  
  
  /*Side colors*/
  --side1: var(--red);
  --side2: var(--blue);
  --side3: var(--green);

  --tweenTime: 0.5s;
}

* {
  padding: 0;
  margin: 0;
  color: var(--textColor);
  text-shadow:
    -1px -1px var(--textShadowFade) var(--secondaryColor),
    1px -1px var(--textShadowFade) var(--secondaryColor),
    -1px 1px var(--textShadowFade) var(--secondaryColor),
    1px 1px var(--textShadowFade) var(--secondaryColor);
  -webkit-tap-highlight-color: transparent;
}

html, body {
  min-height: 100vh;
  
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
  background: linear-gradient( to bottom, var(--darkBlue), var(--darkPurple));
}

#triangleBoxWrap {
  overflow: visible;
  min-height: calc(100vh - var(--panelHeight));
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
}

#triangleBox {
  height: 100%;
  width: 100vw;
  box-sizing: border-box;
  padding: 5% calc((100% - var(--triangleWidth)) / 2);
  
  display: flex;
  flex-direction: column;
  
  overflow-y: hidden;
  overflow-x: scroll;
}
#generationError {
  text-align: center;
  justify-content: center;
  height: 100%;
  width: 80vw;
  margin-bottom: 4vh;
  align-self: center;
}

.sides {
  width: 100%;
  padding: 0;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.mainSide {
  width: 100%;
  background-color: var(--side1);
}

.sideWrapper {
  height: 100%;
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}



#side2 {
  background-color: var(--side2);
  /*rotate: -43.42deg;/*- arctan(parents absoulute size Y / X)*/
}
#side3 {
  background-color: var(--side3);
  /*rotate: 43.42deg;*/
}

.sideDef {
  position: relative;
  height: calc(var(--lineThickness) * 1vh);
  border-radius: 1vh;
}

.sideNameText {
  font-size: 16px;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  
  position: absolute;
  left: 0;
  top: calc(var(--lineThickness) * -1vh - 16px);
}





#panel {
  height: var(--panelHeight);
  width: 100vw;
  background-color: transparent; /*var(--mainBgColor);*/
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  position: relative;
  overflow: hidden;
}

#panel::before {
  content: ''; /* Required for pseudo-elements to render */
  position: absolute; /* Position it relative to #panel */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(30, 60, 255, 0.2);*/ /*var(--mainBgColor);*/
  background: linear-gradient(to right, rgba(30, 60, 255, 0.3), rgba(30, 60, 255, 0.1), rgba(255, 30, 60, 0.15));
  background-size: 200% 100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  z-index: -1; /* Place it behind the content */
  border-radius: 16px 16px 0 0; /* Match the parent's border radius */
  
  animation: moveGradient var(--panelAnimTime) infinite alternate; /* Animation settings */
}

@keyframes moveGradient {
  0% {
    background-position: 0 0; /* Start position */
  }
  100% {
    background-position: 100% 0; /* Move to the end */
  }
}

#panelNav {
  height: var(--panelNavHeight);
  width: 100%;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  
  box-sizing: border-box;
  
  overflow-x: none;
  overflow-y: hidden;
}

#panelNav p {
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 10px;
  min-width: 20%;
}

#panelNav p:nth-child(even) {
  flex-grow: 1;
}

#panelNav .active {
  background-color: transparent; /*rgba(255, 255, 255, 0.2);*/
  height: var(--panelNavHeight);
  align-content: center;
  border-radius: 16px 16px 0px 0px;
  position: relative;
}
#panelNav p:not(.active) {
  cursor: pointer;
}
#panelNav .active::before {
  content: ''; /* Required for pseudo-elements to render */
  position: absolute; /* Position it relative to #panel */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(30, 60, 255, 0.2);*/ /*var(--mainBgColor);*/
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  background-size: 200% 100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  z-index: -1; /* Place it behind the content */
  border-radius: 16px; /* Match the parent's border radius */
  
  animation: moveGradient var(--panelAnimTime) infinite alternate; /* Animation settings */
}

.tab {
  height: calc(var(--panelHeight) - var(--panelNavHeight));
  width: 100vw;
  scrollbar-width: none;
  /*border-radius: 16px 16px 0 0;*/
}

.settings {
  scroll-snap-type: y mandatory;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8vh;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
}

.solution {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 2vh 0;
  box-sizing: border-box;
  overflow-y: scroll;
}

.inputs {
  background: linear-gradient(90deg, var(--side1), var(--side2), var(--side3));
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 33%;
}

input {
  background-color: transparent;
  border: none;
  text-align: center;
  width: 100%;
  color: var(--textColor);
  text-shadow:
    -1px -1px var(--textShadowFade) var(--secondaryColor),
    1px -1px var(--textShadowFade) var(--secondaryColor),
    -1px 1px var(--textShadowFade) var(--secondaryColor),
    1px 1px var(--textShadowFade) var(--secondaryColor);
  box-sizing: border-box;
}

input::placeholder {
  color: var(--blue);
  text-shadow:
    -1px -1px var(--textShadowFade) var(--secondaryColor),
    1px -1px var(--textShadowFade) var(--secondaryColor),
    -1px 1px var(--textShadowFade) var(--secondaryColor),
    1px 1px var(--textShadowFade) var(--secondaryColor);
}

input:focus {
  outline: none;
}

.none {
  display: none;
  opacity: 0;
}


.angleWrapMain {
  height: calc(var(--anglesSize) * 0.5vw);
  width: calc(var(--anglesSize) * 1vw);
  position: absolute;
  bottom: calc(var(--lineThickness) * 1vh);
  left: calc(var(--negativeAnglesSize) * 0.5vw);
  z-index: -1;
}
.angleWrap {
  overflow: visible;
  height: calc(var(--anglesSize) * 0.5vw);
  width: calc(var(--anglesSize) * 1vw);
  position: absolute;
  top: calc(var(--lineThickness) * 1vh);
  right: calc(var(--negativeAnglesSize) * 0.5vw);
  z-index: -1;
}

.angleText {
  font-size: 10px;
  width: 100%;
  text-align: right;
  padding: 0;
  margin: 0;
  
  position: absolute;
  left: 0;
  top: calc(var(--lineThickness) * -1vh - 10px);
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: none;
  overflow: visible;
}

#angleTextMain {
  text-align: left;
  left: 100%;
  top: calc(100% + var(--lineThickness) * +1vh + 10px);
}


#angle3, #angle2, #angle1 {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#angle3:before, #angle2:before, #angle1:before {
  height: inherit;
  width: inherit;
  content: "";
  border-radius: calc(var(--anglesSize) * 1vw) calc(var(--anglesSize) * 1vw) 0 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

#angle1, #angle2 {
  rotate: 180deg;
}

#angle3:before {
  position: absolute;
  bottom: 0;
  left: 0;
}

#angle2:before, #angle1:before {
  position: absolute;
  bottom: 0;
  right: 0;
}

#angle3:before {
  background: radial-gradient(ellipse at bottom, transparent, transparent 60%, var(--side3) 70%);
  -webkit-transform: rotate(calc(180deg - var(--angle3deg) * 1deg));
  -moz-transform: rotate(calc(180deg - var(--angle3deg) * 1deg));
  -ms-transform: rotate(calc(180deg - var(--angle3deg) * 1deg));
  transform: rotate(calc(180deg - var(--angle3deg) * 1deg));
}
#angle2:before {
  background: radial-gradient(ellipse at bottom, transparent, transparent 60%, var(--side2) 70%);
  -webkit-transform: rotate(calc(180deg - var(--angle2deg) * 1deg));
  -moz-transform: rotate(calc(180deg - var(--angle2deg) * 1deg));
  -ms-transform: rotate(calc(180deg - var(--angle2deg) * 1deg));
  transform: rotate(calc(180deg - var(--angle2deg) * 1deg));
}
#angle1:before {
  background: radial-gradient(ellipse at bottom, transparent, transparent 60%, var(--side1) 70%);
  /*
  background: radial-gradient(ellipse at bottom, transparent, var(--side1) 60%, transparent 65%, var(--side1) 70%);
  */
  -webkit-transform: rotate(calc(180deg - var(--angle1deg) * 1deg));
  -moz-transform: rotate(calc(180deg - var(--angle1deg) * 1deg));
  -ms-transform: rotate(calc(180deg - var(--angle1deg) * 1deg));
  transform: rotate(calc(180deg - var(--angle1deg) * 1deg));
}

/*.angleDiv {
  position: absolute;
  bottom: 0;
  left: -50px;
}*/



















@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap&text=∑');

/*body {
  background: #1f1d2b;
  color: #FFF;
  font-family: 'Roboto Slab', serif;
}*/

.showcase {
  padding: 15px;
  text-align: center;
  position: relative;
}

.math .frac {
  display: inline-flex;
  vertical-align: middle;
  flex-direction: column;
  text-align: center;
  margin-top: -1px;
}

.math .frac > *:first-child {
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
}

.math .frac > *:last-child {
  padding-top: 5px;
}

.math .frac > * {
  padding: 0 0.5em;
}

.math .sqrt {
  border-top: 2px solid currentColor;
  margin-left: 10px;
  padding-left: 5px;
  position: relative;
  display: inline-block;
}

.math .sqrt::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -10px;
  bottom: 0px;
  width: 10px;
  background: currentColor;
  clip-path: polygon(
    0 50%,
    2px 50%,
    50% calc(100% - 2px),
    calc(100% - 2px) 0,
    100% 0,
    100% 2px,
    calc(50% + 2px) 100%,
    calc(50% - 2px) 100%,
    0 calc(50% + 2px)
  );
}

.surround {
  padding: 0 10px;
  position: relative;
  display: inline-block;
  --round: 5px;
  --off: 0;
}

.surround::before {
  content: '';
  width: 5px;
  position: absolute;
  top: 0px;
  left: var(--off);
  bottom: 0px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-top-left-radius: var(--round);
  border-bottom-left-radius: var(--round);
}

.surround::after {
  content: '';
  width: 5px;
  position: absolute;
  top: 0px;
  right: var(--off);
  bottom: 0px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-top-right-radius: var(--round);
  border-bottom-right-radius: var(--round);
}

.surround.round {
  --round: 10px 30px;
}

.surround.square {
  --round: 0;
}

.surround.curly {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image:
    linear-gradient(0deg, currentColor 25%, currentColor 25%),
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center, 100% center;
}

.surround.sys {
  --round: 10px;
  --off: 5px;
  padding: 0 15px;
  background-image:
    linear-gradient(0deg, currentColor 25%, currentColor 25%);
  background-repeat: no-repeat;
  background-size: 5px 2px;
  background-position: 0 center;
}

.surround.sys::after {
  content: unset;
}

.cs {
  position: relative;
  display: inline-block;
}

.cs > sup {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}

.cs > sub {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  transform: translate(-50%);
  width: max-content;
}

.big {
  font-size: 2em;
  font-weight: 200;
}

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

.arrow::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  right: -1px;
  height: 5px;
  width: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: top right;
  transform: rotate(45deg);
}

.surround.vec {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

.matrix {
  display: inline-grid;
  grid-template-columns: repeat(var(--c), 1fr);
  grid-gap: 5px;
  padding: 5px 15px;
  vertical-align: middle;
}

.side0 {
  color: var(--side1);
}
.side1 {
  color: var(--side2);
}
.side2 {
  color: var(--side3);
}

.line {
  width: 100%;
  height: 2px;
  border-radius: 8px;
  margin: 4px 0;
  background-color: rgba(245, 245, 245, 0.7);
}










.slider {
  width: 100%;
}
.settings .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  box-sizing: border-box;
  width: 100%;
}
.settings > * {
  width: 100%;
  padding: 8px;
  min-height: calc(var(--panelHeight) - var(--panelNavHeight) - 4vh);
  box-sizing: border-box;
  
  scroll-snap-align: start;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center
}
.settings .rowSettingWrap {
  flex-direction: row;
  /*align-items: flex-start;*/
}
.settings > *:nth-child(odd) {
  background-color: rgba(245, 245, 245, 0.05);
}
.settings > *:nth-child(even) {
  background-color: rgba(21, 21, 21, 0.1);
}

#angleInputType input {
  max-width: 10%;
}

.AngleSliderDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
}

button {
  outline: none;
  border: 2px solid #212121;
  border-radius: 12px;
  padding: 4px;
  margin: 8px;
  box-sizing: border-box;
  height: 50%;
}

#languageSelection div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-x: scroll;
  scrollbar-width: none;
}




@keyframes popUp {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

.popUpAnim {
  animation: popUp var(--tweenTime) forwards cubic-bezier(0.1, 1.4, 0.5, 1);
}



.none {
  display: none;
  opacity: 0;
}