*:not([popover]),
*::after:not([popover]),
*::before:not([popover]) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

a {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100dvh;
  display: flex;
  background-color: #111;
}

.container {
  --color: mediumspringgreen;
  height: 100%;
  width: 100%;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  place-content: center;

  .open-button {
    border-color: transparent;
    background-color: transparent;
    color: #e9e9e9;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-size: 1.2em;
    transition: box-shadow 0.3s ease-in-out;
    box-shadow: inset 3px 3px 5px var(--color), inset -3px -3px 5px var(--color);
    position: relative;
    z-index: 5;

    &:hover {
      box-shadow: inset 3px 3px 20px var(--color),
        inset -3px -3px 20px var(--color);
    }
  }

  #miPopover {
    border-radius: 8px;
    border: none;
    padding: 1rem;
    width: 230px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease,
      overlay 0.3s allow-discrete, display 0.3s allow-discrete;

    &[popover]:popover-open {
      transform: scale(1);
      opacity: 1;
      transition: transform 0.3s ease;

      @starting-style {
        transform: scale(0);
        opacity: 0;
      }
    }

    &::backdrop {
      background-image: linear-gradient(to bottom, #0f02, #0002);
    }

    p,
    button {
      display: inline-flex;
      text-align: center;
      padding-inline: 0.4rem;
    }

    .close-button {
      margin-left: 0.8rem;
      flex-wrap: wrap;
      place-content: center;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      border: 1px solid #000;
      box-shadow: inset 3px 3px 5px var(--color), inset -3px -3px 5px var(--color);
      transition: box-shadow 0.4s ease;

      &:active {
        box-shadow: inset -3px 3px 20px var(--color),
          inset 3px -3px 20px var(--color);
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    bottom: -50%;
    width: 600px;
    height: 600px;
    left: 50%;
    background: linear-gradient(90deg, #a5e29c, #1b7b2c);
    filter: blur(20px);
    border-radius: 50%;
    transform: translateX(-50%) scaleX(1.5);
  }
}
