@import url('./main-layout.css');
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/nembo_ya_uhamiaji.png'); /* Path to your image */
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    font-size: clamp(var(--lumo-font-size-xs),var(--lumo-font-size-s),var(--lumo-font-size-m));
    opacity: 0.15;  /* Adjust transparency for subtle effect */
    filter: blur(10px);  /* Blurs the background for a soft shadow effect */

    z-index: -1; /* Keeps it behind all content */
}

.responsive-btn {
    width: 40%; /* Base font size using viewport width */
}

.responsive-width {
    max-width: 480px; /* Base font size using viewport width */
}

/* For smaller screens, use a fixed size */
@media (max-width: 768px) {
    .responsive-width {
        max-width: 300px; /* Base font size using viewport width */
    }
}

/* For very small screens (mobile), reduce further */
@media (max-width: 480px) {
    .responsive-width {
        max-width: 300px; /* Base font size using viewport width */
    }
}

html {
      font-size: clamp(var(--lumo-font-size-xs),var(--lumo-font-size-s),var(--lumo-font-size-m));
    }

body {
      font-size: clamp(var(--lumo-font-size-xs),var(--lumo-font-size-s),var(--lumo-font-size-m));
      }

#app-logo {
    height: 56px;
    width: auto;
}

/* Medium screens */
@media (max-width: 800px) {
    #app-logo {
        height: 48px;
    }
}

/* Small screens (phones) */
@media (max-width: 500px) {
    #app-logo {
        height: 36px;
    }
}


vaadin-form-layout {
  max-width: 992px;
  padding: var(--lumo-space-m);
  --vaadin-form-layout-column-spacing: 1em;
  --vaadin-form-item-row-spacing: 1em;
}


/* For smaller screens, use a fixed size */
@media (max-width: 768px) {
    vaadin-form-layout {
      max-width: 75%;
    }
}

/* For very small screens (mobile), reduce further */
@media (max-width: 480px) {
    vaadin-form-layout {
          max-width: 100%;
    }
}

vaadin-button {
  --lumo-button-size: clamp(var(--lumo-size-xs),var(--lumo-size-s),var(--lumo-size-m)); /* Controls height */
  font-size: clamp(var(--lumo-font-size-xs),var(--lumo-font-size-s),var(--lumo-font-size-m));
  padding: 0 1.5em;          /* Controls horizontal size */
}



/* Base style: Small screens (default) */

.responsive-box {
  max-width: 100%;
  margin: 0 auto;
}

/* Large screens (min-width: 992px) */
@media (min-width: 992px) {
  .responsive-box {
    max-width: 75%;
    margin: 0 auto;
  }
}

vaadin-side-nav-item {
   line-height: var(--lumo-line-height-m);
   margin-bottom: var(--lumo-space-m);
   margin-top: var(--lumo-space-m);
}

/* Base style for small screens (default) */
.responsive-dialog {
  width: 100%;
}

/* Medium screens (≥768px) */
@media (min-width: 768px) {
  .responsive-dialog {
    width: 75%;
  }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
  .responsive-dialog {
    width: 50%;
  }
}