
                *, *::before, *::after { 
                    box-sizing: border-box; 
                }


                @font-face {
                    font-family: 'DSEG14Modern-Bold';
                    src: url('DSEG14Modern-Bold.woff2') format('woff2');
                }


                body {
                    height: 100%;
                    margin: 0;
                    padding: 25px 0;
                    font-family: Verdana, Tahome, Calibri, Helvetica, Georgia, sans-serif;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: royalblue;
                    color: white;
                }


                #main_DIV {
                    display: grid;
                    grid-template-rows: auto auto auto auto;
                    grid-template-columns: 30% 70%;
                    width: 85vw;
                    min-height: 1000px;
                    background-color: black;
                    color: gold;
                    padding: 0;
                    margin-bottom: 50px;
                    border-radius: none;
                    border: 3px solid gold;
                }


                /*. ADDING  menu_DIV AND IT'S CHILD UI ELEMENTS. */
                /* menu_DIV Styles */
                #menu_DIV {
                    grid-area: 1 / 1 / 2 / 3;
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    height: auto;
                    margin-top: 20px;
                    margin-bottom: none;
                    padding: 5px 25px;
                    justify-content: flex-start; /* Aligns the menu_btn to the far left */
                    align-items: center; /* Centers the content vertically within the menu_DIV */
                }

                /* Menu Button Styles */
                #menu_btn {
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    border: 0.75px solid yellow;
                    background-color: transparent;
                    padding: 5px;
                    cursor: pointer;
                    position: relative;
                }

                #menu_btn .hamburger_line {
                    display: block;
                    width: 100%;
                    height: 4px;
                    margin: 5px 0;
                    background-color: yellow;
                    transition: transform 0.3s ease, opacity 0.3s ease;
                }

                /* Hover Effect */
                #menu_btn:hover {
                    background-color: yellow;
                    color: black;
                    border-color: yellow; /* Change border color on hover */
                }

                #menu_btn:hover .hamburger_line {
                    background-color: black; /* Change lines' color on hover */
                }

                /* When the button is active (clicked or focused), you can add specific styles here if needed */
                #menu_btn:active .hamburger_line {
                    background-color: blue; /* Change line color on active state */
                }


                /*  ========================================================. */


                #header_DIV {
                    grid-area: 2 / 1 / 2 / 3;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    text-align: center;
                    width: 100%;
                    height: auto;
                    min-height: 200px;
                    background-color: black;
                    color: gold;
                    padding: 2.5%;
                    border-top-left-radius: 60px;
                    border-top-right-radius: 60px;
                }


                #header_label {
                    width: 100%;
                    flex-grow: 1;
                    font-size: 36pt;
                    font-weight: bolder;
                    font-weight: bolder;
                }
          

                #left_header_img {
                    height: 200px;
                    object-fit: cover;
                    transform: scale(1.19);
                }


                #right_header_img {
                    margin-right: 2.5%;
                    height: 200px;
                    object-fit: cover;
                    transform: scale(1.85);
                }


                #current_time_DIV {
                    display: flex;
                    flex-direction: column;
                    grid-area:  3 / 1 / 4 / 2;
                    margin: 0 25px 0px 25px;
                     padding: 10% 5% 10% 5%;
                     width:  calc(100% - 50px);
                    min-height: 200px;
                    height: auto;
                    justify-content: center;
                    align-items: center;
                    background-color: black;
                    color: gold;
                    font-size: 18pt;
                    border: 2px solid gold;
                }


                #timezone_label {
                    width: 100%;
                    font-size: 20pt;
                    color: gold;
                    text-align: center;
                }
             

                #your_actual_timezone_label {
                    width: 100%;
                    font-size: 24pt;
                    font-weight: bold;
                    color: red;
                    text-align: center;
                }


                #select_time_format_label {
                    width: 100%;
                    font-size: 20pt;
                    color: gold;
                    text-align: center;
                }


                 input[type="radio"] {
                    appearance: none; /* Remove default system appearance */
                    -webkit-appearance: none; /* Specifically for WebKit browsers */
                    background-color: white; /* Background color for the inner circle when not checked */
                    border: solid 3px blue; /* Black border to create the outer ring */
                    border-radius: 50%; /* Circular buttons */
                    width: 26px; /* Width of the button */
                    height: 26px; /* Height of the button */
                    cursor: pointer; /* Cursor to pointer to indicate it's clickable */
                    vertical-align: middle; /* Align with adjacent elements */
                    transition: background 0.3s, border-color 0.3s; /* Smooth transition for background and border */
                }


                input[type="radio"]:checked {
                    background-color: blue; /* Background color when checked */
                    border-color: white; /* Border color when checked */
                }


                #current_time_label {
                    width: 90%;
                    height: auto;
                    padding: 5% 2.5% 5% 2.5%;
                    font-family: 'DSEG14Modern-Bold', sans-serif;
                    font-size: 29pt;
                    font-weight: bold;
                    background-color: #c0c0c0;
                    color: black;
                    text-align: center;
                    border: 5px ridge gold;
                }

         
               #button_DIV {
                    display: flex;
                    flex-direction: column;  
                    grid-area:  4 / 1 / 5 / 2;
                    margin: 25px 25px -15px 25px;
                    width: calc(100% - 50px);
                    height: auto;
                    background-color: black;
                    color: gold;
                }


                .button {
                    width: 100%;
                    height: 60px;
                    margin: 0px 0px 15px 0px;
                     background: linear-gradient(gold, darkgoldenrod);
                    color: black;
                    font-size: 18pt;
                    font-weight: bold;
                    border-radius: 5px;
                    border: 2px solid transparent;
                    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
                }


                .button:hover {
                    background: linear-gradient(darkslategray, black);
                    color: gold;
                    border: 2px solid gold;
                }


                .button: active {
                    background: linear-gradient(darkgoldenrod, gold);
                }


                #text_DIV {
                    grid-area: 3 / 2 / 5 / 3;
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    margin-top: 0px;
                    padding: 2.5%;
                    justify-content: flex-start;
                    background-color: white;
                    color: black;
                }


                #bread_crumb_DIV {
                    width: 100%;
                    height: auto;
                }


                #topic_DIV {
                    margin: 25px 0 25px 0;      
                    width: 100%;
                    height: auto;
                }

                #bread_crumb_label {
                    width: 100%;
                    color: blue;
                    font-size: 18pt;
                    font-weight: bold;
                    text-align: left;
                }


                #topic_label {
                     width: 100%;
                    color: blue;
                    font-size: 24pt;
                    font-weight: bold;
                    text-align: left;
                    color: black;
                }


                #content_DIV {
                    display: flex;
                    width: 100%;
                    min-height: 600px;
                    overflow-y: auto;
                    overflow-x: hidden;
                    background-color: white;
                    color: black;
                    font-szie: 14pt;
                    text-align: left;
                }


                 #content_DIV::-webkit-scrollbar {
                        width: 10px; /* Width of the scrollbar */
                        margin-left: 25px;
                 }

                #content_DIV::-webkit-scrollbar-track {
                    background: silver; /* Optional: the track of the scrollbar */
                    border-radius: 5px;
                    margin-left: 25px;
                }

                #content_DIV::-webkit-scrollbar-thumb {
                    background-color: blue; /* Color of the scroll thumb */
                    border-radius: 5px; /* Rounded corners on the scroll thumb */
                    border: 2px solid transparent; /* Optional: borders around the scroll thumb */
                    margin-left: 25px;
                }

                #content_DIV::-webkit-scrollbar-thumb:hover {
                    background-color: red; /* Slightly darker blue on hover for better interaction */
                    margin-left: 25px;
                }


                #footer_DIV {
                    grid-area:  5 / 1 / 6 / 3;
                    display: flex;
                    flex-direction: column;
                    padding: 2.5%;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                }


                #footer_label {
                    width: 100%;
                    font-size: 12pt;
                    text-align: center;
                    background-color: black;
                    color: linear-gradient(gold, darkgoldenrod);
                }

        /*  ============================================================================================  */
        /*  @media QUERY FOR MOBILE DIVICE SCREENS OF VARIOUS 'BREAKPOINTS (SCREEN-WIDTH RANGES)
        /*  ============================================================================================  */

                /*. @media only screen and (min-width: 376px) and (max-width: 1023px)  {  */
                @media only screen and (min-width: 320px) and (max-width: 1290px) {
        
                     body {
                        padding: 0;
                        margin: 0;
                        width: 100%;
                        height: 100%; /* Using 100% to ensure it covers the full area of the device */
                        display: flex;
                        flex-direction: column;
                        align-items: stretch; /* Ensures children (main_DIV) expand to full width */
                        justify-content: flex-start; /* Aligns content to the top */
                        background-color: royalblue;
                    }

                    #main_DIV {
                        display: grid;
                        grid-template-rows: auto 1fr auto;
                        grid-template-columns: 100%;
                        width: 100%; /* Ensures it takes full width */
                        min-height: 100%; /* Ensures it takes at least full height of the body */
                        background-color: black;
                        color: gold;
                        padding: 0;
                        margin: 0;
                        border-radius: 0px;
                        border: 0.5% solid gold;
                        overflow-y: auto; /* Allows scrolling within main_DIV if content overflows */
                    }        

            }

   

