@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Poppins:wght@300;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 20px;
background: #0a0f16; /* Lighter dark blue-gray instead of pure black */
text-align: center;
color: #c5d2e0; /* Lighter and brighter soft gray */
}
h1, h2 {
font-family: 'Press Start 2P', cursive;
color: #6bb6ff; /* Brighter, more vibrant blue */
text-shadow: 2px 2px 5px rgba(107, 182, 255, 0.4);
}
p {
font-size: 1rem;
color: #b4c5d4; /* Lighter cool gray */
font-weight: 500;
}
/* Buttons */
button {
font-family: 'Press Start 2P', cursive;
font-size: 0.8em;
padding: 12px 18px;
margin: 10px;
border: none;
border-radius: 8px;
background: #6bb6ff; /* Brighter blue */
color: #0a0f16; /* Dark background color for contrast */
cursor: pointer;
box-shadow: 3px 3px 8px rgba(107, 182, 255, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
display: block;
width: fit-content;
margin: 15px auto;
}
button:hover {
transform: scale(1.05);
box-shadow: 4px 4px 12px rgba(107, 182, 255, 0.5);
}
/* Results Box */
#result {
margin-top: 20px;
font-size: 1.2em;
color: #6bb6ff; /* Brighter blue */
font-weight: bold;
background: rgba(255, 255, 255, 0.12); /* Slightly more visible background */
padding: 12px 18px;
border-radius: 10px;
display: inline-block;
}
/* Hour Buttons */
.hour-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.hour-btn.selected {
background: #6bb6ff; /* Brighter blue */
color: #0a0f16; /* Dark text for contrast */
}
/* Styling the Buttons */
.hour-btn {
background: #1a2332; /* Lighter dark button background */
color: #e6edf5; /* Much lighter text */
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.8em;
font-weight: bold;
border: 2px solid #6bb6ff; /* Brighter blue border */
transition: background 0.3s, box-shadow 0.3s;
width: 45%;
white-space: nowrap;
text-align: center;
overflow: hidden;
}
.hour-btn:hover {
background: #243142; /* Slightly lighter on hover */
box-shadow: 0 0 8px rgba(107, 182, 255, 0.3);
}
/* Responsive Design for Larger Screens */
@media (min-width: 768px) {
.hour-btn {
width: 40%;
font-size: 0.75em;
 }
}
/* Mobile Layout - Full Width */
@media (max-width: 767px) {
.hour-btn {
width: 100%;
 }
}
/* Day Select Dropdown */
#daySelect {
background-color: #1a2332; /* Lighter dropdown background */
text-align: center;
font-family: 'Press Start 2P', cursive;
font-size: 1em;
color: #e6edf5; /* Much lighter text */
padding: 8px 12px;
font-size: 1em;
font-weight: bold;
border-radius: 8px;
border: 2px solid #6bb6ff; /* Brighter blue border */
margin: 15px auto;
width: 70%;
transition: 0.3s;
display: block;
}
/* Day Select - Focused State */
#daySelect:focus {
border-color: #6bb6ff;
box-shadow: 0 0 10px rgba(107, 182, 255, 0.6);
outline: none;
}