/* Padding container adds breathing room on sides */
.page-padding {
  padding-left: 32px;
  padding-right: 32px;
}

/* Smaller side padding on mobile */
@media (max-width: 600px) {
  .page-padding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Body centers everything vertically and horizontally */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("bgs.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  background-color: #f8f4e8;
}

/* Fixed top-left logo with drop shadow */
.corner-logo {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 72px;
  height: auto;
  z-index: 1000;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
}

@media (max-width: 600px) {
  .corner-logo {
    top: 16px;
    left: 16px;
    width: 58px;
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.8));
  }
}

.name-wrapper {
  width: 300px;         /* fixed size, matching your image */
  height: 300px;
  margin: 0 auto;
  position: relative;
  /* Optional: add a background or border for debug */
}

.name-logo {
  width: 100%;    /* fill the container width */
  height: auto;   /* maintain aspect ratio */
  display: block; /* remove inline behavior */
  object-fit: contain; /* or 'cover' if you want fill without distortion, cropping if necessary */
}

@media (max-width: 600px) {
  .name-logo {
    max-width: 200px;
  }
}

/* Main content centers and shrinks to fit */
.main-content {
  max-width: 400px;
  width: 100%;
}