@charset "UTF-8";
* {
  box-sizing: inherit;
  margin: 0;
  font: inherit;
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 240px;
  background: #22242a;
  color: #efefef;
  font: 1em/1.25 ubuntu, trebuchet ms, sans-serif;
}

body {
  --space: Min(4vmin, .75rem);
}

h3 {
  font: 700 2.375em/2 satisfy, z003, segoe script, comic sans ms, cursive;
  text-align: center;
}

p {
  padding: var(--space);
}

.grid {
  display: grid;
  grid-gap: var(--space);
  padding: var(--space);
}

main {
  grid-template-columns: repeat(auto-fit, minmax(min(100% - 2 * var(--space), 25em), 1fr));
  place-content: center;
}

.item {
  border-radius: 7px;
  box-shadow: 0 0 1px 1px #484d5a;
  background: #1b1d22;
  color: #f9f9f9;
}
.item::after {
  display: grid;
  grid-area: 2/1;
  place-self: start end;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  transform: rotate(30deg);
  box-shadow: 0 0 2px 1px;
  background: crimson;
  place-content: center;
  text-align: center;
  content: "only " attr(data-size) " bytes!";
}

h4 {
  overflow: hidden;
  max-width: 100%;
  font-size: 1.25em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrap {
  grid-area: 2/1;
  background: #fff;
}

.view {
  height: min(calc(25em - 4*var(--space)), calc(100vh - 8*var(--space)));
}

[type=checkbox] {
  position: absolute;
  right: 100vw;
}
[type=checkbox] + label {
  --hlg: 0;
  --sel: 0;
  grid-area: 3/1;
  justify-self: start;
  border: solid 0.25em transparent;
  padding: var(--space);
  border-radius: inherit;
  box-shadow: inherit;
  background: rgba(50, calc(55 + var(--sel)*40), calc(75 + var(--sel)), max(var(--hlg), var(--sel))) padding-box;
  color: #25cf5f;
  cursor: pointer;
}
[type=checkbox] + label::before, [type=checkbox] + label::after {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: scale(var(--sel));
  opacity: var(--sel);
  background: rgba(50, 55, 65, 0.85);
  content: "";
}
[type=checkbox] + label::after {
  --o: calc(var(--space) + 1.5em);
  --g: linear-gradient(#fff 0 0);
  transform: scale(var(--sel)) translate(calc(50% - var(--o)), calc(var(--o) - 50%)) rotate(45deg);
  background: var(--g) 50%/4px 2.25em, var(--g) 50%/2.25em 4px red;
  background-repeat: no-repeat;
  clip-path: circle(1.5em);
  filter: blur(2px) contrast(6);
}
[type=checkbox]:focus + label, [type=checkbox] + label:hover {
  --hlg: 1 ;
}
[type=checkbox]:checked + label {
  --sel: 1 ;
}

footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, 8em);
  justify-content: end;
}

a {
  color: #1f5eff;
  text-decoration: none;
}
a::before {
  display: inline-block;
  margin-right: 0.25em;
  content: "🔗";
}

.code {
  --vis: 0;
  --not-vis: calc(1 - var(--vis));
  display: grid;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: var(--space);
  width: min(60em, 100vw - 2 * var(--space));
  transform: translate(calc(-50% - var(--not-vis)*100vw), -50%);
  background: #000;
  font-family: ubuntu mono, consolas, monaco, monospace;
  white-space: pre-wrap;
}
:checked ~ .code {
  --vis: 1 ;
}

.token--item::before {
  content: "\a   ";
}
.token--prop {
  color: #abe4ff;
}
.token--func {
  color: #f39dd4;
}
.token--ang {
  color: #d9abff;
}
.token--col {
  color: #f8f487;
}
.token--len {
  color: #bcff9b;
}
.token--keyw {
  color: #ffdaab;
}