:root,
body.light {
  --primary:#6289ec;
  --on-primary:#ffffff;
  --primary-container:#cae6ff;
  --on-primary-container:#001e30;
  --secondary:#f7f7f7;
  --on-secondary:#3c3a3a;
  --secondary-container:#d4d5d7;
  --secondary-container:rgb(212 213 215 / 0.7);
  --tertiary:#3a6df0;
  --on-tertiary:#fff;
  --tertiary-container:#ebddff;
  --on-tertiary-container:#201634;
  --error:#ba1a1a;
  --on-error:#ffffff;
  --error-container:#ffdad6;
  --on-error-container:#410002;
  --background:#fcfcff;
  --on-background:#3c3a3a;
  --surface:#d4d5d7;
  --on-surface:#1a1c1e;
  --surface-variant:#c3c5c7;
  --on-surface-variant:#41474d;
  --outline:#72787e;
  --outline-variant:#c1c7ce;
  --shadow:#000000;
  --scrim:#000000;
  --inverse-surface:#2e3133;
  --inverse-on-surface:#f0f0f3;
  --inverse-primary:#8dcdff;
  --surface-dim:#d9dadd;
  --surface-bright:#f9f9fc;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f3f3f6;
  --surface-container:#edeef1;
  --surface-container-high:#e8e8eb;
  --surface-container-highest:#e2e2e5;
  --overlay: rgb(0 0 0 /0.5);
  --active: rgb(0 0 0 / 0.1);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
  --body: transparent !important;
}

body.dark {
  --primary:#e2e2e5;
  --on-primary:#3a6df0;
  --primary-container:#004b70;
  --on-primary-container:#cae6ff;
  --secondary:#21242d;
  --on-secondary:#ffce45;
  --secondary-container:rgb(47 51 62 / 0.7);
  --on-secondary-container:#fff;
  --tertiary:#3a6df0;
  --on-tertiary:#fff;
  --tertiary-container:#4d4162;
  --on-tertiary-container:#ebddff;
  --error:#ffb4ab;
  --on-error:#690005;
  --error-container:#93000a;
  --on-error-container:#ffb4ab;
  --background:#1a1c1e;
  --on-background:#e2e2e5;
  --surface:#2f333e;
  --on-surface:#e2e2e5;
  --surface-variant:#272b38;
  --on-surface-variant:#c1c7ce;
  --outline:#8b9198;
  --outline-variant:#41474d;
  --shadow:#000000;
  --scrim:#000000;
  --inverse-surface:#e2e2e5;
  --inverse-on-surface:#2e3133;
  --inverse-primary:#006493;
  --surface-dim:#111416;
  --surface-bright:#37393c;
  --surface-container-lowest:#0c0e11;
  --surface-container-low:#1a1c1e;
  --surface-container:#1e2022;
  --surface-container-high:#282a2d;
  --surface-container-highest:#333537;
  --overlay: rgb(0 0 0 / 0.5);
  --active: rgb(255 255 255 / 0.2);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
  --body: transparent !important;
}



/* SCROLL BARRA DE ROLAGEM */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background: transparent;
  &:hover {
    background: transparent;
  }
}

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background: var(--tertiary);
  border-radius: 10px;
  &:hover {
    background: transparent;
  }
}
/* FIM SCROLL BARRA DE ROLAGEM */


.button-mic {
  position: absolute;
  left: 55%;
  top: -45%;
  width: 100px;
  height: 100px;
  margin-left: -4.3em;
  margin-top: -1em;
  z-index: 100;
  padding: 0.25em 0.5em;
  color: #fff;
  background: -webkit-linear-gradient(#ccc, #FFF);
  border: 1px solid #fff;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.15em;
  font-weight: 200;
  transition: box-shadow 0.5s;
}
.button-mic:hover {
  border: 1px solid #00ffff;
  background: -webkit-linear-gradient(#91f4f8, #1b68cb);
  color: #00ffff;
}

.svg-color {
  fill: linear-gradient(#000, #FFF);
  width: 32px;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
main > div {
  display: inline-block;
  width: 10px;
  height: 4em;
  border-radius: 5px;
  margin: 0 2px;
  background: #00ffff;
  transform: scaleY(0.1);
  opacity: 0.25;
  transform: translate(-50%, -50%);
  z-index: 1;
  /*box-shadow: 3px 3px 80px 5px #00ffff;*/
}
main.error {
  color: red;
  min-width: 20em;
  max-width: 30em;
  margin: 0 auto;
  white-space: pre-line;
}
main:before,
main:after {
  background-color: #00ffff;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 40%;
}

main:before {
  right: -15em;
  margin-left: 0%;
}

main:after {
  left: -15em;
  margin-right: 0%;
}
