/* Basic Body Styling & Font */
body {
    font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4; /* Light background for the page */
    color: #333;
}

h1, h2, h3 {
    color: #3D3D3D; /* Dark grey for headings */
}

hr {
    border: 0;
    height: 1px;
    background-color: #dd4814; /* Ubuntu Orange */
    margin: 20px 0;
}

a {
    color: #77216F; /* Ubuntu Purple */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Neofetch Container Styling */
.neofetch-container {
    background-color: #300A24; /* Dark Ubuntu background */
    color: #EFEFEF;           /* Light text */
    font-family: 'Ubuntu Mono', monospace; /* Monospace font is crucial! */
    padding: 15px;
    border-radius: 8px;
    display: flex;            /* Enable flexbox for layout */
    flex-wrap: wrap;          /* Allow items to wrap on smaller screens */
    max-width: 750px;         /* Max width to keep it contained */
    margin: 20px auto;        /* Center the container (optional) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow-x: auto; /* Add scroll if content overflows horizontally */
}

/* Neofetch Logo Area */
.neofetch-logo {
    flex-shrink: 0;           /* Prevent logo from shrinking too much */
    padding-right: 20px;      /* Space between logo and info */
    /* Ensure pre tag respects container colors and font */
    color: inherit;
    font: inherit;
    margin: 0; /* Reset margin for pre */
}

/* Specific color for the ASCII art */
.neofetch-logo .nf-logo-color {
    color: #E95420; /* Ubuntu Orange */
}

/* Neofetch Info Area */
.neofetch-info {
    flex-grow: 1;             /* Allow info section to take remaining space */
    min-width: 250px;         /* Minimum width before wrapping */
}

.neofetch-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.neofetch-info li {
    margin-bottom: 2px; /* Small space between lines */
    white-space: nowrap; /* Prevent info lines from wrapping */
}

/* Styling for Key/Label part */
.neofetch-info .nf-key {
    color: #CF6139; /* Lighter orange/brown for keys */
    font-weight: bold;
    display: inline-block;
    min-width: 90px; /* Adjust as needed for alignment */
}

/* Styling for the user@host title line */
.neofetch-info .nf-title {
    font-weight: bold;
}
.neofetch-info .nf-user {
    color: #77216F; /* Ubuntu Purple */
}
.neofetch-info .nf-host {
    color: #E95420; /* Ubuntu Orange */
}


/* Color Blocks */
.neofetch-colors span {
    display: inline-block;
    width: 1.5em; /* Size of the color block */
    height: 1em;
    margin-right: 4px;
    vertical-align: middle;
    border: 1px solid #444; /* Slight border */
}

/* Responsive Adjustments (Optional Example) */
@media (max-width: 600px) {
    .neofetch-container {
        flex-direction: column; /* Stack logo and info vertically */
    }
    .neofetch-logo {
        padding-right: 0;
        padding-bottom: 15px; /* Add space below logo when stacked */
        text-align: center;  /* Center logo text */
        margin: 0 auto;      /* Center the pre block */
    }
    .neofetch-info li {
        white-space: normal; /* Allow info lines to wrap on small screens */
    }
    .neofetch-info .nf-key {
       min-width: 70px; /* Adjust key width if needed */
    }
}