:root {
  --h5v-navbar-height: 48px;
  /** set this to none if you don't want a close button */
  --h5v-header-ad-close-button: block;
  --h5v-header-ad-bg: #fff;
  /** depending on your ad layout this may range from 50px to 250px */
  --h5v-header-ad-height: 100px;
  --h5v-header-ad-border: 1px solid rgb(243, 244, 246);
  --h5v-header-ad-shadow: 0 0 #0000, 0 0 #0000,
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/** change the mobile/desktop breakpoint according to your style */
@media (max-height: 767px) {
  main {
    /** this reserves enough "space" for the sticky ad.
     *
     * The padding represents the whitespace where the sticky ad floats on top. 
     * It's caluclated based on the height of the navbar, the maximum height of the ad and some extra
     * padding (30px in this case)
     */
    padding-top: calc(var(--h5v-navbar-height) + var(--h5v-header-ad-height) + 30px);
  }
}

/** styles the container for the actual ad. You may name this CSS class as you wish */
.h5v-header-ad {
  /** background is required for sticky ads */
  background-color: var(--h5v-header-ad-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--h5v-header-ad-height);
  width: 100%;
}

@media (max-width: 767px) {

  .h5v-header-ad {
    /** you may change the style according to your needs */
    border-bottom: var(--h5v-header-ad-border);
    box-shadow: var(--h5v-header-ad-shadow);

    /** all properties below are for the sticky behaviour */
    position: fixed;
    top: var(--h5v-navbar-height);
    transition: transform 800ms ease, top 300ms ease;
    transform: translateY(0);
    z-index: 10;
  }

  /** if this classname doesn't fit your css rules, you can propose a separate name, which
   * must be configured in your ad tag.
   */
  .h5v-header-ad--fadeOut {
    /** this is the hiding animiation */
    transform: translateY(calc(-1 * (var(--h5v-navbar-height) + var(--h5v-header-ad-height) + 50px)));
  }

  /**
    * this class is added to the ad container when the navbar is hidden.
    * It's required to prevent the ad from overlapping the content.
    */
  .h5v-header-ad--navbarHidden {
    top: 0;
  }

  /** this an example on how the close button may look like.
   * if you don't want a close button, this is optional.
   */
  .h5v-header-ad--button {
    background-color: var(--h5v-header-ad-bg);
    bottom: -25px;
    border-bottom: var(--h5v-header-ad-border);
    border-right: var(--h5v-header-ad-border);
    border-width: inherit;
    box-shadow: var(--h5v-header-ad-shadow);
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 0.875rem;
    display: var(--h5v-header-ad-close-button);
    position: fixed;
    left: 0;
    padding: 0.125rem 1rem;
  }
}

/** on desktop the ad is not sticky and placed in the regular layout flow */
@media (min-width: 768px) {
  .h5v-header-ad {
    min-height: 250px;
    padding-top: var(--h5v-navbar-height);
  }

  .h5v-header-ad--button {
    display: none;
  }
}

/** website styling  */

#h5v_header {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

header {
  align-items: center;
  background-color: rgb(96, 165, 250);
  height: var(--h5v-navbar-height);
  width: 100%;
  display: flex;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}