﻿/* Add custom styles here */
#scrollingDiv {
    border: 1px solid rgba(0, 0, 0, 0.7); /* Set border style */
    height: auto; /* Set height to auto for dynamic content */
    white-space: nowrap; /* Prevent text wrapping on larger screens */
    position: absolute; /* Fixed position to stay off the left of the screen */
    left: -200%; /* Start off the left of the screen */
    top: 60px; /* Align to 1/4 from the top vertically */
    transform: translate(-50%, 0); /* Center the div horizontally */
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: auto; /* Enable vertical scrolling */
    z-index: 1; /* Ensure the div is on top */
    transition: left 3s ease; /* Slow transition for left property */
    padding: 15px; /* Add padding to the text inside the div */
    background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 576px) {
    /* Extra styling for xs screens */
    #scrollingDiv {
        white-space: normal; /* Allow text wrapping on xs screens */
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    /* Extra styling for sm screens */
    #scrollingDiv {
        white-space: normal; /* Allow text wrapping on sm screens */
    }
}