/**
 * WHAT IS THIS FILE?
 *
 * Globally applied styles. No matter which components are in the page or matching route,
 * the styles in here will be applied to the Document, without any sort of CSS scoping.
 *
 */

:root {
    --qwik-dark-blue: #1a1a1a;
    --qwik-light-blue: #349713;
    --qwik-light-purple: #73da51;
    --qwik-dark-purple: #3f9622;
}

body {
    background-color: #fafafa;
    font-family: 'Inter', sans-serif, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, sans-serif;
    padding: 20px 20px 40px 20px;
}

main {
    max-width: 760px;
    margin: 0 auto;
    background-color: white;
    border-radius: 5px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    overflow: hidden;
}

h1,
h2 {
    margin: 0 0 5px 0;
}

.lightning {
    filter: hue-rotate(180deg);
}

section {
    padding: 20px;
}

ul {
    list-style-type: square;
    margin: 5px 0 30px 0;
    padding-left: 25px;
}

li {
    padding: 8px 0;
}

li::marker {
    color: var(--qwik-light-blue);
}

a,
a:visited {
    color: var(--qwik-dark-blue);
}

a:hover {
    text-decoration: none;
}

table.commands {
    margin: 0 0 30px 0;
}

.commands td {
    padding: 5px;
}

.commands td:first-child {
    white-space: nowrap;
    padding-right: 20px;
}

code {
    font-family: Menlo, Monaco, Courier New, monospace;
    font-size: 0.9em;
    background-color: rgb(224, 224, 224);
    padding: 2px 4px;
    border-radius: 3px;
    border-bottom: 2px solid #bfbfbf;
}

footer {
    padding: 15px;
    text-align: center;
    font-size: 0.8em;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

a.mindblow {
    margin: 0 auto;
    display: block;
    background: var(--qwik-dark-purple);
    padding: 10px 20px;
    border-radius: 10px;
    border: 0;
    color: white;
    text-decoration: none;
    font-size: 20px;
    width: fit-content;
    border-bottom: 4px solid black;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
            16 0,
        auto; /*!emojicursor.app*/
}

a.mindblow:hover {
    border-bottom-width: 0px;
    margin-bottom: 4px;
    transform: translateY(4px);
}
