@import url("https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&famiSpline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap");

:root {
  --bg: #fdfdfd30;
  --body-bg: 6087ba;
  --accent-color: #35d;
  --shadow-color: #00000040;
  --font-size: 15px;
  --line-height: 20px;
  --whitespace: 10px;
  --whitespace-50: calc(var(--whitespace) * 0.5);
  --whitespace-200: calc(var(--whitespace) * 2);
  --button-height: calc(var(--line-height) + var(--whitespace));
  --rounding-50: 2.5px;
  --rounding: 5px;
  --rounding-200: 10px;
  --border-shadow: 0 0 0 1px var(--shadow-color);
  --widget-height: calc(var(--line-height) + var(--whitespace));
}

input,
button {
  border: none;
  min-width: var(--widget-height);
  line-height: var(--line-height);
  font-size: var(--font-size);
  flex-shrink: 0;
  box-shadow: var(--border-shadow);
  max-height: var(--wiget-height);
  padding: var(--whitespace-50) var(--whitespace);
}

input {
  border-radius: var(--rounding-50);
  border: 0;
  background: #fff6;
}

button {
  box-shadow: inset 1px 1.5px 1px 0 #fff8, inset -1px -1.5px 1px 0 #fff8,
    0 1px 1px #00000040;
  background: transparent;
  backdrop-filter: brightness(80%) blur(2px);
  border-radius: calc(var(--button-height) * 0.5);
  border: 0;
  transition: 0.25s ease-out;
}

button:disabled {
  pointer-events: none;
}

button:hover {
  box-shadow: inset 1px 1px 1px 1px var(--accent-color),
    inset -1px -1px 1px 1px var(--accent-color), 0 1px 1px #00000040;
}

button:active {
  color: #fff;
}

button:active::after {
  content: " ";
  border-radius: inherit;
  position: absolute;
  background: var(--accent-color);
  animation: growInset 0.2s ease-out forwards;
  z-index: -1;
}

@keyframes growInset {
  0% {
    inset: 50% 50%;
  }

  100% {
    inset: 0%;
  }
}

body {
  font-family: "Aleo", Sans-serif;
  background: var(--body-bg);
  font-size: var(--font-size);
  margin: 0;
}

.column {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px; /* Key for the effect */
}

.parallax {
  content: " ";
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background-size: cover;
  background-position: center;
}

.sky {
  background-image: url(/sky.svg);
  transform: translateZ(-8px) scale(10);
}

.far {
  background-image: url(/cloud.svg);
  filter: blur(2px);
  transform: translateY(20%) translateZ(-6px) scale(8);
}

.medium {
  background-image: url(/cloud.svg);
  filter: brightness(90%) blur(4px);
  transform: translateY(30%) translateZ(-4px) rotateY(180deg) scale(9);
}

.near {
  background-image: url(/cloud.svg);
  filter: brightness(80%) blur(8px);
  transform: translateY(30%) translateZ(-2px) scale(8);
}

.doc {
  width: calc(100vw - 8em);
  max-width: 40em;
  margin: 2em 0;
  padding: 2em;
}

.doc h1 {
  margin-top: 0;
}

h1 {
  text-align: center;
  font-size: 300%;
  font-weight: 400;
}

h2 {
  font-weight: 400;
  font-size: 200%;
}

code {
  font-family: "Spline Sans", monospace;
  font-weight: 400;
  color: var(--accent-color);
}

blockquote {
  border-radius: 0.25em;
  background: #fff6;
  margin: 0;
  padding: 1em 2em;
}

pre {
  border-radius: 0.25em;
  background: #2228;
  padding: 1em;
}

pre code {
  color: #eee;
}

.App {
  max-width: 400px;
  margin: auto;
  margin-top: var(--whitespace-200);
  padding: var(--whitespace-200);
}

.doc,
.App {
  border-radius: 1em;
  background: var(--bg);
  box-shadow: inset 0 0 4px 1px #fffc, 0 4px 8px #00000040;
  backdrop-filter: blur(8px);
}

.App h2 {
  margin: 0;
  text-align: center;
}

.elastic {
  flex: 1 1 auto;
}

.App > * + * {
  margin-top: 20px;
}

.List {
  display: flex;
  flex-direction: column;
  gap: var(--whitespace-50);
}

.ListItem {
  display: flex;
  gap: var(--whitespace);
  align-items: center;
}

.ListItem > * {
  line-height: var(--line-height);
}

.ListItem > span {
  padding: var(--whitespace-50);
}

.Editor {
  display: flex;
  gap: var(--whitespace);
}