:host {

  display: none;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(87, 81, 78, 0.7);
  z-index: 2;
  overflow: auto;

  --black: #000;
  --dark: #2D2D2C;
  --white: #fff;
  --light: #CAC3BD;
  --brown: #57514E;
  --green: #233D1A;
}

:host(.open) {

  display: flex;
	animation: popup_in 0.5s ease 0s 1 forwards;
}

.wrapper {

  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {

  opacity: 0;
  position: relative;
  max-height: 100%;
  transform-origin: top center;
}

.content {

  background: var(--light);
  padding: 4rem 2rem;
}

:host(.open) .inner {

  animation: popup_inner_in 0.5s ease 0s 1 forwards;
}

button.close {

  -webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
	appearance: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-family: merriweather, "azo-sans-web", -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-caps: var(--dark);
	outline: none;
	background: transparent;
	border: none;
	cursor: pointer;
  margin: 0;
  color: var(--dark);
}

@media screen and (pointer: fine) {

  button.close:hover {

    opacity: 0.5;
  }
}

@keyframes popup_in {

  from {

    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popup_inner_in {

  from {

    opacity: 0;
    transform: translateY(-20%);
  }

  to {

    opacity: 1;
    transform: translateY(0);
  }
}