$ac-dark: rgb(29, 24, 29)
$ac-light: rgb(255, 116, 227)

body
    background-color: $ac-dark
    margin: 0px

p, h1, h2, h3, h4, h5, h6, input, button, label, li
    color: white

.status
    background-color: black
    padding: 1em
    margin: 0px
    text-align: center
    box-shadow: 0px 0px 10px 0px black

    &.level-error
        color: #ff0000

    &.level-success
        color: #00ff00

section.info
    margin: 5em

section.engine-select
    margin: 10em
    ul
        list-style: none
        display: flex
        flex-direction: row
        flex-wrap: wrap
    li
        background-color: #00000040
        border-radius: 0.5em
        padding: 1em
        margin: 0.5em
        &.pinned
            width: 30%
            cursor: pointer
            transition: background-color 0.1s ease-out
            &:hover
                background-color: #00000080

section.search
    width: 100vw
    height: 50vh
    display: flex
    flex-direction: column
    place-content: center
    align-items: center

    font-size: large
    font-weight: 500

input, button
    border-radius: 0.5em
    padding: 0.5em

input
    width: 25em
    border: 0.15em solid $ac-light
    background-color: rgba(0, 0, 0, 0.3)
    outline: none
    transition: background-color 0.1s ease-out, border-color 0.1s ease-out
    &:focus
        background-color: rgba(0, 0, 0, 0.5)
        border-color: lightgray !important

button
    margin-left: 1em
    background-color: $ac-light
    backdrop-filter: blur(5px)
    border: 0
    cursor: pointer



label
    margin-right: 1em