:root {
    /*font*/
    --default-font-family: "Open Sans",Arial,sans-serif;
    --default-font-size: 14px;
    /*colors*/
    --primary-color: #00bf82;
    --white: #fff;
    --gray-brightest: hsla(0, 0%, 0%, 0.04);
    --gray-brighter: hsla(0, 0%, 0%, 0.16);
    --gray-bright: hsla(0, 0%, 0%, 0.24);
    --gray: hsla(0, 0%, 0%, 0.5);
    --gray-dark: hsla(0, 0%, 0%, 0.8);
    --default-bg-color: var(--white);
    --default-fg-color: var(--gray-dark);
    --link-fg-color: var(--gray);
    --button-fg-color: var(--white);
    --neutral-title-color: var(--gray);
    --button-disabled-bg-color: var(--gray-bright);
    --error-fg-color: #ff0000;
    --textbox-border-color: var(--gray);
    /*dimensions*/
    --max-page-width: 400px;
    --max-logo-width: 250px;
    --max-logo-height: 150px;
    --max-list-width: var(--max-page-width);
    --max-list-item-width: var(--max-page-width);
    --logo-position: center;
    --default-padding: 1rem;
}

.list {
    /*font*/
    --item-font-size: 1em; /*if you change this, --max-icon-size scales with it. If you don't want that, change --max-icon-size to rem'*/
    /*colors*/
    --border-color: var(--gray-brighter);
    --shadow-color: var(--gray-brighter);
    --item-fg-color: var(--default-fg-color);
    --item-bg-color: var(--default-bg-color);
    --item-hover-color: var(--gray-brightest);
    /*dimensions*/
    --max-icon-size: 2em;
    --item-padding: var(--default-padding);
    --item-margin: var(--default-padding);
    --min-item-height: 0; /*for long texts, change this to increase the height of the list items*/
    --item-transition: background-color ease-in 0.15s;
}

.dropdown {
    --border-color: var(--gray-bright);
    --shadow-color: var(--gray-bright);
    --item-hover-color: var(--gray-brightest);
    --dropdown-transition: height ease-in 0.3s;
}

/*breakpoint should be at least 2 * --max-list-item-width (e.g. 2 * 400px = 800px). The column width is equal to --max-list-item-width*/
@media only screen and (min-width: 1024px) {
    :root {
        --max-list-width: calc(2*var(--max-list-item-width) + 2*var(--default-padding)); /* same padding as --item-padding */
    }
}