/* Define the font face for Pricedown */
@font-face {
    font-family: 'Pricedown';
    src: url('../fonts/pricedown_bl.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  :root {
    /* Define variables for box-shadow size based on viewport width (vw) and height (vh) */
    --shadow-blur: calc(10vw + 10vh);
    --shadow-spread: calc(2vw + 2vh);
  }

  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
  }
  
  #background-image {
    background-image: url('../img/main_splash_bg.png'); /* Update with your image filename */
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0px 1px var(--shadow-blur) var(--shadow-spread) rgba(0,0,0,0.85) inset;
    -webkit-box-shadow: 0px 1px var(--shadow-blur) var(--shadow-spread) rgba(0,0,0,0.85) inset;
    -moz-box-shadow: 0px 1px var(--shadow-blur) var(--shadow-spread) rgba(0,0,0,0.85) inset;
  }

  .content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .content h1 {
    font-family: 'Pricedown', sans-serif;
    color: #ffffff;
    font-size: 10em;
    margin-top: 20px;
    text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.7); /* Black shadow for better readability */
    /* margin-bottom: auto;  Pushes the .tick to the center */
  }

  .tick-onended-message {
    position: relative;
    height: 100%;
    font-family: 'Pricedown', sans-serif;
    color: #ffffff;
    font-size: 4em;
    text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.7); /* Black shadow for better readability */
    /* margin-bottom: auto;  Pushes the .tick to the center */
  }

  .tick {
    font-size: 1.5em;
    white-space:nowrap;
    font-family: 'Pricedown', sans-serif; /* adjust as needed */
    width: 50vw; /* Set width to 50% of the viewport width */
    margin-bottom: auto; /* Center the element horizontally */
  }
  
  .tick-flip,.tick-text-inline {
    font-size:2.5em;
  }

  .tick-flip-panel {
    background-color: rgb(116, 37, 78) !important;
    color: #fcfaf9;
 }

  #text-styled {
    /* Text styling */
    box-shadow: 0 0 10px rgba(34, 133, 47, 0.5); /* White glow */
  }

  .tick-label {
    font-size: 3em;
    color: #fdfde7; /* Assuming white color for better contrast */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Black shadow for better readability */
  }
  
  .tick-char {
    width:1.5em;
  }
  
  .tick-text-inline {
    display:inline-block;
    text-align:center;
    min-width:1em;
  }
  
  .tick-text-inline+.tick-text-inline {
    margin-left:-.325em;
  }
  
  .tick-group {
    margin:0 .5em;
    text-align:center;
  }

  /* Responsive design adjustments */
  @media (max-width: 768px) {
    .content h1 {
      font-size: 7em; /* Adjusted for smaller screens */
    }
    .tick {
      width: 90%; /* Adjust countdown size on mobile */
    }
  }