/* Custom CSS */
body {
    /* Linear gradient background */
    background: linear-gradient(to right, #ece9e6, #ffffff);
    font-family: 'Arial', sans-serif; /* Web-safe font */
}

.container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a soft shadow */
    padding: 20px;
}

.logo-container {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #2E4162, #3A547A);  /* Lightened gradient */
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 30px;  /* Spacing between the logo and the form */
}

.icon {
    font-size: 32px;
    color: #ffffff;  /* White color to contrast the background */
    margin-right: 15px;  /* Space between the icon and text */
}

.logo-text {
    font-family: 'Orbitron', sans-serif; /* Using the Orbitron font, which gives a techy feel. Make sure to import this font from Google Fonts or similar. */
    font-size: 24px;
    color: #AED6F1; /* Light blue to contrast with the dark background */
    letter-spacing: 1px; /* A little spacing between letters for a clean look */
}

/* Optional: Add some hover effects */
.logo-container:hover {
    background: linear-gradient(90deg, #3A547A, #2E4162);
}

.logo-container:hover .logo-text {
    color: #85C1E9; /* A slightly different shade of blue for the hover state */
}


a {
    text-decoration: none; /* This will remove the underline */
    color: inherit; /* This will ensure the text color doesn't change */
}

a:hover, a:focus {
    text-decoration: none; /* This will ensure no underline even on hover or focus */
}



/* Headings */
h2 {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

h3, h4, h5 {
    font-weight: 600;
    color: #555;
    margin-bottom: 15px;
}

/* Content Styling */
p, ul {
    line-height: 1.5;
    color: #666;
}

a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ul {
    padding-left: 20px;
}

ul li {
    margin-bottom: 10px;
}

/* Form */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 5px #007BFF;
    border-color: #007BFF;
}

.btn-primary {
    background-color: #007BFF;
    border-color: #007BFF;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

#results {
    margin-bottom: 50px; /* Adjust the value as needed */
    max-width: 95%;
}

.custom-container {
    margin-top: 3rem; /* Adjust as necessary */
}

.form-control {
    width: 100%;  /* ensures the input takes the full width of its container */
    box-sizing: border-box;

}

textarea {
    resize: none;
}

#results-image {
    max-width: 90%;
    width: auto;
    height: auto;
}

.intro-text {
    font-size: 18px;
    font-weight: 500; /* Semi-bold */
    color: #333; /* Dark gray */
    margin-bottom: 25px; /* Some space before the next element */
    text-align: center; /* Centered text */
    padding: 0 15px; /* Some horizontal padding for better spacing on small screens */
}

#cursor {
    display: inline-block;
    background-color: #000;
    width: 0.5em;
    height: 1em;
    margin-left: 2px;
    animation: blink 0.5s infinite;
}

@keyframes blink {
    50% {
        background-color: transparent;
    }
}

#toggleForm {
    background-color: #333;
    color: #fff;
    padding: 12px 26px; /* increased padding for a larger button */
    font-size: 16px; /* bigger font size for clearer text */
    border: 2px solid #555; /* optional: gives the button a more defined look */
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5px; /* optional: rounds the edges a bit */
}

#toggleForm:hover {
    background-color: #555;
    border-color: #777; /* optional: change border color on hover */
}


#toggleForm:focus, #toggleForm:active {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    outline: none;
    background-color: #222;  /* Slightly darker color for active state */
}

.btn-icon {
    background: none;
    border: none;
    color: #333;  /* or whatever color you prefer */
    cursor: pointer;
    transition: color 0.3s;
}

.btn-icon:hover {
    color: #555;
}

.btn-icon:focus {
    outline: none;
}


/* Responsive design for mobile screens */
@media (max-width: 767px) { /* This targets screens with a width of 767px and below */
    .logo-container {
        padding: 5px 10px; /* Adjusted padding for mobile */
    }

    .icon {
        margin-right: 0; /* Remove the right margin since it's no longer needed */
        margin-bottom: 10px; /* Add some space below the icon */
    }

    .logo-text {
        text-align: center; /* Center the text */
    }

    .custom-container {
        max-width: 95%; /* or whatever width you prefer */
        margin-left: auto;
        margin-right: auto;
    }

    #results-image {
        max-width: 50%; /* Set the maximum width to 50% */
        display: block; /* Makes sure it's treated as a block */
        margin: 0 auto 15px auto; /* Centers the image and adds some space below */
    }
    #toggleForm {
        padding: 8px 18px;  /* smaller padding for mobile screens */
        font-size: 12px;  /* smaller font size for mobile */
    }

}