<h1>Click the button to open the popup</h1>
<button popovertarget="some-popup" popovertargetaction="toggle">Open the popup</button>
<div id="some-popup" aria-modal="true" popover="manual">
  <p>Hi, i'm a popover!</p>
  <button popovertarget="some-popup" popovertargetaction="hide" autofocus>close</button>
</div>

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap');

button {
  display: block;
  padding:  10px 20px;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-size: 2rem;
  letter-spacing: .05em;
  color: #FFF;
  background: #D36135;
  border: 3px solid #E6AA68;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color .4s, border-color .4s;
}

button:is(:hover, :focus) {
  background: #9A401C;
  border-color: #BD8448;
}

[popover] {
  background: #ECE4B7;
  padding: 42px;
  border-radius: 20px;
  font-size: 3rem;
}

[popover]:popover-open {
  animation: pop-in .4s ease-out;
}

[popover]:popover-open::backdrop {
  animation: fade .4s ease-out;
  opacity: .5;
  background: #02020B;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  color: #02020B;
  background: #7FB069;
}

h1 {
  font-size: 3rem;
  margin-bottom: 100px;
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
}