.items-list { display: flex; flex-direction: column; align-items: center; justify-content: center; } .items-list .list-item { box-sizing: border-box; width: 100%; padding: calc(var(--padding) / 2); display: flex; flex-direction: row; justify-content: center; align-items: center; border: 3px solid white; border-bottom: none; margin: 0px; transition: color 0.5s, background-color 0.5s; } .items-list .list-item p { margin: 0px; } .items-list .list-item:first-child { border-radius: calc(var(--padding) / 2) calc(var(--padding) / 2) 0 0; } .items-list .list-item:last-child { border-bottom: 3px solid white; border-radius: 0 0 calc(var(--padding) / 2) calc(var(--padding) / 2); } .items-list .list-item:hover { background-color: var(--font-color); color: var(--left-bar-color); } .control-button button { position: absolute; top: calc(var(--padding) * 2); left: 100%; border: none; background-color: var(--left-bar-color); color: var(--font-color); padding: calc(var(--padding) / 2); border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0; transition: transform 0.5s; } .control-button button:hover { transform: scale(1.2); }