/*  CSS Variables */

    :root {
      --main-bg: #EAE0C6;     /* background color */
      --main-color: #954D4E;  /* text & logo color */
      --border-radius: 12px;
      --container-margin: 10%;
      --logo-size: clamp(120px, 20vw, 300px); /* responsive */
      --footer-height: 60px;
      --anim-scale: 1.1;
      --anim-speed: 4s;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: var(--main-bg);
      color: var(--main-color);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Main container */
    .container {
      flex: 1;
      margin-left: var(--container-margin);
      margin-right: var(--container-margin);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    /* Logo with zoom animation */
    .logo {
      width: var(--logo-size);
      height: auto;
      animation: zoomInOut var(--anim-speed) infinite ease-in-out;
    }

    @keyframes zoomInOut {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(var(--anim-scale)); }
    }

    /* Footer */
    footer {
      height: var(--footer-height);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: var(--container-margin);
      margin-right: var(--container-margin);
    
      font-size: 0.9rem;
    }

    /* Responsive text */
    h1 {
      margin-top: 20px;
      font-size: clamp(1.5rem, 5vw, 5rem);
    }