:root {
    --bg-color: #2B3D41Bf;
    --focused-color: #4C5F6BBF;
    --text-color: #E0E2DBFF;
    --highlight-color: #A37774FF;
    overflow-x: hidden;
}

label {
    color: var(--text-color);
    font-family: 'Roboto Mono', monospace;
}

#color-config {
    background-color: var(--bg-color);
    padding: 1vh;
    border: var(--bg-color) 1vw solid;
    border-radius: 1vw;
    display: grid;
    grid-template-areas:
        'bg-label bg-input'
        'focused-label focused-input'
        'highlight-label highlight-input'
        'text-label text-input';
    gap: 25px;
    background-color: var(--bg-color);
}

#bookmark-config {
    background-color: var(--bg-color);
    padding: 1vh;
    border: var(--bg-color) 1vw solid;
    border-radius: 1vw;
    display: grid;
    grid-template-areas:
        'empty1 uuid-selector empty2'
        'name-label link-label logo-label'
        'name-input link-input logo-input'
        'empty3 delete-button empty4';
    gap: 25px;
    background-color: var(--bg-color);
    margin-top: 1vh;
}

#search-engine-config {
    display: grid;
    grid-template-areas: 
    'empty1 heading empty2'
    'empty1 selector empty2';
    height: 10vh;
    gap: 1vh;
    background-color: var(--bg-color);
    border: var(--bg-color) 1vw solid;
    border-radius: 1vw;
    margin-top: 1vh;
}

#search-engine-heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2vh;
}

#search-engine-selector {
    background-color: var(--focused-color);
    color: var(--text-color);
    text-align: center;
    border: var(--highlight-color) 0.5vw solid;
    border-radius: 1vw;
    font-size: 2vh;
}

#bg-label { grid-area: bg-label;}
#bg-input { grid-area: bg-input;}
#focused-label { grid-area: focused-label;}
#focused-input { grid-area: focused-input;}
#highlight-label { grid-area: highlight-label;}
#highlight-input { grid-area: highlight-input;}
#text-label { grid-area: text-label;}
#text-input { grid-area: text-input;}

#uuid-selector { grid-area: uuid-selector;}
#name-label { grid-area: name-label;}
#name { grid-area: name-input;}
#link-label { grid-area: link-label;}
#link { grid-area: link-input;}
#logo-label { grid-area: logo-label;}
#logo { grid-area: logo-input;}
#delete-bookmark-button { grid-area: delete-button;}

#search-engine-heading { grid-area: heading;}
#search-engine-selector { grid-area: selector;}