@font-face {
  font-family: 'hack';
  src: url('./hack.ttf');
}

* {
  box-sizing: border-box;
}

:root {
  font-size: 50%;
  --small: 1rem;
  --normal: 2rem;
  --big: 3rem;
  --bigger: 4rem;
  --biggest: 5rem;
  --huge: 6rem;
  --gigantic: 8rem;
}

:root.responsive {
  font-size: max(min(1vh, 1vw), 50%);
}

.hidden {
  display: none !important;
}



.column {
  display: flex;
  flex-flow: column wrap;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.center {
  align-items: center;
}

.f1 {
  flex: 1;
}

.f2 {
  flex: 2;
}

.f4 {
  flex: 4;
}

.f8 {
  flex: 8;
}

.f16 {
  flex: 16;
}

.nospill {
  overflow: hidden
}


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

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



button {
  font: inherit;
  font-size: var(--big);
  background-color: rgb(0, 20, 30);
  border-radius: 0;
  border: 0.2rem solid rgba(255, 255, 255, 0.7);
  color: white;
  padding: 2rem;
}

button:hover {
  background-color: rgb(80, 140, 190);
  border: 0.2rem solid rgba(0, 0, 0, 0.7);
  color: black;
}

input {
  font: inherit;
  font-size: var(--big);
  background-color: rgb(0, 0, 0);
  border-radius: 0;
  border: 0.2rem solid rgba(255, 255, 255, 0.7);
  color: white;
  padding: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}

label {
  font: inherit;
  font-size: var(--big);
  text-align: center;
  padding: 2rem;
}

body {
  font-size: var(--normal);
  margin: 0;
  padding: 0;
  font-family: hack, monospace;
  font-weight: 700;
  background: rgb(5, 5, 5);
  color: white;
  font-weight: 700;
}

body.responsive {
  height: 100vh;
  width: 100vw;
}




#app {
  width: 75rem;
  height: 130rem;
}

#app.responsive {
  width: 100%;
  height: 100%;
}

#app-header {
  padding: 2rem 4rem;
  gap: 1rem;
}

#app-content {
  min-height: min(40rem, 100%);
  min-width: min(50rem, 100%);
}


#app-controls{
  min-width: 40rem;
  /* */
  padding: 3rem;
}


#completions {
  min-height: 24rem;
}

#completion-checkbox {
  font-size: var(--normal);
}

h1 {
  /* */
  font-size: var(--bigger);
  margin: 0;
  text-align: center;
}






.box {
  background: rgba(10, 10, 10, 0.8);
  border: 0.4rem dashed rgba(255, 255, 255, 0.1);
}
 
.good {
  color: rgb(0, 255, 128);
}

.bad {
  color: rgb(255, 0, 128);
}










.image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.completion-item {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: rgba(0, 0, 0, 0.1);
}

.selected {
  background: rgba(255, 255, 255, 0.1);
  border: 0.2rem dashed rgba(255, 255, 255, 0.2);
}

.result-box {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.result-line {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: space-between;
}

.result-line>* {
  text-align: center;
  flex: 1;
}