main {
  padding-top: 0;
}
main button {
  --component--max-width: 50ch;
  display: block;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
ul {
  list-style:none;
}

.hidden {
  display: none;
}
:disabled {
  display:none;
}

.dialog-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialog-inner-wrapper {
  width: 60%;
  max-width: 70ch;
  height:auto;
  min-height: calc(var(--vertical-rhythm) * 8);
  padding: var(--vertical-rhythm);
  border: var(--border-width--default) solid var(--color--text);
  margin:auto;
  margin-top: 20%;
  background-color: var(--color--background);
  border-radius: var(--border-radius--subtle);
  box-shadow: 0 0 999px var(--color--background);
}
#dialog--language button {
  font-weight: bold;
}
#language-recomendation {
  text-align: center;
}
#language-recomendation button {
  font-size: var(--type-scale--1);
  min-width: 10ch;
  margin: var(--vertical-rhythm);
  color: var(--color--background);
  background-color: var(--color--text);
}

input.error {
  background:red;
}
canvas {
  border:1px solid;
  display:none;
}
#debug-div {
  display: none;
}
.show-debug #debug-div {
  display: block;
  border: 1px solid;
  padding: 1ch;
}
.show-debug #debug-div::before {
  display: block;
  content:'DEBUG:';
  border: 1px solid;
  padding: 1ch;
}

.status--pip #pipifytoggle {
  display: none;
}
.status--pip-active #startpipbutton {
  display:none;
}
#pipsection {
  display: none;
}
.status--pip #pipsection {
  display: block;
}

div.output{
  text-align: center;
}


/* * css for passive state * */
#toggle--theme {
  z-index: 999;
}
#text {
  display: none;
  z-index: 99;
}
.status--passive #text {
  display: block;
}
.status--passive #outputwrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 1rem);
    padding: 0;
    margin: 0;
    background: var(--color--background);
}
#outputwrapper #output {
  display: block;
  font-size: var(--type-scale--3);
  max-width: 60ch;
  padding: 4em;
  margin: auto;
}

::placeholder {
  position: relative;
  z-index: -1;
}