* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

html,
body {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

body {
    padding-top: 64px;
    padding-bottom: 8px;
    overflow-y: auto;
    background-color: rgb(54, 54, 54);
}

i {
    color: #aeaeae;
}

i:hover {
    color: #cfcfcf;
}

.gg-remove-r::before {
    left: 3px !important;
}

#brand {
    position: fixed;
    top: 8px;
    left: 8px;
    color: white
}

#add-to-stack {
    position: fixed;
    top: 8px;
    left: 8px;

    display: flex;
    gap: 10px;
    flex-direction: column;
}

#stack {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-self: flex-end;
}

.add-btn {
    cursor: pointer ;
    stroke: #6e6e6e;
    transition: stroke 125ms ease-in-out;
}
.add-btn:hover {
    stroke: #d0d0d0;
}

.stack-items {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-self: flex-end;
    margin-top: 16px;
    gap: 16px
}

.stack-item {
    width: 1024px;
    max-width: 60vh;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;

    transform: scaleY(1) scaleX(1);
    transform-origin: bottom left;
    transition: transform 125ms ease-in;
}

.stack-item.removing {
    transform: scale(0, 0);
}

.stack-item.adding {
    transform: scale(0, 0);
}

.stack-item:hover {
    border-color: white;
}

.stack-item__text {
    width: 100%;
    height: 100%;
    resize: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.741);
    background-color: rgb(104, 104, 104);
}