html, body
{
  /* @apply w-full h-full;
    min-height: calc(100vh);
    min-width: calc(100vw); */
  overflow-x: hidden;
}

body
{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  /* Full Page Sticky Footer */
  overscroll-behavior: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

header
{
}

nav
{
  width: 100%;
}

main
{
  width: 100%;
}

@media (min-width: 640px)
{
  main
{
    max-width: 640px;
  }
}

@media (min-width: 768px)
{
  main
{
    max-width: 768px;
  }
}

@media (min-width: 1024px)
{
  main
{
    max-width: 1024px;
  }
}

@media (min-width: 1280px)
{
  main
{
    max-width: 1280px;
  }
}

@media (min-width: 1536px)
{
  main
{
    max-width: 1536px;
  }
}

main
{
  margin-left: auto;
  margin-right: auto;
  /* @apply container flex flex-col gap-3 mx-auto max-w-4xl mt-16; */
}

footer
{
  margin-top: auto;
  /* Full Page Sticky Footer */
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

footer:is(.dark *)
{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

footer .outerwrap
{
  /* max-w-2xl lg:max-w-7xl mx-auto self-center items-center px-4 md:px-8  */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu
{
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menu > :not([hidden]) ~ :not([hidden])
{
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.menu
{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px)
{
  .menu > :not([hidden]) ~ :not([hidden])
{
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

@media (min-width: 1024px)
{
  .menu
{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

footer .menu
{
  align-items: center;
  justify-content: center;
  align-self: center;
}

.header-hero
{
  padding-bottom: 3rem;
}

.hero-section
{
  position: relative;
  width: 100vw;
  --tw-bg-opacity: 1;
  background-color: rgb(255 213 48 / var(--tw-bg-opacity));
}

.video-background
{
  position: relative;
  height: 200px;
  max-width: 100%;
  overflow: hidden;
  padding: 0px;
}

@media (min-width: 768px)
{
  .video-background
{
    height: 300px;
  }
}

@media (min-width: 1024px)
{
  .video-background
{
    height: 500px;
  }
}

.video-background .content
{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 30;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  align-content: space-between;
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.video-background .screen
{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  opacity: 0.5;
}

.video-background .videoContainer
{
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* 16:9 */
  padding-top: 25px;
  padding-bottom: 56.25%;
}

.video-background .videoContainer iframe
{
  position: absolute;
  min-width: 120% !important;
  min-height: 120% !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-background .placeholderImage
{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  height: 100%;
  min-height: 100%;
  width: auto;
  min-width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-origin: content-box;
}

.video-background, .video-background .videoContainer iframe
{
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

a
{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
}

a:is(.dark *)
{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

a:hover
{
  --tw-text-opacity: 1;
  color: rgb(255 213 48 / var(--tw-text-opacity));
}

h1,h2,h3
{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

p
{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}