html {
  height: 100vh !important;
  height: -webkit-fill-available !important;
}

body {
  min-height: 100vh !important;
  min-height: -webkit-fill-available !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  box-sizing: border-box !important;
}

.center {
  max-width: min(90vw, 400px) !important;
  max-height: min(90vh, 300px) !important;
  object-fit: contain;
  animation: blinking 1s infinite;
}

@keyframes blinking {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

@media screen and (max-width: 768px) {
  .center {
    max-width: min(80vw, 300px) !important;
    max-height: min(80vh, 200px) !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  .center {
    max-width: min(60vh, 300px) !important;
    max-height: min(80vw, 200px) !important;
  }
}