:root {
  color-scheme: dark;
  background: #3b3d42;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background: #3b3d42;
}

.page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vmin, 48px);
}

.logo-frame {
  width: min(78vw, calc(100svh - 64px), 640px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(244, 243, 240, 0.42);
  border-radius: clamp(28px, 6vmin, 52px);
  background: rgba(16, 17, 19, 0.08);
  box-shadow:
    0 22px 64px rgba(10, 11, 13, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .logo-frame {
    width: min(88vw, calc(100svh - 40px));
    border-radius: clamp(24px, 8vw, 40px);
  }
}