/* Device Mockup */

.device-wrapper {
  max-width: 300px;
  width: 100%;
}

.device {
  position: relative;
  background-size: cover;
}

.device::after {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.device .screen {
  position: absolute;
  background-size: cover;
  pointer-events: auto;
}

.device .button {
  position: absolute;
  cursor: pointer;
}

.device[data-device=iPhone16Pro][data-orientation=portrait][data-color=black] {
  padding-bottom: 198.898071625%;
}

.device[data-device=iPhone16Pro][data-orientation=portrait][data-color=black] .screen {
  top: 3.1855955679%;
  left: 6.8870523416%;
  width: 86.2258953168%;
  height: 93.6288088643%;
}

.device[data-device=iPhone16Pro][data-orientation=portrait][data-color=black]::after {
  content: "";
  background-image: url("../assets/img/TheArtOfFaunaGame/device-frame/portrait_black.png");
}

.device[data-device=iPhone16Pro][data-orientation=portrait][data-color=black] .button {
  display: none;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  background-color: #000 !important;
  -webkit-mask-image:url("../assets/img/TheArtOfFaunaGame/device-frame/portrait-screen-mask.png");
  -webkit-mask-position:center center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:cover;

  mask-image:url("../assets/img/TheArtOfFaunaGame/device-frame/portrait-screen-mask.png");
  mask-position:center center;
  mask-repeat:no-repeat;
  mask-size:cover;
}