

.header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:8%;
    background-color: var(--bg-color);
    width: 100%;
    overflow:hidden;
}

.header .logo{
    width: 100px; /* Set a fixed width for the logo */
    height: auto; /* Maintain aspect ratio */
    left:0;
    margin:10px;
}

.header .searchInput{
    border:1px solid rgb(197, 193, 194);
    width: 60%;
    height:50%;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1rem;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: all 0.1s ease-in-out;
}

.header .toollist{
    align-content: center;
    right:0;
    gap:10px;
    margin-right:10px;
}

.header .toollist > *{
    padding: 5px 10px;
    width:auto;
    font-size:150%;
    user-select: none;
    color: var(--text-color);
}

.header .toollist > *:hover{
    background-color: rgb(197, 193, 194);
    border-radius: 5px;
    cursor: pointer;
    font-size:160%;
    transition: all 0.1s ease-in-out;
    color: var(--text-color);
}

.container{
    height:92vh;
    background-color:var(--bg-color);
    display:flex;
    flex-direction:column;
    overflow: auto;
    width:100%;
}