/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */






    
  body {
      /* Apply the background image */
      background-image: url(/assets/background-image-3f6f937b8d1808c3d46f787c85f122f5163655902815b25f024bfb1ed1a8357e.png);
      background-repeat: no-repeat; /* Changed from repeat to no-repeat */
      background-attachment: fixed; /* This will give a parallax-like effect */
      background-size: cover; /* Changed from cover to contain */
      background-position: center center; /* This will center the image in the page */
  }



/* Add this to your stylesheet */
#santa-instructions {
    text-align: center;
    color: #fff; /* White color for better visibility against the background */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 20px;
    border-radius: 10px;
    margin: 20px;
    max-width: 600px; /* Adjust based on your preference */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#santa-instructions h2 {
    font-size: 2em; /* Large text for the header */
    margin-bottom: 0.5em;
    font-family: 'Cursive', sans-serif; /* Adjust based on your theme */
}

#santa-instructions p {
    font-size: 1.2em;
    margin-bottom: 1em;
}

/* This will hide the mobile instruction by default and only show it on mobile devices */
#mobile-instruction {
    display: none;
}

/* Media query for desktop styles */
@media (min-width: 1024px) {
    #santa-instructions {
        text-align: left; /* Align to the left on desktop */
        position: absolute; /* Position it relative to the parent */
        top: 20px; /* Adjust based on your preference */
        left: 20px; /* Adjust based on your preference */
        width: calc(100% - 400px); /* Adjust the width as per the chat window size */
    }
}
/* Media query for mobile styles */
@media (max-width: 1023px) {
    body {
        /* Making sure the body takes at least the full height of the viewport */
        min-height: 100vh;
        /* Using flexbox to center the instructions box */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0; /* Remove padding to allow full width/height usage */
        margin: 0; /* Remove margin to allow full width/height usage */
    }
    #santa-instructions {
        /* Make sure the instructions box is not positioned statically */
        position: absolute;
        /* Full width and centered horizontally */
        left: 0;
        right: 0;
        /* Set top and bottom to 0 to stretch the box vertically */
        top: 0;
        bottom: 0;
        /* Remove the max-width and set margin to auto to center horizontally */
        max-width: none;
        margin: auto;
        /* Flexbox properties to align text in the center */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Box sizing is border-box to include padding in the height calculation */
        box-sizing: border-box;
    }
    #mobile-instruction {
        display: block; /* Show the mobile instruction */
    }
}