* {
    color: unset;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
    background-color: unset;
    border: none;
    padding: 0;
}

body {
    margin: 0;
    font-family: 'Avenir';
}

h1, h2, h3, h4 {
    font-weight: normal;
}

button {
    font-family: 'Avenir';
}

#mainWrapper {
    margin: 15px auto;
    max-width: calc(100% - 60px);

    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 1rem;

}

#mainWrapper main {
    grid-column: span 2;
}

#mainWrapper main.small {
    grid-column: span 1;
}

.searchResults {
    ul {
        height: 300px;
        overflow: scroll;
        padding-left: 0;
        display: flex;
        flex-direction: column;

        li {
            list-style: none;
            border-top: 1px solid #ddd;
            padding: 8px 4px;

            .layout {
                display: grid;
                grid-template-columns: 1fr;
                gap: 5px;
                strong {
                    font-size: 14px;
                }
                h3 {
                    margin: 0;
                    font-size: 18px;
                }
                span {
                    font-size: 14px;
                }
            }
        }
    }
}

.bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    
    div {
        padding: 2px 5px;
        border: 1px solid #eee;
        background-color: #fff;
        border-radius: 5px;
        font-size: 14px;
    }
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.split.half {
    grid-template-columns: 1fr 1fr;
}

button.default {
    appearance: none;
    background-color: transparent;
    margin: 0;

    cursor: pointer;
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}