h1{
    border: solid 0px gray;
    border-radius: 10px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 500%;
    background-color:beige;
    margin: 2% 1% 0 1%;
    padding: 100px;
}
._input{
    margin: 50px 50px 50px 50px;
    font-size: 50px;
}
._console{
    margin: 2% 1% 0 1%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 110%;
    background-color: black;
    border-radius: 10px;
    color: whitesmoke;
    padding: 30px;
    height: 300px;
    overflow: scroll;
}

._color_picker{
    width: 210px;
    border: solid 4px black;
    display: flex;
    background-color: white;
    border-radius: 5px;
}

    #_color_text{
        /*border: solid 4px white; */
        padding: 2px;
        background: white;
        border: none;
        color: black;
        height: 20px;
        font-size: 15px;
    }
    #_color_text:active{
        /*border: solid 2px #000 !important;*/
        border: none;
    }
    #_color_input{
        border: none;
        padding: 0;
        height: 24px;
    }


/* Styles specific to the home.html page */

.container {
    text-align: center; /* Center the overall content */
}

.container h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

/* Service List Styles */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;        /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    gap: 20px;          /* Space between items */
}
.service-item{
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Subtle shadow */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden;    /* Clip content that overflows (for the hover effect) */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.service-item:hover {
    transform: translateY(-5px); /* Slight upward movement on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.service-link {
    display: block; /* Make the entire area clickable */
    padding: 15px 20px; /* Comfortable padding */
    background-color: #007bff;
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-bottom: 3px solid #0056b3; /* Darker border for depth */
}

.service-item p {
    padding: 15px 20px;
    margin: 0;          /* Remove default paragraph margin */
    text-align: left;
    color: #555;       /* Slightly muted text color */
}

/* Dark Mode */
body.dark-mode .service-link {
    background-color: #42a5f5;
    color: #222;
    border-bottom-color: #007bff;
}
body.dark-mode .service-item{
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3);
}

body.dark-mode .service-item p{
    color: #eee;
}
body.dark-mode .service-item:hover{
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.4);
}
/* Mobile Styles */
@media (max-width: 768px) {
    .container h1 {
        font-size: 2.5em;
    }
    .service-link {
        padding: 12px 16px; /* Slightly smaller padding on mobile */
    }
    .service-item p {
        padding: 12px 16px;
    }
}

/* In static/base.css */

nav ul {
    list-style: none;  /* Remove bullet points */
    padding: 0;
    margin: 0;
    background-color: #333; /* Dark background */
    overflow: hidden;  /* Clear floats */
}

nav li {
    float: left;  /* Float list items left to make them horizontal */
}

nav li a {
    display: block;  /* Make the links block-level so they're clickable across the whole area */
    color: white;  /* White text */
    text-align: center; /* Center the text */
    padding: 14px 16px; /* Add padding around the text */
    text-decoration: none; /* Remove underlines */
}

nav li a:hover {
    background-color: #111; /* Darker background on hover */
}

/* Dark Mode Support */
body.dark-mode nav ul {
    background-color: #111; /* Darker background in dark mode */
}

body.dark-mode nav li a:hover {
    background-color: #000; /* Even darker on hover in dark mode */
}