squoosh/src/shared/initial-app/Intro/style.css

.intro {
  composes: abs-fill from '../util.css';
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  overscroll-behavior: contain;
}

.blob-canvas {
  composes: abs-fill from '../util.css';
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}

.main {
  min-height: 70vh;
  display: grid;
  grid-template-rows: max-content max-content;
  justify-items: center;
  position: relative;
  --blob-pink: var(--hot-pink);
  --center-blob-opacity: 0.6;
}

.logo-container {
  margin: 8rem 0 1rem;
}

.logo {
  transform: translate(-1%, 0);
  width: 189px;
  height: auto;
}

.load-img {
  position: relative;
  color: var(--white);
  font-style: italic;
  font-size: 1.2rem;
}

.blob-svg {
  composes: abs-fill from '../util.css';
  width: 100%;
  height: 100%;
  fill: var(--blob-pink);

  & path {
    opacity: var(--center-blob-opacity);
  }
}

.load-img-content {
  position: relative;
  --size: 36rem;
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-rows: max-content max-content;
  justify-items: center;
  align-content: center;
  gap: 0.7rem;
}

.load-btn {
  composes: unbutton from '../util.css';
}

.load-icon {
  --size: 5rem;
  width: var(--size);
  height: var(--size);
  fill: var(--white);
  transform: translate(4.3%, -1%);
}

.paste-btn {
  composes: unbutton from '../util.css';
  text-decoration: underline;
  font: inherit;
  color: inherit;
}