/* Reset styles for input and label elements */
input, label {
    all: unset; /* Reset all default styles */
    display: inline; /* Display as inline elements */
}

/* Styling for input elements */
input {
    caret-color: cyan; /* Change caret (text insertion cursor) color to cyan */
}

/* Styling for label elements */
label {
    text-align: right; /* Align text to the right */
    white-space: normal; /* Handle white space normally */
}

/* Global styles for all elements */
* {
    font-family: 'Fira Code', monospace; /* Set font family to 'Fira Code' or monospace */
    color-scheme: dark; /* Set color scheme to dark */
    cursor: text; /* Set cursor to text cursor */
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Styling for the body element */
body {
    background-color: #000000; /* Set background color to black */
    overflow-x: hidden; /* Hide horizontal overflow (prevent horizontal scroll bars) */
}

/* Styling for selected text */
*::selection {
    background-color: #6e00fd; /* Set selection background color to purple */
    text-shadow: .1em .1em .5em #000; /* Apply text shadow to selected text */
}

/* Styling for elements within <pre> tags and <pre> tags themselves */
pre *, pre {
    text-shadow: .1em .1em .5em #000000; /* Apply text shadow to elements within <pre> tags */
}

/* Styling for <pre> elements that do not have the class 'prompt' */
pre:not(.prompt) {
    overflow-wrap: break-word; /* Wrap long text onto the next line */
    white-space: pre-wrap; /* Preserve white space as it is in the HTML */
}

/* Styling for anchor (link) elements */
a {
    color: inherit !important; /* Inherit color from parent element */
}

/* Hover styling for anchor (link) elements */
a:hover {
    background-color: white; /* Set background color to white */
    color: black !important; /* Set text color to black, taking precedence over other styles */
}

/* Styling for paragraph elements */
p {
    margin: 0; /* Remove default margin */
    text-align: right; /* Align text to the right */
}

/* Styling for elements with class 'prompt' */
.prompt {
    padding: 0;
    width: 100%;
    display: grid;
    gap: .5em;
    grid-template-columns: 11.7em 1fr;
    color: cyan;
}

.mobile {
    display: none;
}

@media (max-width: 600px) {
    .prompt {
        grid-template-columns: 12em 1fr;
    }
    .mobile {
        display: block;
    }
    .nomobile {
        display: none;
    }
}