/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/* Body Style with Background Image */
/*body {*/
  /*   by default字體選可換 */
/*    font-family: 'Arial', sans-serif;   */
/*    background-image: url('https://images.unsplash.com/photo-1490814525860-594e82bfd34a?q=80&w=2521&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); */
    
    
    /* Replace with your image URL: https://images.unsplash.com/photo-1457364887197-9150188c107b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D*/
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed during scrolling */
/*    color: #333;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 50px; */
/*    border:solid red;*/
/*}*/

/* body::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
    background-color: rgba(0, 0, 0, 0.4); /* Black overlay with 50% opacity */
/*  height:120%;*/
    z-index: -1; /* Place it behind the content */
/*    padding:2rem;*/

/*}*/
 
body {
    font-family: 'Arial', sans-serif;
    background-image: url('https://images.unsplash.com/photo-1457364887197-9150188c107b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed during scrolling */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:  0 200px; 
    position: relative; /* Ensure content is positioned relative for the ::before pseudo-element */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Black overlay with 40% opacity */
    z-index: -1; /* Place it behind the content */
 
}


, #status, select, #tillWhatTime, canvas {
    position: relative; /* Keep these elements above the overlay */
    z-index: 1;
}

/* Header */

h{  
/*   調整整字體大小 */
  font-size: 4em; 
    margin-bottom: 20px;
    color: #ffffff; /* White text to stand out against the background */}

h1 {
    /*   調整整字體大小 */
  font-size: 1.2em;
    margin-bottom: 20px;
    color: #ffffff; /* White text to stand out against the background */
}

.sub-header{
    text-align: left;
/*   調整整字體大小 */
    font-size: 2.5em;
    color: #ffffff;
    margin: 0;
}

p{
  display: inline-block;
  margin-right: 10px; /* Optional: space between the paragraphs */
  color: #ffffff;
    margin: 0;
}

/* Status Message */
#status {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Dialog Box */
dialog#loading {
    border: none;
    padding: 20px;
    background-color: rgba(52, 152, 219, 0.8); /* Semi-transparent background */
    color: white;
    border-radius: 10px;
    font-size: 1.5em;
    text-align: center;
}

/* Select Menu */
select {
    padding: 10px;
    font-size: 1em;
    border: 2px 
      #3498db;
    border-radius: 5px;
    margin: 10px 0;
    background-color: white;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease;
}

select:hover,
select:focus {
    border-color: #2980b9;
}

/* Till What Time Text */
#tillWhatTime {
    font-size: 1.2em;
    color: #ffffff;
}




/* Canvas Clock */
canvas {
    margin-top: 20px;
    border: 5px solid #3498db;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Additional Styling for Select Box Text */
body select {
    width: 60%;
    max-width: 300px;
    text-align: center;
}