/* Root scales */
:root{
  --outer-pad: clamp(12px, 3vw, 48px);
  --logo-pad: clamp(16px, 3vw, 32px);
  --seal-size: clamp(60px, 7vw, 110px);
  --gap-small: clamp(8px, 1.5vh, 20px);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin: 0;
  background-color: #f4eee7;
  font-family: Arial, Helvetica, sans-serif;
}

.background{
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--outer-pad);
}

.white-container{
  position: relative;
  background-color: #fff;
  width: min(90vw, 1200px);
  min-height: calc(100dvh - (var(--outer-pad) * 2));
  display: grid;
  grid-template-rows: auto 5px 14px var(--gap-small) 1fr;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.logo-container{ padding: var(--logo-pad); }
.logo{ width: min(100%, 760px); height: auto; display:block; }

.red-line{ height:5px; background:#C32026; width:100%; }
.grey-line{ height:14px; background:#d6d6d6; width:100%; }
.white-space{ height: var(--gap-small); width:100%; }

.inner-background{
  background-image: url('assets/center.jpg');
  background-size: cover;     /* change to 'contain' if you never want cropping */
  background-position: center;
  width: 100%;
  min-height: 0;              /* prevent overflow on mobile browsers */
}

.seal{
  position: absolute; left:50%; transform: translateX(-50%);
  bottom: clamp(20px, 3vh, 48px);
  width: var(--seal-size); height: auto;
  pointer-events: none;
  opacity: .6;                /* watermark feel */
}

@media (max-width: 480px){
  .white-container{ width: 100%; }
  .logo{ width: 100%; }
}