popup.css

body {
    width: 350px;
    height: 100px;

    display: flex;
    min-height: 100vh;
    flex-direction: column;

    /* font-family: 'Lato', sans-serif; */
    font-weight: 400;

    overflow-y: scroll;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

header {
    /* font-family: 'Lato'; */
    font-weight: 300;
    background-color:#f9f9f9;
    border-bottom: 2px solid #dadada;
    box-shadow: 0px 0px 4px rgb(49, 32, 12);
}

header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

main {
    margin-top: 95px;
    margin-bottom: 4px;
    min-height: 40vh;
    flex: 1 0 auto;
}

header #logo {
    margin-left: 16px;
    position: absolute;
    margin-top: 8px;
    width: 48px;
}

header #title {
    text-align: center;
    color: rgb(96, 99, 104);
}

header #subtitle {
    margin-top: -5px;
    font-size: 1.1em;
}

header #links {
    margin-top: 0px;
    margin-bottom: 10px;
}

header #links a {
    border-radius: 2px;
    font-weight: 400;
    color: white;
    font-size: 11px;
    padding: 4px;
}

p {
    font-size: 1.1em;
}

#error-box {
    background-color: #e53935;
    padding: 5px;
    border-radius: 8px;
    color: white;
    margin-top: 10px;
}

#error-message {
    color: white !important;
}

.line {
    height: 6px;
    background-color: rgb(131, 24, 12);
}

.pin-button,.unpin-button {
    cursor: pointer;
}

.collection-item {
    margin-top: 10px;
    text-overflow: ellipsis;
}

.collection-item[draggable="true"] {
    cursor: grab;
}

footer {
    padding-top: 0px !important;
    background-color: rgb(145, 20, 6);
    font-size: 11px;
}

footer a {
    color: white;
    padding: 2px 4px 2px 4px;
}

footer.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}